欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS樹形菜單組件Bootstrap TreeView使用方法詳解

 更新時(shí)間：2016年12月21日 16:44:29   作者：cheer4chai  
這篇文章主要為大家詳細(xì)介紹了js組件Bootstrap TreeView使用方法，本文一部分針對于bootstrap的treeview的實(shí)踐，另一部分是介紹自己寫的樹形菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

簡要介紹：　　

之前手頭的一個(gè)項(xiàng)目需要去做一個(gè)左側(cè)的樹形菜單，右側(cè)則是一個(gè)整體的iframe，從而構(gòu)成一個(gè)整體的網(wǎng)站。一開始是打算用bootstrap的tree-view插件，直接把菜單的數(shù)據(jù)傳過去就好了，結(jié)果后來項(xiàng)目又改了需求，菜單的內(nèi)容和圖表都是后臺(tái)動(dòng)態(tài)生成的，所以只能放棄使用bootstrap插件，自己著手寫了一個(gè)樹形菜單。本文主要分兩部分講，一個(gè)是對于bootstrap的treeview的實(shí)踐，另一部分是介紹自己寫的樹形菜單。

bootstrap-treeview：

組件介紹：http://www.dbjr.com.cn/article/96222.htm

其實(shí)關(guān)于該組件在其他網(wǎng)站上已經(jīng)講得很詳細(xì)了，我就不再贅述了，但是網(wǎng)上的應(yīng)用還是有點(diǎn)問題，這里主要講一下自己使用這個(gè)插件過程吧。

1.　html引用及結(jié)構(gòu)

　　引用css：文件本身的css文件、bootstrp.css文件

　　引用js：jquery、bootstrap-treeview.js、引用該組件的treeview.js文件

　　整體HTML結(jié)構(gòu)主要分為了三個(gè)部分：頭部、樹狀欄部分、iframe部分，使用組件的為樹狀欄部分：#tree

2.引用組件js設(shè)置：

　　具體設(shè)置代碼如下：主要思路是用data傳入菜單的數(shù)據(jù)和依靠關(guān)系，同時(shí)可以設(shè)置一些變量來控制改樹狀欄的樣式和基本功能，如代碼40-43行，具體變量對應(yīng)的數(shù)值的意義可以參見之前鏈接中的表格

(function(win) { 
 var data = [
  {
  text: "Parent 1",
  nodes: [
  {
  text: "Child 1",
  nodes: [
   {
   text: "Grandchild 1"
   },
   {
   text: "Grandchild 2"
   }
  ]
  },
  {
  text: "Child 2"
  }
  ]
  },
  {
  text: "Parent 2"
  },
  {
  text: "Parent 3"
  },
  {
  text: "Parent 4"
  },
  {
  text: "Parent 5"
  }
 ];  
 
 var tree = function() {
 $('#tree').treeview({
  　data: data,
  backColor: '#293541',
  color: 'white',
  onhoverColor:'#202a33;',
  showBorder: false
  }); 
 }
 
 var init = function() {
 tree();
 }
 
 init();
})(window)

　　設(shè)置完成之后樹狀欄的樣式如下圖所示，另外細(xì)節(jié)方面可以通過閱讀相應(yīng)參數(shù)來設(shè)置，值得一提的是樹狀欄的icon圖標(biāo)是通過bootstrap的glyphicon設(shè)置的，有興趣的童鞋可以去看一下這個(gè)東西，來為菜單設(shè)置不同的icon，不過實(shí)際效果感覺不是特別好。這也是我決定自己去搞一個(gè)樹狀欄的原因。

　　

自定義樹狀菜單：

　　treeview的插件只能點(diǎn)擊菜單前面的加號(hào)icon展開關(guān)閉，樣式的變化有限，而且我們需要根據(jù)后臺(tái)傳入的數(shù)據(jù)來動(dòng)態(tài)設(shè)置菜單的結(jié)構(gòu)和內(nèi)容，所以為了滿足這幾個(gè)需求，重新寫了一個(gè)tree.js

