Baidu Encyclopedia ディレクトリナビゲーションツリーウィジェットの分析-jsチュートリアル-php.cn

Baidu Encyclopedia ディレクトリナビゲーションツリーウィジェットの分析

不言

リリース： 2018-06-25 12:01:04

オリジナル

1909 人が閲覧しました

この記事では主に百度百科ディレクトリナビゲーションツリーウィジェットを紹介しますが、これは一定の参考価値がありますので、一緒に見てみましょう

恥ずかしいことに、私は庭に4年いて、アカウントを3つ以上登録しています。これまでブログを書いたことがない理由は、 1. 自分のレベルが低すぎて、他人を誤解させるのが怖いからです。 2. 私は怠け者です。時々、一人で小さなことをすることがありますが、それを行う過程には興味があったのですが、終わった後は退屈だと感じました。それを整理するのに時間を費やすのが面倒です。新年もこの考えを続けたくありません。今日から変化が始まります。

まず、ホイール作成の背景をご紹介します。私は数日前に顧客向けにプロトタイプを設計しました。これは、ステップ上のデータを表示およびスコアリングするためのページです。このページでは、顧客は設定された作業ステップを確認できます。アプリと収集されたデータを個別にスコアリングします。一般に、Web 背景が表示されると、ページが長くならない可能性があることを考慮します。データを表示してスコアリングするプロセス中に、スコアリングされていないステップがまだいくつか残っているため、このナビゲーションを通じて、ページ上のナビゲーションに似たものをデザインしたいと考えています。現在閲覧しているステップを直感的に確認でき、興味のあるステップのコンテンツ領域まで直接スクロールすることもできます。そのとき、百度百科の右側にあるディレクトリナビゲーションツリーを思いつき、これを使えばいいのではないかと思いつき、基本的に希望通りの効果を実現できたので、それに従ってプロトタイプページを描きました。この効果をお客様に確認していただき、お客様も大変満足していただき、試作品が決まってから作業が始まりました。このナビゲーションツリーから始めましょう。保守性と再利用の観点から、関数ページ上のコードの量を減らすために、関数ページでプラグインを直接カプセル化したいと考えました。次の小さなことで、最初にレンダリングを見てみましょう:

1. コントロールパラメータの紹介

1, data: コントロール生成のためのデータソース、タイトル 1、タイトル 2、タイトルを提供します。レンダリング 3 番目およびその他のナビゲーション名は、この属性の NodeName を通じて取得されます。

2、css: ナビゲーションツリーコンテナーの CSS スタイルを提供します。これは、ブラウザーの上部と右側からのナビゲーションツリーの距離を制御するなど、個人のニーズに応じて調整できます。

3、className: このパラメータは主に、ブラウザのスクロールバーが対応するコンテンツにスクロールするときに、ナビゲーションツリーカーソルを対応するノードに配置するために使用されます。デフォルト値は '.item' です。

現時点ではこれらの 3 つのパラメータのみがあり、使用する際に必要に応じて必要なパラメータを拡張できます。

2. コントロール呼び出し

1、js部分

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="NavigationTree.js"></script>
<script>
 $(function () {
  //创建控件
  var tree = $(&#39;#demo&#39;).navigationTree({
  data: [
   { ID: &#39;1&#39;, NodeName: &#39;标题1&#39; },
   { ID: &#39;2&#39;, NodeName: &#39;标题2&#39; },
   {
   ID: &#39;3&#39;,
   NodeName: &#39;标题3&#39;,
   Children: [{ ID: &#39;3.1&#39;, NodeName: &#39;标题3.1&#39; }, { ID: &#39;3.2&#39;, NodeName: &#39;标题3.2&#39; }]
   },
   { ID: &#39;4&#39;, NodeName: &#39;标题4&#39; },
   { ID: &#39;5&#39;, NodeName: &#39;标题5&#39; }
  ]
  });
 });
</script>

ログイン後にコピー

2、コントロールHTML部分

<!--控件容器开始-->
<p id="demo"></p>
<!--控件容器结束-->

ログイン後にコピー

はどうでしょうか。呼び出しは比較的単純ですか?

3. 実装上の困難の説明

実際、機能全体の中で最も難しい部分は、現在のユーザーが閲覧している領域にディレクトリナビゲーションツリーをどのように正確に表示するかです。これは主にリスニングによって行われます。スクロールバーのスクロールイベント、およびイベント内で現在ブラウザの表示領域にある要素を動的に計算し、要素の一意の識別子 (ID) を取得し、その ID に基づいてディレクトリナビゲーションツリーで対応するノードを見つけます。ノードと親要素の先頭の間の距離を計算し、カーソル要素の先頭の値を渡します。これを言い終えてもまだ理解できないかもしれません。コードを見てください。他の人が口頭で説明するよりも、はるかに直感的で明確な場合があります:

//#region滚动条事件
 var $win = $(window);
 var winHeight = $win.height();
 $win.scroll(function () {
 var winScrollTop = $win.scrollTop();
 for (var i = _allElements.length - 1; i >= 0; i--) {
  var elmObj = $(_allElements[i]);
  //!(滚动条离顶部的距离>元素在当前视图的顶部相对偏移+元素外部高度)&&!(滚动条离顶部的距离<元素在当前视图的顶部相对偏移-window对象高度/2)
  if (!(winScrollTop > elmObj.offset().top + elmObj.outerHeight()) && !(winScrollTop < elmObj.offset().top - winHeight/2)) {
  $(&#39;.arrow&#39;).css({ top: $(&#39;[data-id="&#39; + elmObj.attr(&#39;id&#39;) + &#39;"]&#39;).position().top + 3 });
  return false;
  }
 }
 });
 //#endregion

ログイン後にコピー

その中で、変数 allElements は、className パラメーターを通じて取得されたオブジェクト配列を保存し、スクロールイベントで、現在表示されている要素を比較するために配列が継続的に循環されます。領域を取得し、要素の ID を取得してディレクトリツリー内で対応する要素を見つけ、ノード要素とその親要素の間の距離を取得し、css を通じて $('.arrow') オブジェクトまでの距離を与えます。 $('.arrow') オブジェクトは右側の青いカーソルオブジェクトで、その上部の値を制御して、対応するノードの位置に表示を調整します。

4. 追加の小さな関数

私の使用シナリオでは、どのステップがスコア化されたかをマークできる必要があるため、このコントロールをカプセル化するときにこの追加の小さな関数を追加しましたが、デフォルトでは「すでに「Complete」の小さなアイコンは表示されません。次の JS コードを通じて呼び出すと、アイコンは対応するノードの後ろに表示されます。

//控制第二个节点显示已完成
tree.showOkIcon(2);

ログイン後にコピー

ツリーオブジェクトは、コントロールの showOkIcon メソッドを通じて返されるオブジェクトです。オブジェクト、小さなアイコンが表示され、パラメータは対応するノードの ID です。レンダリングは次のとおりです。

初めてブログを書くので、上記がすべてです。レベルが制限されている場合、コードの実装は十分に洗練されて簡潔ではない可能性があります。軽く撫でて見てください。少しでもお役に立てれば幸いです。、

添付のダウンロードリンク: http://pan.baidu.com/s/1kVFf8I7

上記がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトに注意してください。

Baidu Encyclopedia ディレクトリ ナビゲーション ツリー ウィジェットの分析

Baidu Encyclopedia ディレクトリナビゲーションツリーウィジェットの分析