Analyse des Navigationsbaum-Widgets für das Baidu-Enzyklopädie-Verzeichnis

In diesem Artikel wird hauptsächlich das Baidu-Enzyklopädie-Verzeichnis-Navigationsbaum-Widget vorgestellt, das einen gewissen Referenzwert hat.

Es ist peinlich zu sagen, dass ich seit 4 Jahren im Garten bin 3 registrierte Konten. Es ist mehr als ein Jahr her und ich habe keinen Blog geschrieben. Die Gründe, warum ich vorher keinen Blog geschrieben habe, waren: 1. Ich hatte das Gefühl, dass mein Niveau zu schwach war und ich mich nicht getraute Ich hatte auch Angst, von den Großen ausgelacht zu werden. Manchmal war ich zu faul, um etwas Kleines zu machen, aber wenn ich es fertig hatte, Ich habe das Gefühl, dass es langweilig ist, und ich bin zu faul, mir die Zeit zu nehmen, es zu klären. Mit dieser Idee möchte ich im neuen Jahr nicht weitermachen. Der Wandel beginnt heute.

Lassen Sie mich zunächst den Hintergrund der Herstellung von Rädern vorstellen: Ich habe vor ein paar Tagen einen Prototyp für einen Kunden entworfen, bei dem es sich um eine Seite zum Anzeigen und Bewerten von Daten zu einem Schritt handelt. Auf dieser Seite können Kunden die Funktionsweise sehen Die Schritte der APP-Konfiguration und die gesammelten Daten können für jeden Schritt separat bewertet werden. Beim Entwerfen wird berücksichtigt, dass im Allgemeinen viele Arbeitsschritte auf der APP-Seite konfiguriert werden Es kann sein, dass Benutzer sehr lange dabei sind, Daten anzuzeigen und zu bewerten. Ich weiß nicht, wie viele Schritte noch nicht bewertet sind. Daher möchte ich mit dieser Navigation etwas Ähnliches entwerfen , kann ich klar und intuitiv erkennen, welchen Schritt ich gerade durchsuche. Gleichzeitig können Sie auch auf den Schritt klicken, der Sie interessiert, und direkt zum Inhaltsbereich dieses Schritts scrollen. Zu diesem Zeitpunkt hatte ich einen Geistesblitz und dachte an den Verzeichnisnavigationsbaum auf der rechten Seite der Baidu-Enzyklopädie. Er erfüllt im Grunde den gewünschten Effekt, also habe ich eine Prototypseite entsprechend gezeichnet Dieser Effekt wurde vom Kunden bestätigt. Nachdem der Prototyp feststeht, beginnt die Aufgabe. Beginnen wir mit diesem Navigationsbaum. Aus Sicht der Wartbarkeit und Wiederverwendung wollte ich ein Plug-In direkt über JQ aufrufen, damit die Codemenge auf der Funktionsseite geringer ist. Schauen wir uns also mit dieser Kleinigkeit zunächst das Rendering an:

1. Einführung in die Steuerparameter

1, Daten: Stellt eine Datenquelle für die Steuerelementgenerierung bereit. Die Navigationsnamen wie Titel 1, Titel 2 und Titel 3 im Rendering werden über den NodeName dieses Attributs abgerufen.

2. CSS: Stellen Sie einen CSS-Stil für den Navigationsbaum-Container bereit. Dies kann je nach persönlichen Bedürfnissen angepasst werden, z. B. um den Abstand des Navigationsbaums vom oberen und rechten Rand des Browsers zu steuern.

3, Klassenname: Dieser Parameter wird hauptsächlich verwendet, um den Navigationsbaum-Cursor auf den entsprechenden Knoten zu positionieren, wenn die Browser-Bildlaufleiste zum entsprechenden Inhalt scrollt. Der Standardwert ist „.item“.

Derzeit gibt es nur diese drei Parameter. Sie können die gewünschten Parameter bei der Verwendung entsprechend Ihren Anforderungen erweitern.

2. Kontrollaufrufe

1, js-Teil

<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. Wie wäre es mit dem Kontroll-HTML-Teil

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

?

3. Beschreibung der Implementierungsschwierigkeiten

Tatsächlich besteht der schwierigste Teil der gesamten Funktion darin, den Verzeichnisnavigationsbaum in dem aktuellen Bereich genau anzuzeigen Die Hauptsache ist, dass der Benutzer das Bildlaufereignis der Bildlaufleiste abhört und dann dynamisch berechnet, welches Element sich derzeit im sichtbaren Bereich des Browsers im Ereignis befindet, dann die eindeutige Kennung (ID) des Elements abruft und dann das findet Berechnen Sie anhand der ID den entsprechenden Knoten im Verzeichnisnavigationsbaum, und steuern Sie den oberen Wert des Cursorelements. Ich weiß, dass Sie dies möglicherweise immer noch nicht tun Bitte schauen Sie sich den Code an. Der Code ist manchmal besser als die verbale Erklärung anderer. Er ist viel intuitiver und klarer:

//#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

Die Variable _allElements speichert das über den className-Parameter erhaltene Objektarray. Das Array wird im Scroll-Ereignis kontinuierlich durchlaufen, um zu vergleichen, welches Element sich im aktuell sichtbaren Bereich befindet. Anschließend wird die ID des Elements ermittelt, der entsprechende Knoten im Verzeichnisbaum gesucht und der Abstand zwischen dem Knotenelement und seinem übergeordneten Element ermittelt , und geben Sie den Abstand zum $('.arrow')-Objekt über CSS an. Das $('.arrow')-Objekt ist das blaue Cursorobjekt auf der rechten Seite. Sie können die Position anpassen, an der es sich befindet dem entsprechenden Knoten angezeigt.

4. Zusätzliche kleine Funktionen

Denn in meinem Nutzungsszenario muss ich angeben können, welcher Schritt bewertet wurde, also muss ich beim Kapseln dieses Steuerelements zusätzliches This Es wurde eine kleine Funktion hinzugefügt, aber standardmäßig wird das kleine Symbol „Abgeschlossen“ nicht angezeigt. Beim Aufruf über den folgenden js-Code wird das Symbol hinter dem entsprechenden Knoten angezeigt:

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

Wo sich der Baum befindet Das Objekt Das nach dem Erstellen des Steuerelements zurückgegebene Objekt zeigt das kleine Symbol als ID des entsprechenden Knotens an:

Das ist alles. Es ist das erste Mal, dass ich einen Blog schreibe, und mein Niveau ist begrenzt, sodass die Code-Implementierung möglicherweise nicht elegant und prägnant genug ist. Bitte werfen Sie einen Blick darauf und klopfen Sie leicht darauf. Ich hoffe, es kann dir etwas helfen. ,

Angehängter Download-Link: http://pan.baidu.com/s/1kVFf8I7

Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es wird für das Lernen aller hilfreich sein. Bitte beachten Sie die chinesische PHP-Website für weitere verwandte Inhalte!

Verwandte Empfehlungen:

Über Jquery zTree Tree Control asynchroner Ladevorgang

So verwenden Sie Js zum dynamischen Erstellen von Divs

Probleme mit SpringBoot und SpringSecurity bei der Verarbeitung von Ajax-Anmeldeanfragen

Das obige ist der detaillierte Inhalt vonAnalyse des Navigationsbaum-Widgets für das Baidu-Enzyklopädie-Verzeichnis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!