Angular テキストの折りたたみおよび展開効果の簡単な実装-jsチュートリアル-php.cn

Angular テキストの折りたたみおよび展開効果の簡単な実装

小云云

リリース： 2017-12-18 11:43:56

オリジナル

2771 人が閲覧しました

Angular のテキストの折りたたみと展開の効果も非常に興味深い機能です。この記事では主に Angular のテキストの折りたたみと展開のコンポーネントの原理分析を紹介します。これが非常に優れていると思います。皆さんのお役に立てれば幸いです。

この種のコンポーネントは実際にさまざまな場所で使用できます

展開されたエフェクト

折りたたまれたエフェクト

。まず、すべてのコードを入力します。使用するときは、表示する必要があるテキスト {{designer.des}} をルーターにバインドする必要があるデータに置き換えるだけです

.directive(&#39;textfold&#39;, function() {
    return {
      restrict: &#39;EA&#39;,
      template: &#39;<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">&#39; + &#39;<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>&#39; + &#39;<br />&#39; + &#39;<span style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>&#39; + &#39;</p>&#39;,
      link: function(scope, element, attrs) {
        var height;
        var maxheight;
        function textfold() {
          height = angular.element(&#39;#textfold&#39;).height();
          maxheight = angular.element(&#39;#textfold&#39;).height();
        }
        scope.$watch(&#39;designer.des&#39;, function(data) {
          if (data) {
            textfold();
          }
        })
        var isExtend = true;
        scope.isMore = "折叠";
        scope.more = function() {
          var minheight = 23;
          if (isExtend) {
            if (height >= minheight) {
              document.getElementById(&#39;textfold&#39;).style.height = height + "px";
              setTimeout(function() {
                scope.more();
              }, 1);
              height -= 10;
            } else {
              scope.isMore = "查看更多...";
              scope.$apply();
              isExtend = !isExtend;
              height += 10;
            }
          } else {
            if (height <= maxheight) {
              document.getElementById(&#39;textfold&#39;).style.height = height + "px";
              setTimeout(function() {
                scope.more();
              }, 1);
              height += 10;
            } else {
              scope.isMore = "折叠";
              scope.$apply();
              isExtend = !isExtend;
              height -= 10;
            }
          }
        }
      }
    }
  })

ログイン後にコピー

このコンポーネントを文ごとに説明します

まず、Angular のコンポーネント化されたテンプレートと使用モードを定義する必要があります

restrict: &#39;EA&#39;,
template: &#39;<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">&#39; + &#39;<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>&#39; + &#39;<br />&#39; + &#39;<span style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>&#39; + &#39;</p>&#39;,

ログイン後にコピー

EA は、要素と属性を使用してプラグインを DOM に表示できるということです。の形式でこのコンポーネントを再利用することもできます。後でリンクを使用して関数を定義します

var height;
var maxheight;

ログイン後にコピー

これら 2 つの変数 1 つはこのときの折り畳み後の高さ (これは展開と折り畳みの過程で常に変化し、最終的に折り畳み後の minheight に等しくなります)、およびテキストを完全に展開したときの高さです

function textfold() {
          height = angular.element(&#39;#textfold&#39;).height();
          maxheight = angular.element(&#39;#textfold&#39;).height();
        }
        scope.$watch(&#39;designer.des&#39;, function(data) {
          if (data) {
            textfold();
            scope.more();
          }
        })

ログイン後にコピー

この 2 つこの文は実際には非常に重要です。テキストの高さを取得するときは、テキストの変化 (テキストが完全にレンダリングされた後の高さ) をキャプチャする必要があるため、scope.$ を使用します。 design.des の変更をキャプチャするために監視します。データが空でないとき、つまりテキストがレンダリングされた後、コールバック関数 textfold を実行して、現在のテキストの高さを取得します。レンダリング後のテキストの高さを取得するためにこのメソッドを一時的に試してみました

コールバックの代わりに順次実行した場合

if (data) {
            textfold();
          }

ログイン後にコピー

はspanタグのデフォルトの高さのみを取得します

ちょっとしたトリックを追加することもできますここに、scope.more();

angular.element(&#39;#textfold&#39;).height()

ログイン後にコピー

を追加します。この方法でページを作成できます。レンダリング後、最初に展開してから折りたたむと、ページに入るとデフォルトで折りたたまれた状態になります。プログラムでは、この効果を記述するとき、通常、テキストを展開して高さを取得し、その後、折りたたまれた状態に戻るようにします

var isExtend = true;次のscope.moreを最初の分岐の折りたたみ状態にします

if (data) {
            textfold();
            scope.more();
          }

ログイン後にコピー

この文は再帰文で、実際にはjQueryのanimateのテキストボックス展開アニメーションの実装に相当しますが、ここでは継続的に状態を判断するために再帰を利用しています。そして高さの値を変更します

そしてscope.isMoreを変更して変更します...もっと見る...または折りたたむ

ここではDOM操作を使用します

setTimeout(function() {
                scope.more();
              }, 1);

ログイン後にコピー

もう1文追加するのが最善です

document.getElementById(&#39;textfold&#39;).style.height = height + "px";

ログイン後にコピー

でDOMの変更を取得します

実際、一般的なアイデアは非常にシンプルで、他の場所も理解しやすいので、誰もが自分で試すことができます。