　　js主要分成三個(gè)部分，第一個(gè)部分是為每個(gè)菜單和子菜單注冊點(diǎn)擊事件以及通過后臺(tái)傳來的數(shù)據(jù)為其綁定跳轉(zhuǎn)鏈接；第二個(gè)部分是通過ajax獲取后臺(tái)傳來的菜單數(shù)據(jù)，并將數(shù)據(jù)傳入前臺(tái)；第三個(gè)部分是通過underscore的template函數(shù)將前臺(tái)頁面進(jìn)行渲染，達(dá)到動(dòng)態(tài)實(shí)現(xiàn)樹狀欄的功能。、

　　相關(guān)js代碼：

 var tree = function() {
 //一級(jí)導(dǎo)航點(diǎn)擊事件
 $('.nodeBox').on('click', function(event) {
  var _this = $(this);
  var child = _this.parent().find('.nodechild_box');
  if (_this.attr('opened') == 'opened') {
  _this.parent().find('.childnode').hide();
  child.hide();
  _this.attr('opened', '');
  }else{
  _this.parent().find('.childnode').show();
  child.show();
  _this.attr('opened', 'opened');
  };
 });
 //二級(jí)導(dǎo)航點(diǎn)擊事件
 $('.nodechild_box').on('click', function(event) {
  var _this = $(this);
  var child = _this.parent().find('.gchild_box');
  if (_this.attr('opened') == 'opened') {
  child.hide();
  _this.parent().find('.gchildnode').hide();
  _this.find('.add').attr('src', 'images/icon_add.png');
  _this.attr('opened', '');
  }else{
  child.show();
  _this.parent().find('.gchildnode').show();
  _this.find('.add').attr('src', 'images/icon_minus.png');
  _this.attr('opened', 'opened');
  };
 });
 //三級(jí)導(dǎo)航點(diǎn)擊事件
 $('.gchild_box').on('click', function(event) {
  var _this = $(this);
  var child = _this.parent().find('.ggchild_box');
  if (_this.attr('opened') == 'opened') {
  child.hide();
  _this.find('.add').attr('src', 'images/icon_add.png');
  _this.attr('opened', '');
  }else{
  child.show();
  _this.find('.add').attr('src', 'images/icon_minus.png');
  _this.attr('opened', 'opened');
  };
 });

 //hover顯示箭頭及背景變化
 $('.nodeBox').mouseover(function(event) {
  $(this).addClass('tree_hover');
  $(this).find('.arrow').show();
 });
 $('.nodeBox').mouseout(function(event) {
  $(this).removeClass('tree_hover');
  $(this).find('.arrow').hide();
 });
 $('.nodechild_box').mouseover(function(event) {
  $(this).addClass('box_hover');
  $(this).find('.arrow').show();
 });
 $('.nodechild_box').mouseout(function(event) {
  $(this).removeClass('box_hover');
  $(this).find('.arrow').hide();
 });
 $('.gchild_box').mouseover(function(event) {
  $(this).addClass('box_hover');
  $(this).find('.arrow').show();
 });
 $('.gchild_box').mouseout(function(event) {
  $(this).removeClass('box_hover');
  $(this).find('.arrow').hide();
 });
 $('.ggchild_box').mouseover(function(event) {
  $(this).addClass('box_hover');
  $(this).find('.arrow').show();
 });
 $('.ggchild_box').mouseout(function(event) {
  $(this).removeClass('box_hover');
  $(this).find('.arrow').hide();
 });
 };
 
 //鏈接函數(shù)
 var tree_link = function() {
 
 var linkBox = $('[menurl]');
 linkBox.each(function(i, ele) {
  var _ele = $(ele);
  var key = _ele.attr('menurl');
  if(key != '/'){
  $(this).on('click',function(){
   $('#mainweb').attr('src', key);
   auto();
  }) 
  }
  
 });
 };
 
 //獲取登陸用戶數(shù)據(jù)
 var getData = function() {
 var cond = sessionStorage.cond; 
 
 $.post("XXXX", {}, function(json) {
  console.log(json)
  if(json.code == 200){
  data = json.data;
  fillUserName(data);
  fillTree(data);
  var length = $('.nodeBox').length ;
  for (var i = 0;i < length;i++) {  
   var iconId = data.icons[i].iconId;
   $('.nodeBox').eq(i+1).attr('menuid',i);
   $('.nodeBox').eq(i+1).find('img').attr('src','images/'+ data.icons[iconId-1].name +'');

  }
  //為每個(gè)菜單添加鏈接
  tree_link()
  }
 }, function(xhr) {
  console.log(xhr)
 });

 }
 
 
 var fillTree = function(data){
 var tmplDom = $('#tree');
 tmplDom.parent().html(eking.template.getHtml(tmplDom.html(),data));
 tree();
 }

