代码：win10风格的资源树

最新推荐文章于 2020-09-15 12:48:35 发布
最新推荐文章于 2020-09-15 12:48:35 发布
阅读量488 收藏
点赞数
分类专栏： CSS 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caicai89tu/article/details/51963919
版权
前端 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏

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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
K-D树、K-D-B树、B-K-D树
CSDN文章已停止维护，后续文章会在 https://blog.hufeifei.cn 持续更新
03-07 3850
K-D树在维基百科上定义是将K维空间中的点进行分割的数据结构，D是dimensional(维度)的缩写，K-D树是BSP(Binary Space Partitioning)的一种。 维基百科的解释很正式(看的迷迷糊糊)。简单的说，K-D树就是二分查找树在K维空间的泛化(更迷糊了????)。 1、K维空间的二分查找树 之前的一篇文章中有讲过二分查找树(BST)这样基础的数据结构，它是基于二分查找的思想实...
Win10风格 MetroForWinForm
09-30
代码介绍 MetroForWinForm(win8风格模版) using System; using System.Drawing; using System.Globalization; using System.Windows.Forms; using MetroFramework.Forms; namespace MetroFramework.Demo { public partial class MainForm : MetroForm { public MainForm() { InitializeComponent(); metroStyleManager.Theme = MetroThemeStyle.Default; metroStyleManager.Style = MetroColorStyle.Teal; } private void metroTileSwitch_Click(object sender, EventArgs e) { var m = new Random(); int next = m.Next(0, 13); metroStyleManager.Style = (MetroColorStyle)next; } private void metroTile1_Click(object sender, EventArgs e) { metroStyleManager.Theme = metroStyleManager.Theme == MetroThemeStyle.Light ? MetroThemeStyle.Dark : MetroThemeStyle.Light; } private void metroButton1_Click(object sender, EventArgs e) { MetroTaskWindow.ShowTaskWindow(this, "SubControl in TaskWindow", new TaskWindowControl(), 10); } private void metroButton2_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "Do you like this metro message box?", "Metro Title", MessageBoxButtons.YesNoCancel, MessageBoxIcon.Asterisk); } private void metroButton5_Click(object sender, EventArgs e) { metroContextMenu1.Show(metroButton5, new Point(0, metroButton5.Height)); } private void metroButton6_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample MetroMessagebox `OK` only button", "MetroMessagebox", MessageBoxButtons.OK, MessageBoxIcon.Information); } private void metroButton10_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample MetroMessagebox `OK` and `Cancel` button", "MetroMessagebox", MessageBoxButtons.OKCancel, MessageBoxIcon.Information); } private void metroButton7_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample MetroMessagebox `Yes` and `No` button", "MetroMessagebox", MessageBoxButtons.YesNo, MessageBoxIcon.Question); } private void metroButton8_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample MetroMessagebox `Yes`, `No` and `Cancel` button", "MetroMessagebox", MessageBoxButtons.YesNoCancel, MessageBoxIcon.Question); } private void metroButton11_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample MetroMessagebox `Retry` and `Cancel` button. With warning style.", "MetroMessagebox", MessageBoxButtons.RetryCancel, MessageBoxIcon.Warning); } private void metroButton9_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample MetroMessagebox `Abort`, `Retry` and `Ignore` button. With Error style.", "MetroMessagebox", MessageBoxButtons.AbortRetryIgnore, MessageBoxIcon.Error); } private void metroButton12_Click(object sender, EventArgs e) { MetroMessageBox.Show(this, "This is a sample `default` MetroMessagebox ", "MetroMessagebox"); } private void metroButton4_Click(object sender, EventArgs e) { var testform = new TestForm1(); testform.ShowDialog(); } private void metroButton4_Click_1(object sender, EventArgs e) { metroTextBox2.Focus(); } } }
Win10风格Html模板
04-08
Win10-UI是一款win10风格的后台UI框架。它使用了丰富的win10桌面元素，包括桌面图标、窗口化子页面管理、开始菜单、动态小磁贴等组件，兼容主流现代浏览器及移动端的屏幕尺寸，适合快速开发后台管理系统的前端界面
45zTree - OutLook 样式的左侧菜单
阿甘兄
04-26 1232
效果图： 代码： <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - left_menu for Outlook</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> &l...
Win10ThemeRevealer:重温Windows 10中的隐藏主题！
05-19
Win10ThemeReviver 重温Windows 10中的隐藏主题！ 该程序的灵感来自本文： : Win10 Theme Reviver允许您以最少的精力和最少的系统修改获得彩色标题栏。 您也可以尝试使用隐藏的Windows Lite主题，该主题实际上是使用“轻松访问”主题所使用的视觉样式。 它是在Windows 10 Enterprise x64 Build 10240（日语）上开发和测试的，但是它也应该在最新的Win10版本上也可以使用。
winadmin:Win10风格前端模板（已停更）
04-23
"winadmin:Win10风格前端模板（已停更）"是一个基于JavaScript技术构建的，模仿Windows 10用户界面风格的前端项目。这个模板旨在为开发者提供一个快速搭建具有现代Windows UI元素的Web应用框架。尽管项目已经停止...
易语言win10风格菜单源码
06-02
总之，易语言win10风格菜单源码是一个很好的学习资源，它展示了如何用易语言来构建符合现代操作系统审美的应用程序界面。对于想要提高易语言编程技能，特别是对界面设计感兴趣的开发者来说，这是一个值得深入研究的...
Win8风格Metro界面平板响应式导航特效代码.zip
07-11
这个代码资源就是针对这种需求，提供了一种实现Win8 Metro风格平板响应式导航的解决方案。 该代码的核心是利用JavaScript（JS）和CSS来创建动态的、可滚动的导航菜单。在描述中提到，此特效支持横向滚动，这意味着...
本科期末作业小项目代码 模仿WIN10风格计算器、使用Xamarin的简易Android聊天软件.zip
最新发布
03-11
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++...
win8风格导航菜单特效代码
03-20
【win8风格导航菜单特效代码】是针对网页设计和开发的一款特效组件，它借鉴了微软Windows 8操作系统中的“Metro”界面设计，旨在为用户提供现代、简洁且触控友好的导航体验。这款导航菜单利用jQuery库来实现动态效果...
win10风格的前端静态页面
07-04
win10风格的前端静态页面，不要积分免费下载，但是我始终没搞明白传上去之后是否需要积分下载
【转】Ryu自带网络拓扑可视化app：gui_topology.py使用简介
dududududou的博客
04-18 3731
转载地址：https://blog.csdn.net/qq_41854763/article/details/84639001 在使用SDN的过程中，经常会遇到网络拓扑可视化的需求，而目前主流的SDN控制器也都提供了相应的功能。这篇博文将简单介绍一下当你选用Ryu作为控制器时，如何实现网络...
iframe实现Outlook的导航菜单
webgl2005的专栏
06-29 1657
 //菜单项对象，包括菜单的title和菜单内页面的urlfunction MenuItem(title_,url_,iconurl_) { this.title = title_; this.url = url_; this.iconUrl = iconurl_; this.iframeId = ""; this.buttonId = ""; this.frameLoaded = false
