Analyse du widget d'arborescence de navigation du répertoire de l'encyclopédie Baidu

Cet article présente principalement le widget d'arborescence de navigation de l'annuaire Baidu Encyclopedia, qui a une certaine valeur de référence. Jetons-y un coup d'œil ensemble

C'est embarrassant de dire que je suis dans le jardin depuis 4 ans et que je l'ai. 3 comptes enregistrés. Cela fait plus d'un an et je n'ai pas écrit de blog auparavant. Les raisons pour lesquelles je n'ai pas écrit de blog avant étaient : 1. Je sentais que mon niveau était trop faible et je n'osais pas venir. Je voulais aussi tromper les autres. J'avais aussi peur d'être moqué par les grands. 2. J'étais trop paresseux. Parfois, je fais quelque chose de petit tout seul, et je m'y intéresse beaucoup en le faisant. Je trouve que c'est ennuyeux et je suis trop paresseux pour passer du temps à régler ce problème. Je ne veux pas continuer avec cette idée au cours de la nouvelle année. Le changement commence aujourd’hui.

Permettez-moi d'abord de vous présenter le contexte de la fabrication des roues : j'ai conçu il y a quelques jours un prototype pour un client, qui est une page permettant d'afficher et de noter les données en une seule étape. Sur cette page, les clients peuvent voir le fonctionnement. étapes de la configuration de l'APP et les données collectées. Les données peuvent être notées séparément pour chaque étape, lors de la conception, il est généralement considéré que de nombreuses étapes de travail sont configurées du côté de l'APP. Lorsque l'arrière-plan Web est affiché, la page sera. très long, et les utilisateurs peuvent être en train de visualiser les données et de noter. Je ne sais pas combien d'étapes j'ai évaluées et combien d'étapes ne sont pas notées, je souhaite donc concevoir quelque chose de similaire à la navigation sur la page. navigation, je peux voir clairement et intuitivement quelle étape je suis en train de parcourir. En même temps, vous pouvez également cliquer sur l'étape qui vous intéresse et faire défiler directement jusqu'à la zone de contenu de cette étape. À ce moment-là, j'ai eu un éclair d'inspiration et j'ai pensé à l'arborescence de navigation dans les répertoires sur le côté droit de l'Encyclopédie Baidu. Pourquoi ne pas simplement utiliser cet effet ? Cela répond essentiellement à l'effet que je souhaite, j'ai donc dessiné une page prototype selon. Cet effet et l'a confirmé auprès du client. Le client était également très satisfait, une fois le prototype déterminé, la tâche commence. Commençons par cet arbre de navigation. Du point de vue de la maintenabilité et de la réutilisation, je voulais encapsuler directement un plug-in sur la page de fonction, l'appeler directement via JQ, afin que la quantité de code sur la page de fonction soit moindre, donc Avec ce petit truc, regardons d'abord le rendu :

1. Introduction aux paramètres de contrôle

1, data : fournit une source de données pour la génération de contrôles. Les noms de navigation tels que Titre 1, Titre 2 et Titre 3 dans le rendu sont obtenus via le NodeName de cet attribut.

2. CSS : fournissez un style CSS pour le conteneur de l'arborescence de navigation. Cela peut être ajusté en fonction des besoins personnels, comme contrôler la distance de l'arborescence de navigation depuis le haut et le côté droit du navigateur.

3, className : Ce paramètre est principalement utilisé pour positionner le curseur de l'arborescence de navigation sur le nœud correspondant lorsque la barre de défilement du navigateur défile jusqu'au contenu correspondant. La valeur par défaut est '.item'.

Actuellement, il n'y a que ces trois paramètres. Vous pouvez étendre les paramètres que vous souhaitez en fonction de vos besoins lors de son utilisation.

2. Contrôler les appels

1, partie 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. Qu'en est-il de la partie html de contrôle

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

Est-ce plus facile à appeler ?

3. Description des difficultés de mise en œuvre

En fait, la partie la plus difficile de toute la fonction est de savoir comment afficher avec précision la zone dans laquelle l'utilisateur actuel navigue dans le arborescence de navigation dans le répertoire. Il s'agit principalement d'écouter l'événement de défilement de la barre de défilement, puis de calculer dynamiquement quel élément se trouve actuellement dans la zone visible du navigateur dans l'événement, puis d'obtenir l'identifiant unique (ID) de l'élément, puis de trouver le correspondant. nœud dans l'arborescence de navigation du répertoire en fonction de l'ID. , calculez la distance entre le nœud et le haut de l'élément parent et contrôlez la valeur supérieure de l'élément curseur. Je sais que lorsque j'aurai fini de dire cela, vous ne comprendrez peut-être toujours pas. , alors jetez un œil au code. Le code est parfois meilleur que l'explication verbale des autres. Il est beaucoup plus intuitif et clair :

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

La variable _allElements enregistre le tableau d'objets obtenu via le paramètre className. . Le tableau est continuellement parcouru dans l'événement de défilement pour comparer quel élément est actuellement visible dans la zone, puis obtenir l'ID de l'élément, rechercher le nœud correspondant dans l'arborescence des répertoires, obtenir la distance entre l'élément nœud et son élément parent. , et donnez la distance à l'objet $('.arrow') via CSS. L'objet $('.arrow') est l'objet curseur bleu à droite en contrôlant sa valeur supérieure, vous pouvez ajuster la position où il se trouve. affiché sur le nœud correspondant.

4. Petites fonctions supplémentaires

Car dans mon scénario d'utilisation, je dois pouvoir indiquer quelle étape a été marquée, donc lors de l'encapsulation de ce contrôle, This supplémentaire une petite fonction a été ajoutée, mais par défaut la petite icône "Complet" ne sera pas affichée Lorsqu'elle est appelée via le code js suivant, l'icône sera affichée derrière le nœud correspondant :

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

L'objet arbre. est l'objet renvoyé après la création du contrôle. Grâce à la méthode showOkIcon de l'objet, la petite icône est affichée. Le diagramme d'effet est le suivant :

<.>

Lien de téléchargement ci-joint : http://pan.baidu.com/s/1kVFf8I7

Ce qui précède représente l'intégralité du contenu de cet article, j'espère cela sera utile à l'apprentissage de tout le monde. Utile, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

À propos de l'opération de chargement asynchrone du contrôle d'arborescence Jquery zTree

Comment utiliser Js pour créer dynamiquement des divs

Problèmes avec SpringBoot et SpringSecurity lors de la gestion des demandes de connexion Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!