HTML渲染：  

<div class="main w_1200">
 <div class="tree">
 <script type="text/html" id="tree">
  <div class="tree_box">
  <div class="nodeBox index" menurl="notice.html">
   <span class="m_l_10"><img src="images/icon_home.png" alt=""></span>
   <span class="m_l_10">首頁</span>
   <span class="arrow fr m_r_10"><img src="images/icon_arrow.png" alt=""></span>
  </div>
  </div>
  <%var menus = data.menus;%>
  <%for(var i = 0;i < menus.length;i++){%>
  <div class="tree_box">
  <div class="nodeBox" menurl=<%=menus[i].url%> >
   <span class="m_l_10"><img src="" alt=""></span>
   <span class="m_l_10"><%=menus[i].name%></span>
  </div>
  <%var childmenus = menus[i].childs;%>
  <%for(var j = 0;j < childmenus.length;j++){%>
  <div class="childnode">
   <div class="nodechild_box" menurl=<%=childmenus[j].url%> >
   <%if(childmenus[j].childs.length != 0){%>
   <span class="m_l_20"><img class="add" src="images/icon_add.png" alt=""></span>
   <span class="m_l_10"><%=childmenus[j].name%></span>
   <%}else{%>
   <span class="m_l_55"><%=childmenus[j].name%></span>
   <span class="arrow fr m_r_10"><img src="images/icon_arrow.png" alt=""></span>
   <%}%>
   </div>
   <%var cchildmenus = childmenus[j].childs;%>
   <%for(var k = 0;k < cchildmenus.length;k++){%>
   <div class="gchildnode">
   <div class="gchild_box" menurl=<%=cchildmenus[k].url%> >
    <%if(cchildmenus[k].childs.length != 0){%>
    <span class="m_l_30"><img class="add" src="images/icon_add.png" alt=""></span>
    <span class="m_l_10"><%=cchildmenus[k].name%></span>
    <%}else{%>
    <span class="m_l_65"><%=cchildmenus[k].name%></span>
    <span class="arrow fr m_r_10"><img src="images/icon_arrow.png" alt=""></span>
    <%}%>
   </div>
   <%var ccchildmenus = cchildmenus[k].childs;%>
   <%for(var l = 0;l < ccchildmenus.length;l++){%>
   <div class="ggchild_box" menurl=<%=ccchildmenus[l].url%> >
    <span class="m_l_70"><%=ccchildmenus[l].name%></span>
    <span class="arrow fr m_r_10"><img src="images/icon_arrow.png" alt=""></span>
   </div>
   <%}%>
   </div>
   <%}%>
  </div>
  <%}%>
  </div>
 <%}%>
 </script>
 </div>

后臺(tái)傳入的數(shù)據(jù)格式為

菜單效果如圖：

存在的不足和問題：

為了跟上項(xiàng)目進(jìn)度，tree.js尚未組件化，等有時(shí)間了打算把這一塊封裝為一個(gè)js組件，通過設(shè)置參數(shù)完成樹狀欄的設(shè)置。

P.S.由于個(gè)人技術(shù)水平有限，難免出現(xiàn)錯(cuò)誤，請多多指正 :)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論