win10 码农 深色主题_Microsoft在最新的Windows 10更新中向文件资源管理器添加了深色主题...
culul01313的博客
09-15 531
win10 码农 深色主题For years, people have been asking for darker themes for Windows, but even when they finally added a dark theme in Windows 10, it still didn’t work for File Explorer. In an upcoming updat...
代码：一种类似outlook资源树的CSS样式
Bruce Tu的专栏
07-18 936
.ztree{ padding: 10px; margin-top: 10px; } .ztree *{ font-size: 14px; display: block; } //bruce .ztree li ul{ margin:20px; padding:0 } .ztree l
OutLook样式的导航菜单
weixin_30663471的博客
05-08 475
一.引用控件:ComponentArt.Web.UI.NavBar 二.实例(menu.cs) public class Menu?{??protected ComponentArt.Web.UI.NavBar NavBar1;????private bool IsFirst; ??public Menu()??{???//???// TODO: 在此处添加构造函数逻辑???//??} ...
K-D-B树
weixin_43222122的博客
11-19 1921
【K-D-B树结构方法】： 1.划分界限不需要经过数据点 2.不需要循环的通过关键字 3.所有数据都存在街子节点
Win 10 源码有多少行？用了什么编程语言？
热门推荐
程序员的那些事
04-15 1万+
（给程序员的那些事加星标）原创整理：程序员的那些事（id：iProgrammer）2013 年 10 月，我们在微博（@程序员的那些事）发过一张信息图《知名软件系统代码...
Win32编程：窗口类风格详解
"这篇教程是关于Win32编程中的窗口类风格，主要涉及窗口类的各种风格标志，如CS_GLOBALCLASS、CS_BYTEALIGNCLIENT、CS_HREDRAW、CS_VREDRAW等，以及它们在窗口创建和绘图过程中的作用。同时，提到了Windows应用程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值