代码：win10风格的资源树

来源：互联网发布：可以下载的软件编辑：程序博客网时间：2024/05/17 15:35

HTML文件

<!DOCTYPE html><HTML><HEAD>    <TITLE> ZTREE DEMO - left_menu for Outlook</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/zTreeStyle/zTreeStyle.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-3.5.js"></script>    <SCRIPT type="text/javascript">        <!--        var curMenu = null, zTree_Menu = null;        var setting = {            view: {                showLine: false,                showIcon: false,                selectedMulti: false,                dblClickExpand: false,                addDiyDom: addDiyDom            },            data: {                simpleData: {                    enable: true                }            },            callback: {                beforeClick: beforeClick            }        };        var zNodes =[            { id:1, pId:0, name:"哈哈融合CDN", open:true},            { id:11, pId:1, name:"区域节点1"},            { id:12, pId:1, name:"区域节点2"},            { id:111, pId:11, name:"服务节点1"},            { id:112, pId:11, name:"服务节点2"},            { id:113, pId:11, name:"服务节点3"},            { id:114, pId:12, name:"服务节点4"},            { id:115, pId:12, name:"服务节点5"},            { id:1111, pId:111, name:"IPTV节点1"},            { id:1112, pId:111, name:"Cache节点1"},            { id:1113, pId:112, name:"IPTV节点2"},            { id:1114, pId:113, name:"Cache节点2"},            { id:1115, pId:114, name:"IPTV节点1"},            { id:1116, pId:115, name:"Cache节点2"},        ];        function addDiyDom(treeId, treeNode) {            var spaceWidth = 5;            var switchObj = $("#" + treeNode.tId + "_switch"),            icoObj = $("#" + treeNode.tId + "_ico");            switchObj.remove();            icoObj.before(switchObj);            if (treeNode.level > 1) {                var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";                switchObj.before(spaceStr);            }        }        function beforeClick(treeId, treeNode) {            if (treeNode.level == 0 ) {                var zTree = $.fn.zTree.getZTreeObj("treeDemo");                zTree.expandNode(treeNode);                return false;            }            if (treeNode.level == 1 ) {                var zTree = $.fn.zTree.getZTreeObj("treeDemo");                zTree.expandNode(treeNode);                return false;            }            if (treeNode.level == 2 ) {                var zTree = $.fn.zTree.getZTreeObj("treeDemo");                zTree.expandNode(treeNode);                return false;            }            return true;        }        $(document).ready(function(){            var treeObj = $("#treeDemo");            $.fn.zTree.init(treeObj, setting, zNodes);            zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");            curMenu = zTree_Menu.getNodes()[0].children[0].children[0];            zTree_Menu.selectNode(curMenu);            treeObj.hover(function () {                if (!treeObj.hasClass("showIcon")) {                    treeObj.addClass("showIcon");                }            }, function() {                treeObj.removeClass("showIcon");            });        });        //-->    </SCRIPT>    <style type="text/css">.ztree * {font-size: 10pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}.ztree li ul{ margin:0; padding:0}.ztree li {line-height:30px;}.ztree li a {width:200px;height:30px;padding-top: 0px;}.ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}.ztree li a span.button.switch {visibility:hidden}.ztree.showIcon li a span.button.switch {visibility:visible}.ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}.ztree li span {line-height:30px;}.ztree li span.button {margin-top: -7px;}.ztree li span.button.switch {width: 16px;height: 16px;}.ztree li a.level0 span {font-size: 150%;font-weight: bold;}.ztree li span.button {background-image:url("./left_menuForOutLook.png"); *background-image:url("./left_menuForOutLook.gif")}.ztree li span.button.switch.level0 {width: 20px; height:20px}.ztree li span.button.switch.level1 {width: 20px; height:20px}.ztree li span.button.noline_open {background-position: 0 0;}.ztree li span.button.noline_close {background-position: -18px 0;}.ztree li span.button.noline_open.level0 {background-position: 0 -18px;}.ztree li span.button.noline_close.level0 {background-position: -18px -18px;}    </style> </HEAD><BODY><h1>OutLook 样式的左侧菜单</h1><h6>[ 文件路径: super/left_menuForOutLook.html ]</h6><div class="content_wrap">    <div class="zTreeDemoBackground left">        <ul id="treeDemo" class="ztree"></ul>    </div></div></BODY></HTML>

引用的文件取自ztree模板，其中引用的demo.css修改为

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {    margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}body {color: #2f332a;font: 15px/21px Arial, Helvetica, simsun, sans-serif;background: #f0f6e4 \9;}h1, h2, h3, h4, h5, h6 {color: #2f332a;font-weight: bold;font-family: Helvetica, Arial, sans-serif;padding-bottom: 5px;}h1 {font-size: 24px;line-height: 34px;text-align: center;}h2 {font-size: 14px;line-height: 24px;padding-top: 5px;}h6 {font-weight: normal;font-size: 12px;letter-spacing: 1px;line-height: 24px;text-align: center;}a {color:#3C6E31;text-decoration: underline;}a:hover {background-color:#3C6E31;color:white;}input.radio {margin: 0 2px 0 8px;}input.radio.first {margin-left:0;}input.empty {color: lightgray;}code {color: #2f332a;}.highlight_red {color:#A60000;}.highlight_green {color:#A7F43D;}li {list-style: circle;font-size: 12px;}li.title {list-style: none;}ul.list {margin-left: 17px;}div.content_wrap {width: 600px;height:380px;}div.content_wrap div.left{float: left;width: 250px;}div.content_wrap div.right{float: right;width: 340px;}div.zTreeDemoBackground {width:250px;height:362px;text-align:left;}ul.ztree {margin-left: 300px;margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:600px;overflow-y:scroll;overflow-x:auto;}ul.log {border: 1px solid #617775;background: #f0f6e4;width:300px;height:170px;overflow: hidden;}ul.log.small {height:45px;}ul.log li {color: #666666;list-style: none;padding-left: 10px;}ul.log li.dark {background-color: #E3E3E3;}/* ruler */div.ruler {height:20px; width:220px; background-color:#f0f6e4;border: 1px solid #333; margin-bottom: 5px; cursor: pointer}div.ruler div.cursor {height:20px; width:30px; background-color:#3C6E31; color:white; text-align: right; padding-right: 5px; cursor: pointer}

0 0