집 >웹 프론트엔드 >JS 튜토리얼 >Baidu 백과사전 디렉토리 탐색 트리 위젯 분석

Baidu 백과사전 디렉토리 탐색 트리 위젯 분석

不言원래의: 2018-06-25 12:01:041937검색

이 글에서는 주로 참고할만한 가치가 있는 바이두 백과사전 디렉토리 탐색 트리 위젯을 소개합니다. 함께 살펴볼까요

정원에 4년째 가입하고 3년 이상 계정을 등록했다고 하니 부끄럽습니다. 이전에 블로그를 작성하지 않은 이유는 다음과 같습니다. 1. 내 수준이 너무 약해서 감히 나와 다른 사람을 오해할 수 없습니다. 2. 나는 너무 게으른 편이다. 때로는 혼자서 작은 일을 하기도 하고, 그 일을 하는 과정에 흥미가 넘쳤지만, 하고 나면 지루함을 느꼈다. 너무 게으른 나머지 정리할 시간이 없었습니다. 나는 새해에도 이 아이디어를 계속하고 싶지 않습니다. 변화는 오늘부터 시작됩니다.

먼저 바퀴를 만들게 된 배경을 소개하겠습니다. 며칠 전 고객을 위해 프로토타입을 디자인했는데, 이는 단계에 대한 데이터를 표시하고 점수를 매기는 페이지입니다. 이 페이지에서 고객은 구성된 작업 단계를 볼 수 있습니다. 앱과 수집된 데이터는 각 단계를 별도로 평가합니다. 일반적으로 앱 측에 구성되는 작업 단계가 많다는 점을 고려합니다. 웹 배경이 표시되면 페이지가 매우 길어질 수 있습니다. 여러 단계를 평가한 후에도 아직 점수가 매겨지지 않은 단계가 몇 개 남아 있기 때문에 이 탐색을 통해 명확하고 직관적으로 볼 수 있도록 페이지 내비게이션과 유사한 것을 디자인하고 싶습니다. 현재 탐색 중인 단계를 확인할 수 있으며, 관심 있는 단계의 콘텐츠 영역으로 직접 스크롤할 수도 있습니다. 그때 바이두 백과사전 오른쪽에 있는 디렉토리 탐색 트리가 생각나서 그냥 이 효과를 사용하면 어떨까? 기본적으로 내가 원하는 효과에 부합하므로 그에 따라 프로토타입 페이지를 그렸습니다. 이 효과를 고객에게 확인하고 고객도 매우 만족했으며, 프로토타입이 결정된 후 작업이 시작됩니다. 이 탐색 트리부터 시작해 보겠습니다. 유지 관리 및 재사용의 관점에서 플러그인을 직접 캡슐화하고 JQ를 통해 직접 호출하여 함수 페이지의 코드 양을 줄이고 싶었습니다. 따라서 다음과 같은 작은 사항으로 먼저 렌더링을 살펴보겠습니다.

1. 제어 매개변수 소개

1, 데이터: 제어 생성을 위한 데이터 소스 제공, 제목 1, 제목 2, 제목 렌더링 세 번째 및 기타 탐색 이름은 이 속성의 NodeName을 통해 가져옵니다.

2, CSS: 탐색 트리 컨테이너에 CSS 스타일을 제공합니다. 이는 브라우저 상단과 오른쪽에서 탐색 트리의 거리를 제어하는 등 개인 요구에 따라 조정될 수 있습니다.

3, className: 이 매개변수는 브라우저 스크롤 막대가 해당 콘텐츠로 스크롤될 때 탐색 트리 커서를 해당 노드에 위치시키는 데 주로 사용됩니다. 기본값은 '.item'입니다.

현재는 이 세 가지 매개변수만 있습니다. 사용 시 필요에 따라 원하는 매개변수를 확장할 수 있습니다.

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를 가져오고 디렉터리 트리에서 해당 요소를 찾습니다. 노드, 노드 요소와 해당 상위 요소 사이의 거리를 가져오고 다음을 통해 $('.arrow') 객체까지의 거리를 제공합니다. $('.arrow') 객체는 오른쪽에 있는 파란색 커서 객체로, 상단 값을 제어하여 해당 노드의 위치에 맞게 표시를 조정합니다.

4. 추가 작은 기능

사용 시나리오에서는 어떤 단계가 점수가 매겨졌는지 표시할 수 있어야 하므로 이 컨트롤을 캡슐화할 때 이 추가 작은 기능을 추가했지만 기본적으로는 "이미 "Complete" 작은 아이콘은 표시되지 않습니다. 다음 js 코드를 통해 호출하면 해당 노드 뒤에 아이콘이 표시됩니다.

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

트리 개체는 컨트롤의 showOkIcon 메서드를 통해 반환되는 개체입니다. object, 작은 아이콘이 표시되며, 매개변수는 해당 노드의 ID입니다. 렌더링은 다음과 같습니다.

위 내용은 제가 블로그를 처음 작성하는 것이기 때문에 전부입니다. 수준이 제한되어 있으면 코드 구현이 우아하고 간결하지 않을 수 있습니다. 가볍게 두드려 보시고 봐주세요. 그것이 당신에게 도움이 될 수 있기를 바랍니다. ,

첨부된 다운로드 링크: http://pan.baidu.com/s/1kVFf8I7

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트를 주목하세요!

Baidu 백과사전 디렉토리 탐색 트리 위젯 분석

관련 기사