提交 e90b03bc 编写于 作者: Z ztree

add demo: 'awesome style'. (thanks to mikkelking )

上级 acd61848
......@@ -8,7 +8,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function(p){var G,H,I,J,K,L,r={},u={},v={},M={treeId:"",treeObj:null,view:{addDiyDom:null,autoCancelSelected:!0,dblClickExpand:!0,expandSpeed:"fast",fontCss:{},nameIsHTML:!1,selectedMulti:!0,showIcon:!0,showLine:!0,showTitle:!0,txtSelectedEnable:!1},data:{key:{children:"children",name:"name",title:"",url:"url"},simpleData:{enable:!1,idKey:"id",pIdKey:"pId",rootPId:null},keep:{parent:!1,leaf:!1}},async:{enable:!1,contentType:"application/x-www-form-urlencoded",type:"post",dataType:"text",url:"",autoParam:[],
otherParam:[],dataFilter:null},callback:{beforeAsync:null,beforeClick:null,beforeDblClick:null,beforeRightClick:null,beforeMouseDown:null,beforeMouseUp:null,beforeExpand:null,beforeCollapse:null,beforeRemove:null,onAsyncError:null,onAsyncSuccess:null,onNodeCreated:null,onClick:null,onDblClick:null,onRightClick:null,onMouseDown:null,onMouseUp:null,onExpand:null,onCollapse:null,onRemove:null}},w=[function(b){var a=b.treeObj,c=e.event;a.bind(c.NODECREATED,function(a,c,g){j.apply(b.callback.onNodeCreated,
......
/*-------------------------------------
zTree Style using fontawesome instead of images
version: 1.1
author: Mike King
email: mikkelking @ hotmail . com
website: http://code.google.com/p/jquerytree/
-------------------------------------*/
/* Definitions ----------------------*/
/* End of Definitions ---------------*/
/* Imports -------------------------*/
/* End of Imports ------------------*/
.ztree * {
padding: 0;
margin: 0;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif;
background-color: #af0000;
}
.ztree {
margin: 0;
padding: 5px;
color: #ffffff;
background-color: #af0000;
}
.ztree li {
padding: 0;
margin: 0;
list-style: none;
line-height: 17px;
text-align: left;
white-space: nowrap;
outline: 0;
}
.ztree li ul {
margin: 0px;
padding: 0 0 0 18px;
}
.ztree li a {
padding-right: 3px;
margin: 0;
cursor: pointer;
height: 17px;
color: #ffffff;
background-color: transparent;
text-decoration: none;
vertical-align: top;
display: inline-block;
}
.ztree li a input.rename {
height: 14px;
width: 80px;
padding: 0;
margin: 0;
color: #af0000;
background-color: #ffffff;
font-size: 12px;
border: 1px #585956 solid;
*border: 0px;
}
.ztree li a:hover {
text-decoration: underline;
}
.ztree li a.curSelectedNode {
padding-top: 0px;
background-color: #af4040;
color: #ffff00;
height: 17px;
opacity: 0.8;
}
.ztree li a.curSelectedNode_Edit {
padding-top: 0px;
background-color: transparent;
color: #ffff00;
height: 17px;
border: 1px #666 solid;
opacity: 0.8;
}
.ztree li a.tmpTargetNode_inner {
padding-top: 0px;
background-color: #aaa;
color: #ffff00;
height: 17px;
border: 1px #666 solid;
opacity: 0.8;
filter: alpha(opacity=80);
}
.ztree li span {
line-height: 17px;
margin-right: 2px;
background-color: transparent;
}
.ztree li span.button {
line-height: 0;
margin: 0;
padding: 0;
width: 15px;
height: 17px;
display: inline-block;
vertical-align: top;
border: 0px solid;
cursor: pointer;
outline: none;
background-color: transparent;
background-repeat: no-repeat;
background-attachment: scroll;
}
.ztree li span.button::before {
color: #ffffff;
font-family: FontAwesome;
padding-top: 10px;
}
.ztree li span.button.chk {
margin: 0px;
cursor: auto;
width: 12px;
display: inline-block;
padding-top: 10px;
padding-left: 2px;
}
.ztree li span.button.chk.checkbox_false_full::before {
content: "\f096";
}
.ztree li span.button.chk.checkbox_false_full_focus::before {
content: "\f096";
color: #ffff00;
}
.ztree li span.button.chk.checkbox_false_part::before {
content: "\f096";
color: #aaaaaa;
}
.ztree li span.button.chk.checkbox_false_part_focus::before {
content: "\f096";
color: #cad96c;
}
.ztree li span.button.chk.checkbox_false_disable::before {
content: "\f096";
color: #808080;
}
.ztree li span.button.chk.checkbox_true_full::before {
content: "\f046";
}
.ztree li span.button.chk.checkbox_true_full_focus::before {
content: "\f046";
}
.ztree li span.button.chk.checkbox_true_part::before {
content: "\f14a";
}
.ztree li span.button.chk.checkbox_true_part_focus::before {
content: "\f14a";
color: #ffff00;
}
.ztree li span.button.chk.checkbox_true_full_focus::before {
content: "\f046";
color: #ffff00;
}
.ztree li span.button.chk.checkbox_true_part::before {
content: "\f046";
color: #aaaaaa;
}
.ztree li span.button.chk.checkbox_true_part_focus::before {
content: "\f046";
color: #cad96c;
}
.ztree li span.button.chk.checkbox_true_disable::before {
content: "\f046";
color: #808080;
}
.ztree li span.button.chk.radio_false_full::before {
content: "\f10c";
}
.ztree li span.button.chk.radio_false_full_focus::before {
content: "\f10c";
color: #ffff00;
}
.ztree li span.button.chk.radio_false_part::before {
content: "\f10c";
color: #aaaaaa;
}
.ztree li span.button.chk.radio_false_part_focus::before {
content: "\f10c";
color: #ffff00;
}
.ztree li span.button.chk.radio_false_disable::before {
content: "\f1db";
color: #808080;
}
.ztree li span.button.chk.radio_true_full::before {
content: "\f192";
}
.ztree li span.button.chk.radio_true_full_focus::before {
content: "\f192";
color: #ffff00;
}
.ztree li span.button.chk.radio_true_part::before {
content: "\f192";
color: #aaaaaa;
}
.ztree li span.button.chk.radio_true_part_focus::before {
content: "\f192";
color: #aaaaaa;
}
.ztree li span.button.chk.radio_true_disable::before {
content: "\f1db";
color: #808080;
}
.ztree li span.button.switch {
width: 15px;
height: 17px;
}
.ztree li span.button.root_open::before {
content: "\f078";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.root_close::before {
content: "\f115";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.roots_open::before {
content: "\f078";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.roots_close::before {
content: "\f054";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.center_open::before {
content: "\f078";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.center_close::before {
content: "\f054";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.bottom_open::before {
content: "\f078";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.bottom_close::before {
content: "\f054";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.root_docu {
background: none;
}
.ztree li span.button.roots_docu::before {
content: "\f022";
padding-left: 2px;
display: inline-block;
color: #ffffff;
}
.ztree li span.button.center_docu::before {
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #ffffff;
}
.ztree li span.button.bottom_docu::before {
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #ffffff;
}
.ztree li span.button.noline_docu {
background: none;
}
.ztree li span.button.ico_open::before {
content: "\f115";
font-family: FontAwesome;
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #ffffff;
}
.ztree li span.button.ico_close::before {
content: "\f114";
font-family: FontAwesome;
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #ffffff;
}
.ztree li span.button.ico_docu::before {
content: "\f022";
font-family: FontAwesome;
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #ffffff;
}
.ztree li span.button.edit {
margin-left: 4px;
margin-right: -1px;
vertical-align: top;
*vertical-align: middle;
padding-top: 10px;
}
.ztree li span.button.edit::before {
content: "\f044";
font-family: FontAwesome;
}
.ztree li span.button.remove {
margin-left: 4px;
margin-right: -1px;
vertical-align: top;
*vertical-align: middle;
padding-top: 10px;
}
.ztree li span.button.remove::before {
content: "\f1f8";
font-family: FontAwesome;
}
.ztree li span.button.add {
margin-left: 4px;
margin-right: -1px;
vertical-align: top;
*vertical-align: middle;
padding-top: 10px;
}
.ztree li span.button.add::before {
content: "\f067";
font-family: FontAwesome;
}
.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: 17px;
display: inline-block;
padding: 0;
margin: 2px 0 0 1px;
border: 0 none;
position: absolute;
background-color: transparent;
background-attachment: scroll;
}
span.tmpzTreeMove_arrow::before {
content: "\f04b";
font-family: FontAwesome;
color: #ffff00;
}
ul.ztree.zTreeDragUL {
margin: 0;
padding: 0;
position: absolute;
width: auto;
height: auto;
overflow: hidden;
background-color: #cfcfcf;
border: 1px #ffff00 dotted;
opacity: 0.8;
filter: alpha(opacity=80);
}
.ztreeMask {
z-index: 10000;
background-color: #cfcfcf;
opacity: 0.0;
filter: alpha(opacity=0);
position: absolute;
}
/*-------------------------------------
zTree Style using fontawesome instead of images
version: 1.1
author: Mike King
email: mikkelking @ hotmail . com
website: http://code.google.com/p/jquerytree/
-------------------------------------*/
/* Definitions ----------------------*/
@font-size: 12px;
// Regular icon and text color is white, which suits any medium -> dark background
@color-normal: white;
// Background color
@color-bg: #af0000;
// Highlight color
@color-highlight: yellow;
// Partially selected (checkboxes, radio buttons)
@color-partial: #aaaaaa;
// Partially selected and focused (checkboxes, radio buttons)
@color-partfocus: #cad96c;
// Disabled altogether
@color-disabled: #808080;
// Editing color
@color-edit: yellow;
@w: 15px;
@h: 17px;
@pad-left: 2px;
@pad-top: 10px;
/* End of Definitions ---------------*/
/* Imports -------------------------*/
@import "fa.less";
/* End of Imports ------------------*/
.ztree * {padding:0; margin:0; font-size:@font-size; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif; background-color: @color-bg;}
.ztree {
margin:0; padding:5px; color:@color-normal; background-color: @color-bg;
li {
padding:0; margin:0; list-style:none; line-height:17px; text-align:left; white-space:nowrap; outline:0;
ul {
margin: 0px; padding:0 0 0 18px;
}
ul.line { }
a {padding-right:3px; margin:0; cursor:pointer; height:@h; color:@color-normal; background-color: transparent;
text-decoration:none; vertical-align:top; display: inline-block;
input.rename {height:14px; width:80px; padding:0; margin:0;
color: @color-bg; background-color: @color-normal;
font-size:@font-size; border:1px #585956 solid; *border:0px}
}
a:hover {text-decoration:underline}
a.curSelectedNode {padding-top:0px; background-color:#af4040; color:@color-highlight; height:@h; opacity:0.8;}
a.curSelectedNode_Edit {padding-top:0px; background-color:transparent; color:@color-highlight; height:@h; border:1px #666 solid; opacity:0.8;}
a.tmpTargetNode_inner {padding-top:0px; background-color:#aaa; color:@color-highlight; height:@h; border:1px #666 solid;
opacity:0.8; filter:alpha(opacity=80)}
a.tmpTargetNode_prev {}
a.tmpTargetNode_next {}
span {line-height:@h; margin-right:2px; background-color:transparent;}
span.button {line-height:0; margin:0; padding: 0; width:@w; height:@h; display: inline-block; vertical-align:top;
border:0px solid; cursor: pointer;outline:none;
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
&::before{color: @color-normal; font-family: FontAwesome; padding-top:@pad-top;}
&.chk { margin:0px; cursor: auto; width: 12px;
display: inline-block;padding-top:@pad-top;padding-left:@pad-left;
&.checkbox_false_full::before {content: @fa-square-o;}
&.checkbox_false_full_focus::before {content: @fa-square-o; color:@color-highlight;}
&.checkbox_false_part::before {content: @fa-square-o;color: @color-partial;}
&.checkbox_false_part_focus::before {content: @fa-square-o; color:@color-partfocus;}
&.checkbox_false_disable::before {content: @fa-square-o; color:@color-disabled;}
&.checkbox_true_full::before {content: @fa-check-square-o;}
&.checkbox_true_full_focus::before {content: @fa-check-square-o;}
&.checkbox_true_part::before {content: @fa-check-square;}
&.checkbox_true_part_focus::before {content: @fa-check-square; color: @color-highlight}
&.checkbox_true_full_focus::before {content: @fa-check-square-o; color: @color-highlight}
&.checkbox_true_part::before {content: @fa-check-square-o;color: @color-partial}
&.checkbox_true_part_focus::before {content: @fa-check-square-o;color: @color-partfocus;}
&.checkbox_true_disable::before {content: @fa-check-square-o;color: @color-disabled}
&.radio_false_full::before {content: @fa-circle-o;}
&.radio_false_full_focus::before {content: @fa-circle-o;color: @color-highlight}
&.radio_false_part::before {content: @fa-circle-o;color: @color-partial}
&.radio_false_part_focus::before {content: @fa-circle-o;color: @color-highlight}
&.radio_false_disable::before {content: @fa-circle-thin;color: @color-disabled}
&.radio_true_full::before {content: @fa-dot-circle-o;}
&.radio_true_full_focus::before {content: @fa-dot-circle-o;color: @color-highlight}
&.radio_true_part::before {content: @fa-dot-circle-o;color: @color-partial}
&.radio_true_part_focus::before {content: @fa-dot-circle-o;color: @color-partial;}
&.radio_true_disable::before {content: @fa-circle-thin;color: @color-disabled}
}
&.switch {width:@w; height:@h}
&.root_open::before{content: @fa-chevron-down;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.root_close::before{content: @fa-folder-open-o;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.roots_open::before{content: @fa-chevron-down;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.roots_close::before{content: @fa-chevron-right;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.center_open::before{content: @fa-chevron-down;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.center_close::before{content: @fa-chevron-right;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.bottom_open::before{content: @fa-chevron-down;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.bottom_close::before{content: @fa-chevron-right;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.noline_open{}
&.noline_close{}
&.root_docu{ background:none;}
&.roots_docu::before{content: @fa-list-alt;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.center_docu::before{padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.bottom_docu::before{padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.noline_docu{ background:none;}
&.ico_open::before {content: @fa-folder-open-o;font-family: FontAwesome;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.ico_close::before {content: @fa-folder-o;font-family: FontAwesome;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.ico_docu::before{content: @fa-list-alt;font-family: FontAwesome;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.edit {margin-left:4px; margin-right: -1px; vertical-align:top; *vertical-align:middle;padding-top:@pad-top;}
&.edit::before{content: @fa-pencil-square-o;font-family: FontAwesome;}
&.remove {margin-left:4px; margin-right: -1px; vertical-align:top; *vertical-align:middle;padding-top:@pad-top;}
&.remove::before{content: @fa-trash;font-family: FontAwesome;}
&.add {margin-left:4px; margin-right: -1px; vertical-align:top; *vertical-align:middle;padding-top:@pad-top;}
&.add::before{content: @fa-plus;font-family: FontAwesome;}
&.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)}
// this is the arrow that moves
span.tmpzTreeMove_arrow{width:16px; height:@h; display: inline-block;
padding:0; margin:2px 0 0 1px; border:0 none; position:absolute;
background-color:transparent; background-attachment: scroll;
}
span.tmpzTreeMove_arrow::before{content: @fa-play;font-family: FontAwesome;color: @color-highlight;
}
// outline
ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden;
background-color:#cfcfcf; border:1px @color-highlight dotted; opacity:0.8; filter:alpha(opacity=80)}
.ztreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}
@fa-glass: "\f000";
@fa-music: "\f001";
@fa-search: "\f002";
@fa-envelope-o: "\f003";
@fa-heart: "\f004";
@fa-star: "\f005";
@fa-star-o: "\f006";
@fa-user: "\f007";
@fa-film: "\f008";
@fa-th-large: "\f009";
@fa-th: "\f00a";
@fa-th-list: "\f00b";
@fa-check: "\f00c";
@fa-times: "\f00d";
@fa-search-plus: "\f00e";
@fa-search-minus: "\f010";
@fa-power-off: "\f011";
@fa-signal: "\f012";
@fa-cog: "\f013";
@fa-trash-o: "\f014";
@fa-home: "\f015";
@fa-file-o: "\f016";
@fa-clock-o: "\f017";
@fa-road: "\f018";
@fa-download: "\f019";
@fa-arrow-circle-o-down: "\f01a";
@fa-arrow-circle-o-up: "\f01b";
@fa-inbox: "\f01c";
@fa-play-circle-o: "\f01d";
@fa-repeat: "\f01e";
@fa-refresh: "\f021";
@fa-list-alt: "\f022";
@fa-lock: "\f023";
@fa-flag: "\f024";
@fa-headphones: "\f025";
@fa-volume-off: "\f026";
@fa-volume-down: "\f027";
@fa-volume-up: "\f028";
@fa-qrcode: "\f029";
@fa-barcode: "\f02a";
@fa-tag: "\f02b";
@fa-tags: "\f02c";
@fa-book: "\f02d";
@fa-bookmark: "\f02e";
@fa-print: "\f02f";
@fa-camera: "\f030";
@fa-font: "\f031";
@fa-bold: "\f032";
@fa-italic: "\f033";
@fa-text-height: "\f034";
@fa-text-width: "\f035";
@fa-align-left: "\f036";
@fa-align-center: "\f037";
@fa-align-right: "\f038";
@fa-align-justify: "\f039";
@fa-list: "\f03a";
@fa-outdent: "\f03b";
@fa-indent: "\f03c";
@fa-video-camera: "\f03d";
@fa-picture-o: "\f03e";
@fa-pencil: "\f040";
@fa-map-marker: "\f041";
@fa-adjust: "\f042";
@fa-tint: "\f043";
@fa-pencil-square-o: "\f044";
@fa-share-square-o: "\f045";
@fa-check-square-o: "\f046";
@fa-arrows: "\f047";
@fa-step-backward: "\f048";
@fa-fast-backward: "\f049";
@fa-backward: "\f04a";
@fa-play: "\f04b";
@fa-pause: "\f04c";
@fa-stop: "\f04d";
@fa-forward: "\f04e";
@fa-fast-forward: "\f050";
@fa-step-forward: "\f051";
@fa-eject: "\f052";
@fa-chevron-left: "\f053";
@fa-chevron-right: "\f054";
@fa-plus-circle: "\f055";
@fa-minus-circle: "\f056";
@fa-times-circle: "\f057";
@fa-check-circle: "\f058";
@fa-question-circle: "\f059";
@fa-info-circle: "\f05a";
@fa-crosshairs: "\f05b";
@fa-times-circle-o: "\f05c";
@fa-check-circle-o: "\f05d";
@fa-ban: "\f05e";
@fa-arrow-left: "\f060";
@fa-arrow-right: "\f061";
@fa-arrow-up: "\f062";
@fa-arrow-down: "\f063";
@fa-share: "\f064";
@fa-expand: "\f065";
@fa-compress: "\f066";
@fa-plus: "\f067";
@fa-minus: "\f068";
@fa-asterisk: "\f069";
@fa-exclamation-circle: "\f06a";
@fa-gift: "\f06b";
@fa-leaf: "\f06c";
@fa-fire: "\f06d";
@fa-eye: "\f06e";
@fa-eye-slash: "\f070";
@fa-exclamation-triangle: "\f071";
@fa-plane: "\f072";
@fa-calendar: "\f073";
@fa-random: "\f074";
@fa-comment: "\f075";
@fa-magnet: "\f076";
@fa-chevron-up: "\f077";
@fa-chevron-down: "\f078";
@fa-retweet: "\f079";
@fa-shopping-cart: "\f07a";
@fa-folder: "\f07b";
@fa-folder-open: "\f07c";
@fa-arrows-v: "\f07d";
@fa-arrows-h: "\f07e";
@fa-bar-chart: "\f080";
@fa-twitter-square: "\f081";
@fa-facebook-square: "\f082";
@fa-camera-retro: "\f083";
@fa-key: "\f084";
@fa-cogs: "\f085";
@fa-comments: "\f086";
@fa-thumbs-o-up: "\f087";
@fa-thumbs-o-down: "\f088";
@fa-star-half: "\f089";
@fa-heart-o: "\f08a";
@fa-sign-out: "\f08b";
@fa-linkedin-square: "\f08c";
@fa-thumb-tack: "\f08d";
@fa-external-link: "\f08e";
@fa-sign-in: "\f090";
@fa-trophy: "\f091";
@fa-github-square: "\f092";
@fa-upload: "\f093";
@fa-lemon-o: "\f094";
@fa-phone: "\f095";
@fa-square-o: "\f096";
@fa-bookmark-o: "\f097";
@fa-phone-square: "\f098";
@fa-twitter: "\f099";
@fa-facebook: "\f09a";
@fa-github: "\f09b";
@fa-unlock: "\f09c";
@fa-credit-card: "\f09d";
@fa-rss: "\f09e";
@fa-hdd-o: "\f0a0";
@fa-bullhorn: "\f0a1";
@fa-bell: "\f0f3";
@fa-certificate: "\f0a3";
@fa-hand-o-right: "\f0a4";
@fa-hand-o-left: "\f0a5";
@fa-hand-o-up: "\f0a6";
@fa-hand-o-down: "\f0a7";
@fa-arrow-circle-left: "\f0a8";
@fa-arrow-circle-right: "\f0a9";
@fa-arrow-circle-up: "\f0aa";
@fa-arrow-circle-down: "\f0ab";
@fa-globe: "\f0ac";
@fa-wrench: "\f0ad";
@fa-tasks: "\f0ae";
@fa-filter: "\f0b0";
@fa-briefcase: "\f0b1";
@fa-arrows-alt: "\f0b2";
@fa-users: "\f0c0";
@fa-link: "\f0c1";
@fa-cloud: "\f0c2";
@fa-flask: "\f0c3";
@fa-scissors: "\f0c4";
@fa-files-o: "\f0c5";
@fa-paperclip: "\f0c6";
@fa-floppy-o: "\f0c7";
@fa-square: "\f0c8";
@fa-bars: "\f0c9";
@fa-list-ul: "\f0ca";
@fa-list-ol: "\f0cb";
@fa-strikethrough: "\f0cc";
@fa-underline: "\f0cd";
@fa-table: "\f0ce";
@fa-magic: "\f0d0";
@fa-truck: "\f0d1";
@fa-pinterest: "\f0d2";
@fa-pinterest-square: "\f0d3";
@fa-google-plus-square: "\f0d4";
@fa-google-plus: "\f0d5";
@fa-money: "\f0d6";
@fa-caret-down: "\f0d7";
@fa-caret-up: "\f0d8";
@fa-caret-left: "\f0d9";
@fa-caret-right: "\f0da";
@fa-columns: "\f0db";
@fa-sort: "\f0dc";
@fa-sort-desc: "\f0dd";
@fa-sort-asc: "\f0de";
@fa-envelope: "\f0e0";
@fa-linkedin: "\f0e1";
@fa-undo: "\f0e2";
@fa-gavel: "\f0e3";
@fa-tachometer: "\f0e4";
@fa-comment-o: "\f0e5";
@fa-comments-o: "\f0e6";
@fa-bolt: "\f0e7";
@fa-sitemap: "\f0e8";
@fa-umbrella: "\f0e9";
@fa-clipboard: "\f0ea";
@fa-lightbulb-o: "\f0eb";
@fa-exchange: "\f0ec";
@fa-cloud-download: "\f0ed";
@fa-cloud-upload: "\f0ee";
@fa-user-md: "\f0f0";
@fa-stethoscope: "\f0f1";
@fa-suitcase: "\f0f2";
@fa-bell-o: "\f0a2";
@fa-coffee: "\f0f4";
@fa-cutlery: "\f0f5";
@fa-file-text-o: "\f0f6";
@fa-building-o: "\f0f7";
@fa-hospital-o: "\f0f8";
@fa-ambulance: "\f0f9";
@fa-medkit: "\f0fa";
@fa-fighter-jet: "\f0fb";
@fa-beer: "\f0fc";
@fa-h-square: "\f0fd";
@fa-plus-square: "\f0fe";
@fa-angle-double-left: "\f100";
@fa-angle-double-right: "\f101";
@fa-angle-double-up: "\f102";
@fa-angle-double-down: "\f103";
@fa-angle-left: "\f104";
@fa-angle-right: "\f105";
@fa-angle-up: "\f106";
@fa-angle-down: "\f107";
@fa-desktop: "\f108";
@fa-laptop: "\f109";
@fa-tablet: "\f10a";
@fa-mobile: "\f10b";
@fa-circle-o: "\f10c";
@fa-quote-left: "\f10d";
@fa-quote-right: "\f10e";
@fa-spinner: "\f110";
@fa-circle: "\f111";
@fa-reply: "\f112";
@fa-github-alt: "\f113";
@fa-folder-o: "\f114";
@fa-folder-open-o: "\f115";
@fa-smile-o: "\f118";
@fa-frown-o: "\f119";
@fa-meh-o: "\f11a";
@fa-gamepad: "\f11b";
@fa-keyboard-o: "\f11c";
@fa-flag-o: "\f11d";
@fa-flag-checkered: "\f11e";
@fa-terminal: "\f120";
@fa-code: "\f121";
@fa-reply-all: "\f122";
@fa-star-half-o: "\f123";
@fa-location-arrow: "\f124";
@fa-crop: "\f125";
@fa-code-fork: "\f126";
@fa-chain-broken: "\f127";
@fa-question: "\f128";
@fa-info: "\f129";
@fa-exclamation: "\f12a";
@fa-superscript: "\f12b";
@fa-subscript: "\f12c";
@fa-eraser: "\f12d";
@fa-puzzle-piece: "\f12e";
@fa-microphone: "\f130";
@fa-microphone-slash: "\f131";
@fa-shield: "\f132";
@fa-calendar-o: "\f133";
@fa-fire-extinguisher: "\f134";
@fa-rocket: "\f135";
@fa-maxcdn: "\f136";
@fa-chevron-circle-left: "\f137";
@fa-chevron-circle-right: "\f138";
@fa-chevron-circle-up: "\f139";
@fa-chevron-circle-down: "\f13a";
@fa-html5: "\f13b";
@fa-css3: "\f13c";
@fa-anchor: "\f13d";
@fa-unlock-alt: "\f13e";
@fa-bullseye: "\f140";
@fa-ellipsis-h: "\f141";
@fa-ellipsis-v: "\f142";
@fa-rss-square: "\f143";
@fa-play-circle: "\f144";
@fa-ticket: "\f145";
@fa-minus-square: "\f146";
@fa-minus-square-o: "\f147";
@fa-level-up: "\f148";
@fa-level-down: "\f149";
@fa-check-square: "\f14a";
@fa-pencil-square: "\f14b";
@fa-external-link-square: "\f14c";
@fa-share-square: "\f14d";
@fa-compass: "\f14e";
@fa-caret-square-o-down: "\f150";
@fa-caret-square-o-up: "\f151";
@fa-caret-square-o-right: "\f152";
@fa-eur: "\f153";
@fa-gbp: "\f154";
@fa-usd: "\f155";
@fa-inr: "\f156";
@fa-jpy: "\f157";
@fa-rub: "\f158";
@fa-krw: "\f159";
@fa-btc: "\f15a";
@fa-file: "\f15b";
@fa-file-text: "\f15c";
@fa-sort-alpha-asc: "\f15d";
@fa-sort-alpha-desc: "\f15e";
@fa-sort-amount-asc: "\f160";
@fa-sort-amount-desc: "\f161";
@fa-sort-numeric-asc: "\f162";
@fa-sort-numeric-desc: "\f163";
@fa-thumbs-up: "\f164";
@fa-thumbs-down: "\f165";
@fa-youtube-square: "\f166";
@fa-youtube: "\f167";
@fa-xing: "\f168";
@fa-xing-square: "\f169";
@fa-youtube-play: "\f16a";
@fa-dropbox: "\f16b";
@fa-stack-overflow: "\f16c";
@fa-instagram: "\f16d";
@fa-flickr: "\f16e";
@fa-adn: "\f170";
@fa-bitbucket: "\f171";
@fa-bitbucket-square: "\f172";
@fa-tumblr: "\f173";
@fa-tumblr-square: "\f174";
@fa-long-arrow-down: "\f175";
@fa-long-arrow-up: "\f176";
@fa-long-arrow-left: "\f177";
@fa-long-arrow-right: "\f178";
@fa-apple: "\f179";
@fa-windows: "\f17a";
@fa-android: "\f17b";
@fa-linux: "\f17c";
@fa-dribbble: "\f17d";
@fa-skype: "\f17e";
@fa-foursquare: "\f180";
@fa-trello: "\f181";
@fa-female: "\f182";
@fa-male: "\f183";
@fa-gittip: "\f184";
@fa-sun-o: "\f185";
@fa-moon-o: "\f186";
@fa-archive: "\f187";
@fa-bug: "\f188";
@fa-vk: "\f189";
@fa-weibo: "\f18a";
@fa-renren: "\f18b";
@fa-pagelines: "\f18c";
@fa-stack-exchange: "\f18d";
@fa-arrow-circle-o-right: "\f18e";
@fa-arrow-circle-o-left: "\f190";
@fa-caret-square-o-left: "\f191";
@fa-dot-circle-o: "\f192";
@fa-wheelchair: "\f193";
@fa-vimeo-square: "\f194";
@fa-try: "\f195";
@fa-plus-square-o: "\f196";
@fa-space-shuttle: "\f197";
@fa-slack: "\f198";
@fa-envelope-square: "\f199";
@fa-wordpress: "\f19a";
@fa-openid: "\f19b";
@fa-university: "\f19c";
@fa-graduation-cap: "\f19d";
@fa-yahoo: "\f19e";
@fa-google: "\f1a0";
@fa-reddit: "\f1a1";
@fa-reddit-square: "\f1a2";
@fa-stumbleupon-circle: "\f1a3";
@fa-stumbleupon: "\f1a4";
@fa-delicious: "\f1a5";
@fa-digg: "\f1a6";
@fa-pied-piper: "\f1a7";
@fa-pied-piper-alt: "\f1a8";
@fa-drupal: "\f1a9";
@fa-joomla: "\f1aa";
@fa-language: "\f1ab";
@fa-fax: "\f1ac";
@fa-building: "\f1ad";
@fa-child: "\f1ae";
@fa-paw: "\f1b0";
@fa-spoon: "\f1b1";
@fa-cube: "\f1b2";
@fa-cubes: "\f1b3";
@fa-behance: "\f1b4";
@fa-behance-square: "\f1b5";
@fa-steam: "\f1b6";
@fa-steam-square: "\f1b7";
@fa-recycle: "\f1b8";
@fa-car: "\f1b9";
@fa-taxi: "\f1ba";
@fa-tree: "\f1bb";
@fa-spotify: "\f1bc";
@fa-deviantart: "\f1bd";
@fa-soundcloud: "\f1be";
@fa-database: "\f1c0";
@fa-file-pdf-o: "\f1c1";
@fa-file-word-o: "\f1c2";
@fa-file-excel-o: "\f1c3";
@fa-file-powerpoint-o: "\f1c4";
@fa-file-image-o: "\f1c5";
@fa-file-archive-o: "\f1c6";
@fa-file-audio-o: "\f1c7";
@fa-file-video-o: "\f1c8";
@fa-file-code-o: "\f1c9";
@fa-vine: "\f1ca";
@fa-codepen: "\f1cb";
@fa-jsfiddle: "\f1cc";
@fa-life-ring: "\f1cd";
@fa-circle-o-notch: "\f1ce";
@fa-rebel: "\f1d0";
@fa-empire: "\f1d1";
@fa-git-square: "\f1d2";
@fa-git: "\f1d3";
@fa-hacker-news: "\f1d4";
@fa-tencent-weibo: "\f1d5";
@fa-qq: "\f1d6";
@fa-weixin: "\f1d7";
@fa-paper-plane: "\f1d8";
@fa-paper-plane-o: "\f1d9";
@fa-history: "\f1da";
@fa-circle-thin: "\f1db";
@fa-header: "\f1dc";
@fa-paragraph: "\f1dd";
@fa-sliders: "\f1de";
@fa-share-alt: "\f1e0";
@fa-share-alt-square: "\f1e1";
@fa-bomb: "\f1e2";
@fa-futbol-o: "\f1e3";
@fa-tty: "\f1e4";
@fa-binoculars: "\f1e5";
@fa-plug: "\f1e6";
@fa-slideshare: "\f1e7";
@fa-twitch: "\f1e8";
@fa-yelp: "\f1e9";
@fa-newspaper-o: "\f1ea";
@fa-wifi: "\f1eb";
@fa-calculator: "\f1ec";
@fa-paypal: "\f1ed";
@fa-google-wallet: "\f1ee";
@fa-cc-visa: "\f1f0";
@fa-cc-mastercard: "\f1f1";
@fa-cc-discover: "\f1f2";
@fa-cc-amex: "\f1f3";
@fa-cc-paypal: "\f1f4";
@fa-cc-stripe: "\f1f5";
@fa-bell-slash: "\f1f6";
@fa-bell-slash-o: "\f1f7";
@fa-trash: "\f1f8";
@fa-copyright: "\f1f9";
@fa-at: "\f1fa";
@fa-eyedropper: "\f1fb";
@fa-paint-brush: "\f1fc";
@fa-birthday-cake: "\f1fd";
@fa-area-chart: "\f1fe";
@fa-pie-chart: "\f200";
@fa-line-chart: "\f201";
@fa-lastfm: "\f202";
@fa-lastfm-square: "\f203";
@fa-toggle-off: "\f204";
@fa-toggle-on: "\f205";
@fa-bicycle: "\f206";
@fa-bus: "\f207";
@fa-ioxhost: "\f208";
@fa-angellist: "\f209";
@fa-cc: "\f20a";
@fa-ils: "\f20b";
@fa-meanpath: "\f20c";
......@@ -107,7 +107,8 @@
{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:514, pId:5, name:"Metro 风格", file:"super/metro"},
{id:515, pId:5, name:"Awesome 风格", file:"super/awesome"},
{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"},
......
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - awesome 风格</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- Include font-awesome here, CDN is ok, or locally installed by bower to your project -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/awesomeStyle/awesome.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
,chkStyle: 'radio'
,radioType: "level"
},
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}
];
function setCheck() {
setting.check.chkStyle = $("#r1").attr("checked")? "checkbox":"radio";
setting.check.enable = (!$("#disablechk").attr("checked"));
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
setCheck();
$("#r1").bind("change", setCheck);
$("#r2").bind("change", setCheck);
$("#disablechk").bind("change", setCheck);
});
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>Awesome 风格</h1>
<h6>[ 文件路径: super/awesome.html ]</h6>
<div class="content_wrap">
<div class="bg left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>实现方法说明</h2>
<ul class="list">
<li>你需要在页面中引入 fontawesome 样式 (http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css)</li>
<li> <i class="fa fa-car"></i> &lt;= 小汽车图标 (如果 fontawesome 样式被正常加载,你可以正常看到)</li>
<li class="highlight_red">引入 适配 zTree 的 样式文件: 'css/awesomeStyle'</li>
<li>感谢 mikkelking 提供这个 Demo. (仅供参考)</li>
<li><p>Mode: <br/>
<label ><input type="radio" id="r1" class="radio first" name="r" value="checkbox" checked />
Checkbox</label>
<label><input type="radio" id="r2" class="radio" name="r" value="radio" /> Radio</label>
<label><input type="checkbox" id="disablechk" > Disable</label>
<br/>
</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
\ No newline at end of file
......@@ -107,6 +107,7 @@
{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:"OutLook Style", file:"super/left_menuForOutLook"},
{id:515, pId:5, name:"Awesome Style", file:"super/awesome"},
{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"},
......
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Simple Data</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- Include font-awesome here, CDN is ok, or locally installed by bower to your project -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/awesomeStyle/awesome.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
,chkStyle: 'radio'
,radioType: "level"
},
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}
];
function setCheck() {
setting.check.chkStyle = $("#r1").attr("checked")? "checkbox":"radio";
setting.check.enable = (!$("#disablechk").attr("checked"));
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
setCheck();
$("#r1").bind("change", setCheck);
$("#r2").bind("change", setCheck);
$("#disablechk").bind("change", setCheck);
});
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>Awesome Style</h1>
<h6>[ File Path: super/awesome.html ]</h6>
<div class="content_wrap">
<div class="bg left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of fontawesome Style</h2>
<ul class="list">
<li>You need to include the fontawesome stylesheet in your page (http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css)</li>
<li> <i class="fa fa-car"></i> &lt;= This should show a car icon (if fontawesome is loaded properly)</li>
<li class="highlight_red">Include the css stylesheet: 'css/awesomeStyle'</li>
<li>Thanks to mikkelking for this Demo. For reference only.</li>
<li><p>Mode: <br/>
<label ><input type="radio" id="r1" class="radio first" name="r" value="checkbox" checked />
Checkbox</label>
<label><input type="radio" id="r2" class="radio" name="r" value="radio" /> Radio</label>
<label><input type="checkbox" id="disablechk" > Disable</label>
<br/>
</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
\ No newline at end of file
<!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 href="../../../css/zTreeStyle/zTreeStyle.css" rel="stylesheet" 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
,chkStyle: 'radio'
,radioType: "level"
},
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}
];
function setCheck() {
setting.check.chkStyle = $("#r1").attr("checked")? "checkbox":"radio";
setting.check.enable = (!$("#disablechk").attr("checked"));
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
setCheck();
$("#r1").bind("change", setCheck);
$("#r2").bind("change", setCheck);
$("#disablechk").bind("change", setCheck);
});
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>zTree Style</h1>
<h6>[ File Path: super/ztree.html ]</h6>
<div class="content_wrap">
<div class="bg left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of zTree Style</h2>
</li>
<li><p>Mode: <br/>
<label ><input type="radio" id="r1" class="radio first" name="r" value="checkbox" checked />
Checkbox</label>
<label><input type="radio" id="r2" class="radio" name="r" value="radio" /> Radio</label>
<label><input type="checkbox" id="disablechk" > Disable</label>
<br/>
</li>
</ul>
</ul>
</div>
</div>
</BODY>
</HTML>
\ No newline at end of file
......@@ -9,7 +9,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function($){
var settings = {}, roots = {}, caches = {},
......@@ -1724,7 +1724,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function($){
//default consts of excheck
......@@ -2352,7 +2352,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function($){
//default consts of exedit
......
......@@ -9,7 +9,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function(p){var G,H,I,J,K,L,r={},u={},v={},M={treeId:"",treeObj:null,view:{addDiyDom:null,autoCancelSelected:!0,dblClickExpand:!0,expandSpeed:"fast",fontCss:{},nameIsHTML:!1,selectedMulti:!0,showIcon:!0,showLine:!0,showTitle:!0,txtSelectedEnable:!1},data:{key:{children:"children",name:"name",title:"",url:"url"},simpleData:{enable:!1,idKey:"id",pIdKey:"pId",rootPId:null},keep:{parent:!1,leaf:!1}},async:{enable:!1,contentType:"application/x-www-form-urlencoded",type:"post",dataType:"text",url:"",autoParam:[],
otherParam:[],dataFilter:null},callback:{beforeAsync:null,beforeClick:null,beforeDblClick:null,beforeRightClick:null,beforeMouseDown:null,beforeMouseUp:null,beforeExpand:null,beforeCollapse:null,beforeRemove:null,onAsyncError:null,onAsyncSuccess:null,onNodeCreated:null,onClick:null,onDblClick:null,onRightClick:null,onMouseDown:null,onMouseUp:null,onExpand:null,onCollapse:null,onRemove:null}},w=[function(b){var a=b.treeObj,c=e.event;a.bind(c.NODECREATED,function(a,c,g){j.apply(b.callback.onNodeCreated,
......@@ -80,7 +80,7 @@ d.async.url&&d.async.url!==""&&i.asyncNode(d);return c}};var N=p.fn.zTree,k=j.$,
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function(m){var p,q,r,o={event:{CHECK:"ztree_check"},id:{CHECK:"_check"},checkbox:{STYLE:"checkbox",DEFAULT:"chk",DISABLED:"disable",FALSE:"false",TRUE:"true",FULL:"full",PART:"part",FOCUS:"focus"},radio:{STYLE:"radio",TYPE_ALL:"all",TYPE_LEVEL:"level"}},v={check:{enable:!1,autoCheckTrigger:!1,chkStyle:o.checkbox.STYLE,nocheckInherit:!1,chkDisabledInherit:!1,radioType:o.radio.TYPE_LEVEL,chkboxType:{Y:"ps",N:"ps"}},data:{key:{checked:"checked"}},callback:{beforeCheck:null,onCheck:null}};p=function(c,
a){if(a.chkDisabled===!0)return!1;var b=f.getSetting(c.data.treeId),d=b.data.key.checked;if(k.apply(b.callback.beforeCheck,[b.treeId,a],!0)==!1)return!0;a[d]=!a[d];e.checkNodeRelation(b,a);d=n(a,j.id.CHECK,b);e.setChkClass(b,d,a);e.repairParentChkClassWithSelf(b,a);b.treeObj.trigger(j.event.CHECK,[c,b.treeId,a]);return!0};q=function(c,a){if(a.chkDisabled===!0)return!1;var b=f.getSetting(c.data.treeId),d=n(a,j.id.CHECK,b);a.check_Focus=!0;e.setChkClass(b,d,a);return!0};r=function(c,a){if(a.chkDisabled===
......@@ -115,7 +115,7 @@ d);return j}})(jQuery);
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function(w){var I={event:{DRAG:"ztree_drag",DROP:"ztree_drop",RENAME:"ztree_rename",DRAGMOVE:"ztree_dragmove"},id:{EDIT:"_edit",INPUT:"_input",REMOVE:"_remove"},move:{TYPE_INNER:"inner",TYPE_PREV:"prev",TYPE_NEXT:"next"},node:{CURSELECTED_EDIT:"curSelectedNode_Edit",TMPTARGET_TREE:"tmpTargetzTree",TMPTARGET_NODE:"tmpTargetNode"}},x={onHoverOverNode:function(b,a){var c=m.getSetting(b.data.treeId),d=m.getRoot(c);if(d.curHoverNode!=a)x.onHoverOutNode(b);d.curHoverNode=a;f.addHoverDom(c,a)},onHoverOutNode:function(b){var b=
m.getSetting(b.data.treeId),a=m.getRoot(b);if(a.curHoverNode&&!m.isSelectedNode(b,a.curHoverNode))f.removeTreeDom(b,a.curHoverNode),a.curHoverNode=null},onMousedownNode:function(b,a){function c(b){if(C.dragFlag==0&&Math.abs(N-b.clientX)<e.edit.drag.minMoveSize&&Math.abs(O-b.clientY)<e.edit.drag.minMoveSize)return!0;var a,c,n,k,i;i=e.data.key.children;M.css("cursor","pointer");if(C.dragFlag==0){if(g.apply(e.callback.beforeDrag,[e.treeId,l],!0)==!1)return r(b),!0;for(a=0,c=l.length;a<c;a++){if(a==0)C.dragNodeShowBefore=
......
......@@ -8,7 +8,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function($){
var settings = {}, roots = {}, caches = {},
......
......@@ -8,7 +8,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function(p){var G,H,I,J,K,L,r={},u={},v={},M={treeId:"",treeObj:null,view:{addDiyDom:null,autoCancelSelected:!0,dblClickExpand:!0,expandSpeed:"fast",fontCss:{},nameIsHTML:!1,selectedMulti:!0,showIcon:!0,showLine:!0,showTitle:!0,txtSelectedEnable:!1},data:{key:{children:"children",name:"name",title:"",url:"url"},simpleData:{enable:!1,idKey:"id",pIdKey:"pId",rootPId:null},keep:{parent:!1,leaf:!1}},async:{enable:!1,contentType:"application/x-www-form-urlencoded",type:"post",dataType:"text",url:"",autoParam:[],
otherParam:[],dataFilter:null},callback:{beforeAsync:null,beforeClick:null,beforeDblClick:null,beforeRightClick:null,beforeMouseDown:null,beforeMouseUp:null,beforeExpand:null,beforeCollapse:null,beforeRemove:null,onAsyncError:null,onAsyncSuccess:null,onNodeCreated:null,onClick:null,onDblClick:null,onRightClick:null,onMouseDown:null,onMouseUp:null,onExpand:null,onCollapse:null,onRemove:null}},w=[function(b){var a=b.treeObj,c=e.event;a.bind(c.NODECREATED,function(a,c,g){j.apply(b.callback.onNodeCreated,
......
......@@ -8,7 +8,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function($){
//default consts of excheck
......
......@@ -8,7 +8,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function(m){var p,q,r,o={event:{CHECK:"ztree_check"},id:{CHECK:"_check"},checkbox:{STYLE:"checkbox",DEFAULT:"chk",DISABLED:"disable",FALSE:"false",TRUE:"true",FULL:"full",PART:"part",FOCUS:"focus"},radio:{STYLE:"radio",TYPE_ALL:"all",TYPE_LEVEL:"level"}},v={check:{enable:!1,autoCheckTrigger:!1,chkStyle:o.checkbox.STYLE,nocheckInherit:!1,chkDisabledInherit:!1,radioType:o.radio.TYPE_LEVEL,chkboxType:{Y:"ps",N:"ps"}},data:{key:{checked:"checked"}},callback:{beforeCheck:null,onCheck:null}};p=function(c,
a){if(a.chkDisabled===!0)return!1;var b=f.getSetting(c.data.treeId),d=b.data.key.checked;if(k.apply(b.callback.beforeCheck,[b.treeId,a],!0)==!1)return!0;a[d]=!a[d];e.checkNodeRelation(b,a);d=n(a,j.id.CHECK,b);e.setChkClass(b,d,a);e.repairParentChkClassWithSelf(b,a);b.treeObj.trigger(j.event.CHECK,[c,b.treeId,a]);return!0};q=function(c,a){if(a.chkDisabled===!0)return!1;var b=f.getSetting(c.data.treeId),d=n(a,j.id.CHECK,b);a.check_Focus=!0;e.setChkClass(b,d,a);return!0};r=function(c,a){if(a.chkDisabled===
......
......@@ -8,7 +8,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function($){
//default consts of exedit
......
......@@ -8,7 +8,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function(w){var I={event:{DRAG:"ztree_drag",DROP:"ztree_drop",RENAME:"ztree_rename",DRAGMOVE:"ztree_dragmove"},id:{EDIT:"_edit",INPUT:"_input",REMOVE:"_remove"},move:{TYPE_INNER:"inner",TYPE_PREV:"prev",TYPE_NEXT:"next"},node:{CURSELECTED_EDIT:"curSelectedNode_Edit",TMPTARGET_TREE:"tmpTargetzTree",TMPTARGET_NODE:"tmpTargetNode"}},x={onHoverOverNode:function(b,a){var c=m.getSetting(b.data.treeId),d=m.getRoot(c);if(d.curHoverNode!=a)x.onHoverOutNode(b);d.curHoverNode=a;f.addHoverDom(c,a)},onHoverOutNode:function(b){var b=
m.getSetting(b.data.treeId),a=m.getRoot(b);if(a.curHoverNode&&!m.isSelectedNode(b,a.curHoverNode))f.removeTreeDom(b,a.curHoverNode),a.curHoverNode=null},onMousedownNode:function(b,a){function c(b){if(C.dragFlag==0&&Math.abs(N-b.clientX)<e.edit.drag.minMoveSize&&Math.abs(O-b.clientY)<e.edit.drag.minMoveSize)return!0;var a,c,n,k,i;i=e.data.key.children;M.css("cursor","pointer");if(C.dragFlag==0){if(g.apply(e.callback.beforeDrag,[e.treeId,l],!0)==!1)return r(b),!0;for(a=0,c=l.length;a<c;a++){if(a==0)C.dragNodeShowBefore=
......
......@@ -8,7 +8,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function($){
//default init node of exLib
......
......@@ -8,7 +8,7 @@
* http://www.opensource.org/licenses/mit-license.php
*
* email: hunter.z@263.net
* Date: 2015-05-25
* Date: 2015-06-18
*/
(function(i){i.extend(!0,i.fn.zTree._z,{view:{clearOldFirstNode:function(c,a){for(var b=a.getNextNode();b;){if(b.isFirstNode){b.isFirstNode=!1;d.setNodeLineIcos(c,b);break}if(b.isLastNode)break;b=b.getNextNode()}},clearOldLastNode:function(c,a,b){for(a=a.getPreNode();a;){if(a.isLastNode){a.isLastNode=!1;b&&d.setNodeLineIcos(c,a);break}if(a.isFirstNode)break;a=a.getPreNode()}},makeDOMNodeMainBefore:function(c,a,b){c.push("<li ",b.isHidden?"style='display:none;' ":"","id='",b.tId,"' class='",l.className.LEVEL,
b.level,"' tabindex='0' hidefocus='true' treenode>")},showNode:function(c,a){a.isHidden=!1;f.initShowForExCheck(c,a);j(a,c).show()},showNodes:function(c,a,b){if(a&&a.length!=0){var e={},g,k;for(g=0,k=a.length;g<k;g++){var h=a[g];if(!e[h.parentTId]){var i=h.getParentNode();e[h.parentTId]=i===null?f.getRoot(c):h.getParentNode()}d.showNode(c,h,b)}for(var j in e)a=e[j][c.data.key.children],d.setFirstNodeForShow(c,a),d.setLastNodeForShow(c,a)}},hideNode:function(c,a){a.isHidden=!0;a.isFirstNode=!1;a.isLastNode=
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册