1

私は（純粋なJavaScript = JQueryなしを使用して）カスタムコントロールを作成しています。これは、複数の行にまたがって最初の行のみを表示するときにコンテンツを折りたたむコンテナです。コントロール内のボタン (下向き矢印) をクリックすると、コンテナーはそのすべてのコンテンツを展開します。コンテンツが 1 行しかない場合、ボタンはまったく表示されず、通常のコンテナーとして動作します。

以下の 2 つの図は、コントロールが折りたたまれた状態 (上) と展開された状態 (下) を示しています。

コントロールが折りたたまれました

拡張されたコントロール

私が直面している問題は、ボタンを表示するタイミングとボタンを表示しないタイミングをどのように知るか = コンテンツが複数行であるか、1 行のみにまたがっているかを検出する方法です。私のアプローチは、要素の高さを取得し、それを折りたたんで、高さが変化したかどうかを確認することです（変化した場合は、複数行でなければなりません）。

このアプローチの問題は、関数内で、createCollapsingPanel()作成している要素がまだ DOM に追加されていないことです。関数は要素を返し、それが DOM に追加されるだけです (以下のアーキテクチャ 1で示されています)。それがその 1 つの関数だけに関係する場合は、もちろん関数内に追加を移動できます (以下のアーキテクチャ 2 )。残念ながら、それは私がすべての関数を書いた方法です（それらは要素を返し、それらはそれらを呼び出した外側の関数の親要素に追加されるだけです）、それは最終的にこれを呼び出す他の親関数を書き直すことを意味します、一般的に私の関数のアーキテクチャ全体。

アーキテクチャ 1

function createOuterElement() {
  var outerElement = document.createElement(...);

  outerElement.appendChild(createInnerElement());
  /* Do other things with outerElement */

  return outerElement;
}

function createInnerElement() {
  var innerElement = document.createElement(...);

  /* Do things with innerElement */

  return innerElement;
}

アーキテクチャ 2

function createOuterElement(parentElement) {
  var outerElement = document.createElement(...);

  parentElement.appendChild(outerElement);
  createInnerElement(outerElement);
  /* Do other things with outerElement */
}

function createInnerElement(parentElement) {
  var innerElement = document.createElement(...);

  parentElement.appendChild(innerElement);
  /* Do other things with innerElement */
}

主な質問

私の現在のアーキテクチャ（ Architecture 1 ）でそれを処理する方法についてのアイデアはありますか？コントロール要素にアタッチできるイベントがあり、要素がDOMに挿入され、ブラウザスタイルが計算された後に呼び出されるでしょうか?

追加の質問

アーキテクチャ 1で関数を記述することは悪い習慣と見なされますか? 私は非基本的な JavaScript にかなり慣れていないので、どのような優れたプラクティスがあるかわかりません。

4

2 に答える 2

2

常に内側のコンテナを複数行にして、外側のコンテナでクリップするだけです。

外側の容器の使用について:

  • overflow: hidden
  • height:ある値

内容器の使用について：

  • position: absolute
  • height: auto

を内容器に入れspanます。

内側のコンテナの高さを外側のコンテナとは別に測定できるようになりました。

于 2015-06-10T16:43:10.640 に答える
1

要素のサイズを測定するために、dom で非表示のコンテナーを使用できます。非表示のコンテナは、次のような dom 内の単純な div にすることができます。

   ...
   <body>
      <div id="measurementContainer" style="display:none;"></div>

測定機能は次のことができます。

  1. 要素を測定コンテナーに追加します ( div)
  2. 要素を測定する
  3. 再度測定容器から取り出します

例えば：

    function measureElementWidth(element) {
       var measurementContainer = document.getElementById(measurementContainer);
       measurementContainer.appendChild(element);

       var width = element.clientWidth;

       measurementContainer.removeChild(element);

       return width;
}

または、 MutationObserversを使用して、要素が dom に追加された場合に通知を受け取ることができます。必要なすべてのブラウザがこれをサポートしているかどうかを確認してください。

またはさらに簡単: 要素を dom に追加した後、サイジング関数を呼び出すだけです。

于 2015-06-10T16:08:17.270 に答える