46zTree - Metro 风格的左侧菜单
生活随笔
收集整理的這篇文章主要介紹了
46zTree - Metro 风格的左侧菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖：
代碼：
<!DOCTYPE html> <HTML> <HEAD><TITLE> ZTREE DEMO - Simple Data</TITLE><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="../../../css/demo.css" type="text/css"><link rel="stylesheet" href="../../../css/metroStyle/metroStyle.css" type="text/css"><script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script><SCRIPT type="text/javascript"><!--var setting = {view: {addHoverDom: addHoverDom,removeHoverDom: removeHoverDom,selectedMulti: false},check: {enable: true},data: {simpleData: {enable: true}},edit: {enable: true}};var zNodes =[{ id:1, pId:0, name:"父節點1", open:true},{ id:11, pId:1, name:"父節點11"},{ id:111, pId:11, name:"葉子節點111"},{ id:112, pId:11, name:"葉子節點112"},{ id:113, pId:11, name:"葉子節點113"},{ id:114, pId:11, name:"葉子節點114"},{ id:12, pId:1, name:"父節點12"},{ id:121, pId:12, name:"葉子節點121"},{ id:122, pId:12, name:"葉子節點122"},{ id:123, pId:12, name:"葉子節點123"},{ id:124, pId:12, name:"葉子節點124"},{ id:13, pId:1, name:"父節點13", isParent:true},{ id:2, pId:0, name:"父節點2"},{ id:21, pId:2, name:"父節點21", open:true},{ id:211, pId:21, name:"葉子節點211"},{ id:212, pId:21, name:"葉子節點212"},{ id:213, pId:21, name:"葉子節點213"},{ id:214, pId:21, name:"葉子節點214"},{ id:22, pId:2, name:"父節點22"},{ id:221, pId:22, name:"葉子節點221"},{ id:222, pId:22, name:"葉子節點222"},{ id:223, pId:22, name:"葉子節點223"},{ id:224, pId:22, name:"葉子節點224"},{ id:23, pId:2, name:"父節點23"},{ id:231, pId:23, name:"葉子節點231"},{ id:232, pId:23, name:"葉子節點232"},{ id:233, pId:23, name:"葉子節點233"},{ id:234, pId:23, name:"葉子節點234"},{ id:3, pId:0, name:"父節點3", isParent:true}];$(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);});var newCount = 1;function addHoverDom(treeId, treeNode) {var sObj = $("#" + treeNode.tId + "_span");if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;var addStr = "<span class='button add' id='addBtn_" + treeNode.tId+ "' title='add node' onfocus='this.blur();'></span>";sObj.after(addStr);var btn = $("#addBtn_"+treeNode.tId);if (btn) btn.bind("click", function(){var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});return false;});};function removeHoverDom(treeId, treeNode) {$("#addBtn_"+treeNode.tId).unbind().remove();};//--></SCRIPT> </HEAD><BODY> <h1>Metro 風格</h1> <h6>[ 文件路徑: super/metro.html ]</h6> <div class="content_wrap"><div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul></div><div class="right"><ul class="info"><li class="title"><h2>1、樣式文件說明</h2><ul class="list"><li class="highlight_red">請使用 css/metroStyle 目錄內的樣式文件 和 圖片</li><li>感謝網友 rqx110 提供， 僅供參考</li></ul></li></ul></div> </div> </BODY> </HTML>總結
以上是生活随笔為你收集整理的46zTree - Metro 风格的左侧菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高科技口罩可以5分钟内灭活新冠病毒；华伦
- 下一篇： metro风格的特点