Skip to content

Commit

Permalink
add demo: metro style
Browse files Browse the repository at this point in the history
  • Loading branch information
ztree committed Mar 29, 2015
1 parent feb0485 commit 7a2ee0b
Show file tree
Hide file tree
Showing 12 changed files with 321 additions and 5 deletions.
Binary file added css/metroStyle/img/line_conn.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css/metroStyle/img/loading.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css/metroStyle/img/metro.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css/metroStyle/img/metro.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
96 changes: 96 additions & 0 deletions css/metroStyle/metroStyle.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/*-------------------------------------
zTree Style
version: 3.4
author: Hunter.z
email: [email protected]
website: http://code.google.com/p/jquerytree/
-------------------------------------*/

.ztree * {padding:0; margin:0; font-size:12px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
.ztree {margin:0; padding:5px; color:#333}
.ztree li{padding:0; margin:0; list-style:none; line-height:17px; text-align:left; white-space:nowrap; outline:0}
.ztree li ul{ margin:0; padding:0 0 0 18px}
.ztree li ul.line{ background:url(./img/line_conn.png) 0 0 repeat-y;}

.ztree li a {padding-right:3px; margin:0; cursor:pointer; height:21px; color:#333; background-color: transparent; text-decoration:none; vertical-align:top; display: inline-block}
.ztree li a:hover {text-decoration:underline}
.ztree li a.curSelectedNode {padding-top:0px; background-color:#e5e5e5; color:black; height:21px; opacity:0.8;}
.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#e5e5e5; color:black; height:21px; border:1px #666 solid; opacity:0.8;}
.ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#aaa; color:white; height:21px; border:1px #666 solid;
opacity:0.8; filter:alpha(opacity=80)}
.ztree li a.tmpTargetNode_prev {}
.ztree li a.tmpTargetNode_next {}
.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0;
font-size:12px; border:1px #585956 solid; *border:0px}
.ztree li span {line-height:21px; margin-right:2px}
.ztree li span.button {line-height:0; margin:0; padding: 0; width:21px; height:21px; display: inline-block; vertical-align:middle;
border:0 none; cursor: pointer;outline:none;
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
background-image:url("./img/metro.png"); *background-image:url("./img/metro.gif")}

.ztree li span.button.chk {width:13px; height:13px; margin:0 2px; cursor: auto}
.ztree li span.button.chk.checkbox_false_full {background-position: -5px -5px;}
.ztree li span.button.chk.checkbox_false_full_focus {background-position: -5px -26px;}
.ztree li span.button.chk.checkbox_false_part {background-position: -5px -48px;}
.ztree li span.button.chk.checkbox_false_part_focus {background-position: -5px -68px;}
.ztree li span.button.chk.checkbox_false_disable {background-position: -5px -89px;}
.ztree li span.button.chk.checkbox_true_full {background-position: -26px -5px;}
.ztree li span.button.chk.checkbox_true_full_focus {background-position: -26px -26px;}
.ztree li span.button.chk.checkbox_true_part {background-position: -26px -48px;}
.ztree li span.button.chk.checkbox_true_part_focus {background-position: -26px -68px;}
.ztree li span.button.chk.checkbox_true_disable {background-position: -26px -89px;}
.ztree li span.button.chk.radio_false_full {background-position: -47px -5px;}
.ztree li span.button.chk.radio_false_full_focus {background-position: -47px -26px;}
.ztree li span.button.chk.radio_false_part {background-position: -47px -47px;}
.ztree li span.button.chk.radio_false_part_focus {background-position: -47px -68px;}
.ztree li span.button.chk.radio_false_disable {background-position: -47px -89px;}
.ztree li span.button.chk.radio_true_full {background-position: -68px -5px;}
.ztree li span.button.chk.radio_true_full_focus {background-position: -68px -26px;}
.ztree li span.button.chk.radio_true_part {background-position: -68px -47px;}
.ztree li span.button.chk.radio_true_part_focus {background-position: -68px -68px;}
.ztree li span.button.chk.radio_true_disable {background-position: -68px -89px;}

.ztree li span.button.switch {width:21px; height:21px}
.ztree li span.button.root_open{background-position:-126px -63px}
.ztree li span.button.root_close{background-position:-105px -63px}
.ztree li span.button.roots_open{background-position: -105px 0;}
.ztree li span.button.roots_close{background-position: -126px 0;}
.ztree li span.button.center_open{background-position: -105px -21px;}
.ztree li span.button.center_close{background-position: -126px -21px;}
.ztree li span.button.bottom_open{background-position: -105px -42px;}
.ztree li span.button.bottom_close{background-position: -126px -42px;}
.ztree li span.button.noline_open{background-position: -126px -84px;}
.ztree li span.button.noline_close{background-position: -105px -84px;}
.ztree li span.button.root_docu{ background:none;}
.ztree li span.button.roots_docu{background-position: -84px 0;}
.ztree li span.button.center_docu{background-position: -84px -21px;}
.ztree li span.button.bottom_docu{background-position: -84px -42px;}
.ztree li span.button.noline_docu{ background:none;}

.ztree li span.button.ico_open{margin-right:2px; background-position: -147px -21px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_close{margin-right:2px; margin-right:2px; background-position: -147px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_docu{margin-right:2px; background-position: -147px -42px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.edit {margin-left:2px; margin-right: -1px; background-position: -189px -21px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.edit:hover {
background-position: -168px -21px;
}
.ztree li span.button.remove {margin-left:2px; margin-right: -1px; background-position: -189px -42px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.remove:hover {
background-position: -168px -42px;
}
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position: -189px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.add:hover {
background-position: -168px 0;
}
.ztree li span.button.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)}

span.tmpzTreeMove_arrow {width:16px; height:21px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute;
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
background-position:-168px -84px; background-image:url("./img/metro.png"); *background-image:url("./img/metro.gif")}

ul.ztreeul.ztreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)}
.ztreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}
2 changes: 1 addition & 1 deletion demo/cn/core/url.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
};

var zNodes =[
{ id:1, pId:0, name:"zTree Home", url:"http://www.baby666.cn", target:"_blank"},
{ id:1, pId:0, name:"zTree Home", url:"http://www.ztree.me/", target:"_blank"},
{ id:2, pId:0, name:"zTree in Google", url:"http://code.google.com/p/jquerytree/", target:"_blank"},
{ id:3, pId:0, name:"zTree in Iteye", url:"http://ztreeapi.iteye.com/", target:"_blank"},
{ id:4, pId:0, name:"Nothing...", url:"", target:"_blank", click:"alert('我是不会跳转的...');"}
Expand Down
3 changes: 2 additions & 1 deletion demo/cn/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@
{id:504, pId:5, name:"添加 自定义控件", file:"super/diydom"},
{id:505, pId:5, name:"checkbox / radio 共存", file:"super/checkbox_radio"},
{id:506, pId:5, name:"左侧菜单", file:"super/left_menu"},
{id:513, pId:5, name:"OutLook 样式的左侧菜单", file:"super/left_menuForOutLook"},
{id:513, pId:5, name:"OutLook 风格", file:"super/left_menuForOutLook"},
{id:514, pId:5, name:"Metro 风格", file:"super/metro"},
{id:507, pId:5, name:"下拉菜单", file:"super/select_menu"},
{id:509, pId:5, name:"带 checkbox 的多选下拉菜单", file:"super/select_menu_checkbox"},
{id:510, pId:5, name:"带 radio 的单选下拉菜单", file:"super/select_menu_radio"},
Expand Down
109 changes: 109 additions & 0 deletions demo/cn/super/metro.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!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-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.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>
2 changes: 1 addition & 1 deletion demo/en/core/url.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
};

var zNodes =[
{ id:1, pId:0, name:"zTree Home", url:"http://www.baby666.cn", target:"_blank"},
{ id:1, pId:0, name:"zTree Home", url:"http://www.ztree.me/", target:"_blank"},
{ id:2, pId:0, name:"zTree in Google", url:"http://code.google.com/p/jquerytree/", target:"_blank"},
{ id:3, pId:0, name:"zTree in Iteye", url:"http://ztreeapi.iteye.com/", target:"_blank"},
{ id:4, pId:0, name:"Nothing...", url:"", target:"_blank", click:"alert('I can not jump...');"}
Expand Down
3 changes: 2 additions & 1 deletion demo/en/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@
{id:504, pId:5, name:"Adding Custom DOM", file:"super/diydom"},
{id:505, pId:5, name:"Checkbox / Radio Coexistence", file:"super/checkbox_radio"},
{id:506, pId:5, name:"Left Menu", file:"super/left_menu"},
{id:513, pId:5, name:"Left Menu Like OutLook Style", file:"super/left_menuForOutLook"},
{id:513, pId:5, name:"OutLook Style", file:"super/left_menuForOutLook"},
{id:514, pId:5, name:"Metro Style", file:"super/metro"},
{id:507, pId:5, name:"Drop-down Menu", file:"super/select_menu"},
{id:509, pId:5, name:"Drop-down Menu with checkbox", file:"super/select_menu_checkbox"},
{id:510, pId:5, name:"Drop-down Menu with radio", file:"super/select_menu_radio"},
Expand Down
109 changes: 109 additions & 0 deletions demo/en/super/metro.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!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-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.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:"pNode 1", open:true},
{ id:11, pId:1, name:"pNode 11"},
{ id:111, pId:11, name:"sNode 111"},
{ id:112, pId:11, name:"sNode 112"},
{ id:113, pId:11, name:"sNode 113"},
{ id:114, pId:11, name:"sNode 114"},
{ id:12, pId:1, name:"pNode 12"},
{ id:121, pId:12, name:"sNode 121"},
{ id:122, pId:12, name:"sNode 122"},
{ id:123, pId:12, name:"sNode 123"},
{ id:124, pId:12, name:"sNode 124"},
{ id:13, pId:1, name:"pNode 13", isParent:true},
{ id:2, pId:0, name:"pNode 2"},
{ id:21, pId:2, name:"pNode 21", open:true},
{ id:211, pId:21, name:"sNode 211"},
{ id:212, pId:21, name:"sNode 212"},
{ id:213, pId:21, name:"sNode 213"},
{ id:214, pId:21, name:"sNode 214"},
{ id:22, pId:2, name:"pNode 22"},
{ id:221, pId:22, name:"sNode 221"},
{ id:222, pId:22, name:"sNode 222"},
{ id:223, pId:22, name:"sNode 223"},
{ id:224, pId:22, name:"sNode 224"},
{ id:23, pId:2, name:"pNode 23"},
{ id:231, pId:23, name:"sNode 231"},
{ id:232, pId:23, name:"sNode 232"},
{ id:233, pId:23, name:"sNode 233"},
{ id:234, pId:23, name:"sNode 234"},
{ id:3, pId:0, name:"pNode 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 Style</h1>
<h6>[ File Path: 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, Explanation of Style Files</h2>
<ul class="list">
<li class="highlight_red">Please use style and image files of 'css/metroStyle'</li>
<li>Thanked rqx110 for this Demo. For reference only.</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
2 changes: 1 addition & 1 deletion demo/en/super/select_menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ <h6>[ File Path: super/select_menu.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul class="list">
<li class="title">&nbsp;&nbsp;<span class="highlight_red">Press Ctrl or Cmd key to select multiple cities</span></li>
<li class="title">&nbsp;&nbsp;<span class="highlight_red">Press Ctrl-key or Cmd-key to select multiple cities</span></li>
<li class="title">&nbsp;&nbsp;city: <input id="citySel" type="text" readonly value="" style="width:120px;"/>
&nbsp;<a id="menuBtn" href="#" onclick="showMenu(); return false;">select</a></li>
</ul>
Expand Down

0 comments on commit 7a2ee0b

Please sign in to comment.