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 风格的左侧菜单相关推荐

html开始菜单,metro风格的html模板 Windows 8找不到开始菜单怎么办？
腾讯数码讯(赵阳)8月26日消息,在Windows 8逐步临近的这些日子里,越来越多的网友也通过各种方式下载并提前对其进行了全方位体验.而对于广大网友来说,在Windows 8中由Metro界面取代了 ...
使用 C++ 创建你的第一个 Metro 风格应用
WindowsMetro 风格应用专门针对 Windows 8 Consumer Preview 所提供的用户体验量身定制.每个出色的 Metro 风格应用都遵循特定的设计准则,这使得此类应用与传统的 ...
使用Windows8开发Metro风格应用四
我们紧接着上篇,开始我们的Metro风格应用开发. -----------------------------------我是华丽的分割线------------------------------- ...
WPF 左侧菜单样式
之前做了一个菜单样式,这样的: 链接:WPF 修改(优化)Menu菜单的样式如今又来一个左侧菜单样式,其实只是修改了一下模板,如下图: 还是老样子,代码全部都在MainWindow.xaml中: & ...
metro 风格 php源码,Win8 Metro UI风格Web素材样式资源合集
最近微软已经正式发布了Windows8操作系统,Window操作系统的风格已经完全改变成了瓦片状的Metro UI. 对于微软来说这是一个巨大的改变,而且所有微软的平台包括,桌面,平板,移动及其网站都 ...
react 树形菜单_关于React 使用antd组件递归实现左侧菜单导航树（MenusTree）的示例...
一.菜单组件Demo 这里本人采用的是蚂蚁金服(antd)组件库里的{Menu}组件写的一个左侧菜单树的小Demo(整套开发环境是React+Redux+webpack) import React f ...
dedecms后台左侧菜单500错误怎么处理
前面dedecms后台左侧菜单空白不显示怎么处理,但有些网友还是反应说不能显示,提示500错误,这可能是iis配置或apache设置不正确有关,一般是正常的.但是,既然问题出现了,我们还是要去解决.下 ...
使用Windows8开发Metro风格应用三
我们紧接着上篇,开始我们的Metro风格应用开发. -----------------------------------我是华丽的分割线------------------------------- ...
超棒的微软Metro风格Logo设计
日期:2013-2-12 来源:GBin1.com Metro风格是今年的一大设计趋势之一,在今天这篇文章中我们收集了一套超棒的Metro风格Logo设计,如果你在开发或者设计一套metro风格的网 ...
一个web左侧菜单例子
一左侧菜单简介并更换图标图图: 码码: <link rel="stylesheet" type="text/css" href="js/tr ...

46zTree - Metro 风格的左侧菜单

46zTree - Metro 风格的左侧菜单相关推荐

最新文章

热门文章