Permalink
Browse files

fix: tree 左侧图标不随着移动以及节点hover效果

  • Loading branch information...
1 parent 6be2f47 commit 80ee7b0d1a379cc149f41b4027251a6cf8dbed60 @whizbz11 whizbz11 committed Jan 3, 2017
Showing with 22 additions and 20 deletions.
  1. +4 −7 css/tree.css
  2. +6 −1 dist/css/tree.css
  3. +1 −1 dist/css/tree.min.css
  4. +5 −5 dist/js/u-tree.js
  5. +1 −1 dist/js/u-tree.min.js
  6. +5 −5 js/treeComp.js
View
@@ -101,12 +101,7 @@ website: http://code.google.com/p/jquerytree/
margin-right: 2px;
}
-.ztree li > a > span:last-child {
- overflow: hidden;
- text-overflow: ellipsis;
- display: inline-block;
- width: 80%;
-}
+
.ztree li span.button {
line-height: 0;
@@ -449,9 +444,11 @@ ul.ztree.zTreeDragUL {
}
.ztree li span.button.switch {
- position: absolute;
+ // position: absolute;
+ position:relative;
z-index: 1000;
line-height: 21px;
+ float:left;
}
.ztree li span.button.switch.noline_close:after {
View
@@ -107,6 +107,9 @@ website: http://code.google.com/p/jquerytree/
line-height: 16px;
margin-right: 2px;
}
+
+
+
.ztree li span.button {
line-height: 0;
margin: 0;
@@ -448,9 +451,11 @@ ul.ztree.zTreeDragUL {
}
.ztree li span.button.switch {
- position: absolute;
+ // position: absolute;
+ position:relative;
z-index: 1000;
line-height: 21px;
+ float:left;
}
.ztree li span.button.switch.noline_close:after {
@@ -5,4 +5,4 @@
* homepage : https://github.com/iuap-design/tinper-neoui-tree#readme
* bugs : https://github.com/iuap-design/tinper-neoui-tree/issues
**/
-.ztree,.ztree li a{color:#333;margin:0}.ztree li a.tmpTargetNode_inner,ul.tmpTargetzTree,ul.ztree.zTreeDragUL{opacity:.8;filter:alpha(opacity=80)}.ztree li a,.ztree li span.button,.ztree li span.button.chk{display:inline-block;cursor:pointer}.ztree *{.ztree li span.button.switch.noline_open:after padding: 0;margin:0;font-size:14px;font-family:Verdana,Arial,Helvetica,AppleGothic,sans-serif}.ztree{padding:9px;overflow:auto}.ztree li{padding:0;margin:0;list-style:none;line-height:26px;text-align:left;white-space:nowrap;outline:0;vertical-align:middle;// padding:6px 10px}.ztree li ul{margin:0;padding:0 0 0 18px}.ztree li ul.line{background:url(../images/line_conn.gif) repeat-y}.ztree li a{background-color:transparent;text-decoration:none!important;vertical-align:top;position:relative;padding:4px 10px;box-sizing:border-box}.ztree li a:hover{color:#3949AB;background-color:#eee}.ztree li.hoverNode .switch{color:#3949AB}.ztree li a.focusNode{// background-color:#C0EBF4;background-color:#3f51b5;color:#FFF}.ztree li a.curSelectedNode_Edit{padding-top:0;background-color:#FFE6B0;color:#000;height:16px;border:1px solid #FFB951;opacity:.8}.ztree li a.tmpTargetNode_inner{padding-top:0;background-color:#316AC5;color:#fff;height:16px;border:1px solid #316AC5}.ztree li a input.rename{height:14px;width:80px;padding:0;margin:0;font-size:12px;border:1px solid #7EC4CC}.ztree li span{line-height:16px;margin-right:2px}.ztree li span.button{line-height:0;margin:0;width:24px;height:26px;position:relative;outline:0;background-color:transparent;background-repeat:no-repeat;background-attachment:scroll}.ztree li span.button.chk{margin:0 3px 0 0;z-index:1000}.ztree li span.button.chk.checkbox_false_full{background-position:0 0}.ztree li span.button.chk.checkbox_false_full_focus{background-position:0 -14px}.ztree li span.button.chk.checkbox_false_part{background-position:0 -28px}.ztree li span.button.chk.checkbox_false_part_focus{background-position:0 -42px}.ztree li span.button.chk.checkbox_false_disable{background-position:0 -56px}.ztree li span.button.chk.checkbox_true_full{background-position:-14px 0}.ztree li span.button.chk.checkbox_true_full_focus{background-position:-14px -14px}.ztree li span.button.chk.checkbox_true_part{background-position:-14px -28px}.ztree li span.button.chk.checkbox_true_part_focus{background-position:-14px -42px}.ztree li span.button.chk.checkbox_true_disable{background-position:-14px -56px}.ztree li span.button.chk.radio_false_full{background-position:-28px 0}.ztree li span.button.chk.radio_false_full_focus{background-position:-28px -14px}.ztree li span.button.chk.radio_false_part{background-position:-28px -28px}.ztree li span.button.chk.radio_false_part_focus{background-position:-28px -42px}.ztree li span.button.chk.radio_false_disable{background-position:-28px -56px}.ztree li span.button.chk.radio_true_full{background-position:-42px 0}.ztree li span.button.chk.radio_true_full_focus{background-position:-42px -14px}.ztree li span.button.chk.radio_true_part{background-position:-42px -28px}.ztree li span.button.chk.radio_true_part_focus{background-position:-42px -42px}.ztree li span.button.chk.radio_true_disable{background-position:-42px -56px}.ztree li span.button.switch{// width:21px;// height:21px;width:18px;height:18px}.ztree li span.button.root_open{background-position:-92px -54px}.ztree li span.button.root_close{background-image:none;line-height:18px;background-position:-74px -54px}.ztree li span.button.root_close:after{font-family:uf;content:'\e6ce'}.ztree li span.button.roots_open{background-image:none;line-height:18px;background-position:-92px 0}.ztree li span.button.bottom_close,.ztree li span.button.bottom_open,.ztree li span.button.center_close,.ztree li span.button.center_open,.ztree li span.button.roots_close{background-image:none;line-height:18px;background-position:-74px -54px}.ztree li span.button.roots_open:after{font-family:uf;content:'\e6ce';color:#ccc}.ztree li span.button.roots_close:after{font-family:uf;content:'\e6ed'}.ztree li span.button.bottom_open:after,.ztree li span.button.center_open:after{font-family:uf;content:'\e6ce';color:#ccc}.ztree li span.button.bottom_close:after,.ztree li span.button.center_close:after{font-family:uf;content:'\e6ed'}.ztree li span.button.noline_open{background-position:-92px -72px;margin-left:-8px;padding-right:8px}.ztree li span.button.root_docu{background:0 0}.ztree li span.button.roots_docu{background-position:-56px 0}.ztree li span.button.center_docu{background-position:-56px -18px}.ztree li span.button.bottom_docu{background-position:-56px -36px}.ztree li span.button.noline_docu{background:0 0}.ztree li span.button.ico_close,.ztree li span.button.ico_open{line-height:22px;background-position:-110px 0}.ztree li span.button.ico_close,.ztree li span.button.ico_docu,.ztree li span.button.ico_open{background-image:none;font-size:14px;vertical-align:top;overflow:hidden}.ztree li span.button.ico_open:after{font-family:uf;content:'\e6d8';position:absolute;top:3px}.ztree li span.button.ico_close:after{font-family:uf;content:'\e688';position:absolute;top:3px}.ztree li span.button.ico_docu:after{font-family:uf;content:'\e628';position:absolute;top:11px}.ztree li span.button.edit{margin-right:2px;background-position:-110px -48px;vertical-align:top}.ztree li span.button.remove{margin-right:2px;background-position:-110px -64px;vertical-align:top}.ztree li span.button.ico_loading{margin-right:2px;background:url(../images/loading.gif) no-repeat;vertical-align:top}ul.tmpTargetzTree{background-color:#FFE6B0}span.tmpzTreeMove_arrow{width:16px;height:16px;display:inline-block;padding:0;margin:2px 0 0 1px;border:0;position:absolute;background-color:transparent;background-repeat:no-repeat;background-attachment:scroll;background-position:-110px -80px;background-image:url(../images/zTreeStandard.png)}.zTreeMask,ul.ztree.zTreeDragUL{background-color:#cfcfcf;position:absolute}ul.ztree.zTreeDragUL{margin:0;padding:0;width:auto;height:auto;overflow:hidden;border:1px dotted #00B83F}.zTreeMask{z-index:10000;opacity:0;filter:alpha(opacity=0)}.ztree li span.button.chk{position:relative;top:0;left:0;width:14px;height:14px;box-sizing:border-box;border-radius:3px;border:1px solid #d9d9d9;background-color:#fff;-webkit-transition:border-color .1s cubic-bezier(.71,-.46,.29,1.46),background-color .1s cubic-bezier(.71,-.46,.29,1.46);transition:border-color .1s cubic-bezier(.71,-.46,.29,1.46),background-color .1s cubic-bezier(.71,-.46,.29,1.46);overflow:hidden}.ztree li span.button.chk:after{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);position:absolute;left:4px;top:1px;display:table;width:5px;height:8px;box-sizing:border-box;border:2px solid #fff;border-top:0;border-left:0;content:' ';-webkit-transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s}.ztree li span.button.chk.checkbox_true_full,.ztree li span.button.chk.checkbox_true_full_focus{border-color:#2db7f5;background-color:#2db7f5}.ztree li span.button.chk:hover{border-color:#bcbcbc}.ztree li.focusNode>span.button.switch{color:#FFF}.ztree li span.button.switch{position:absolute;z-index:1000;line-height:21px}.ztree li span.button.switch.noline_close:after{content:"\e611";font-family:uf;position:absolute;top:8px;font-size:12px}.ztree li span.button.switch.noline_open:after{content:"\e608";font-family:uf;position:absolute;top:8px;font-size:12px;left:5px}.basic li span.button.switch.noline_open:after{content:"\e6ce";left:0;font-size:12px}.basic li span.button.switch.noline_close:after{content:"\e6ed";left:0;font-size:12px}.basic li span.button.ico_close:after,.basic li span.button.ico_open:after{content:"\e688";top:1px}.basic li span.button.ico_close,.basic li span.button.ico_open{margin-right:10px}.basic li span.button.ico_docu{font-size:12px}.basic li a.focusNode{color:#fff!important;background-color:#3949ab!important}.basic .focusNode{color:#fff}
+.ztree,.ztree li a{color:#333;margin:0}.ztree li a.tmpTargetNode_inner,ul.tmpTargetzTree,ul.ztree.zTreeDragUL{opacity:.8;filter:alpha(opacity=80)}.ztree li a,.ztree li span.button,.ztree li span.button.chk{display:inline-block;cursor:pointer}.ztree *{.ztree li span.button.switch.noline_open:after padding: 0;margin:0;font-size:14px;font-family:Verdana,Arial,Helvetica,AppleGothic,sans-serif}.ztree{padding:9px;overflow:auto}.ztree li{padding:0;margin:0;list-style:none;line-height:26px;text-align:left;white-space:nowrap;outline:0;vertical-align:middle;// padding:6px 10px}.ztree li ul{margin:0;padding:0 0 0 18px}.ztree li ul.line{background:url(../images/line_conn.gif) repeat-y}.ztree li a{background-color:transparent;text-decoration:none!important;vertical-align:top;position:relative;padding:4px 10px;box-sizing:border-box}.ztree li a:hover{color:#3949AB;background-color:#eee}.ztree li.hoverNode .switch{color:#3949AB}.ztree li a.focusNode{// background-color:#C0EBF4;background-color:#3f51b5;color:#FFF}.ztree li a.curSelectedNode_Edit{padding-top:0;background-color:#FFE6B0;color:#000;height:16px;border:1px solid #FFB951;opacity:.8}.ztree li a.tmpTargetNode_inner{padding-top:0;background-color:#316AC5;color:#fff;height:16px;border:1px solid #316AC5}.ztree li a input.rename{height:14px;width:80px;padding:0;margin:0;font-size:12px;border:1px solid #7EC4CC}.ztree li span{line-height:16px;margin-right:2px}.ztree li span.button{line-height:0;margin:0;width:24px;height:26px;position:relative;outline:0;background-color:transparent;background-repeat:no-repeat;background-attachment:scroll}.ztree li span.button.chk{margin:0 3px 0 0;z-index:1000}.ztree li span.button.chk.checkbox_false_full{background-position:0 0}.ztree li span.button.chk.checkbox_false_full_focus{background-position:0 -14px}.ztree li span.button.chk.checkbox_false_part{background-position:0 -28px}.ztree li span.button.chk.checkbox_false_part_focus{background-position:0 -42px}.ztree li span.button.chk.checkbox_false_disable{background-position:0 -56px}.ztree li span.button.chk.checkbox_true_full{background-position:-14px 0}.ztree li span.button.chk.checkbox_true_full_focus{background-position:-14px -14px}.ztree li span.button.chk.checkbox_true_part{background-position:-14px -28px}.ztree li span.button.chk.checkbox_true_part_focus{background-position:-14px -42px}.ztree li span.button.chk.checkbox_true_disable{background-position:-14px -56px}.ztree li span.button.chk.radio_false_full{background-position:-28px 0}.ztree li span.button.chk.radio_false_full_focus{background-position:-28px -14px}.ztree li span.button.chk.radio_false_part{background-position:-28px -28px}.ztree li span.button.chk.radio_false_part_focus{background-position:-28px -42px}.ztree li span.button.chk.radio_false_disable{background-position:-28px -56px}.ztree li span.button.chk.radio_true_full{background-position:-42px 0}.ztree li span.button.chk.radio_true_full_focus{background-position:-42px -14px}.ztree li span.button.chk.radio_true_part{background-position:-42px -28px}.ztree li span.button.chk.radio_true_part_focus{background-position:-42px -42px}.ztree li span.button.chk.radio_true_disable{background-position:-42px -56px}.ztree li span.button.switch{// width:21px;// height:21px;width:18px;height:18px}.ztree li span.button.root_open{background-position:-92px -54px}.ztree li span.button.root_close{background-image:none;line-height:18px;background-position:-74px -54px}.ztree li span.button.root_close:after{font-family:uf;content:'\e6ce'}.ztree li span.button.roots_open{background-image:none;line-height:18px;background-position:-92px 0}.ztree li span.button.bottom_close,.ztree li span.button.bottom_open,.ztree li span.button.center_close,.ztree li span.button.center_open,.ztree li span.button.roots_close{background-image:none;line-height:18px;background-position:-74px -54px}.ztree li span.button.roots_open:after{font-family:uf;content:'\e6ce';color:#ccc}.ztree li span.button.roots_close:after{font-family:uf;content:'\e6ed'}.ztree li span.button.bottom_open:after,.ztree li span.button.center_open:after{font-family:uf;content:'\e6ce';color:#ccc}.ztree li span.button.bottom_close:after,.ztree li span.button.center_close:after{font-family:uf;content:'\e6ed'}.ztree li span.button.noline_open{background-position:-92px -72px;margin-left:-8px;padding-right:8px}.ztree li span.button.root_docu{background:0 0}.ztree li span.button.roots_docu{background-position:-56px 0}.ztree li span.button.center_docu{background-position:-56px -18px}.ztree li span.button.bottom_docu{background-position:-56px -36px}.ztree li span.button.noline_docu{background:0 0}.ztree li span.button.ico_close,.ztree li span.button.ico_open{line-height:22px;background-position:-110px 0}.ztree li span.button.ico_close,.ztree li span.button.ico_docu,.ztree li span.button.ico_open{background-image:none;font-size:14px;vertical-align:top;overflow:hidden}.ztree li span.button.ico_open:after{font-family:uf;content:'\e6d8';position:absolute;top:3px}.ztree li span.button.ico_close:after{font-family:uf;content:'\e688';position:absolute;top:3px}.ztree li span.button.ico_docu:after{font-family:uf;content:'\e628';position:absolute;top:11px}.ztree li span.button.edit{margin-right:2px;background-position:-110px -48px;vertical-align:top}.ztree li span.button.remove{margin-right:2px;background-position:-110px -64px;vertical-align:top}.ztree li span.button.ico_loading{margin-right:2px;background:url(../images/loading.gif) no-repeat;vertical-align:top}ul.tmpTargetzTree{background-color:#FFE6B0}span.tmpzTreeMove_arrow{width:16px;height:16px;display:inline-block;padding:0;margin:2px 0 0 1px;border:0;position:absolute;background-color:transparent;background-repeat:no-repeat;background-attachment:scroll;background-position:-110px -80px;background-image:url(../images/zTreeStandard.png)}.zTreeMask,ul.ztree.zTreeDragUL{background-color:#cfcfcf;position:absolute}ul.ztree.zTreeDragUL{margin:0;padding:0;width:auto;height:auto;overflow:hidden;border:1px dotted #00B83F}.zTreeMask{z-index:10000;opacity:0;filter:alpha(opacity=0)}.ztree li span.button.chk{position:relative;top:0;left:0;width:14px;height:14px;box-sizing:border-box;border-radius:3px;border:1px solid #d9d9d9;background-color:#fff;-webkit-transition:border-color .1s cubic-bezier(.71,-.46,.29,1.46),background-color .1s cubic-bezier(.71,-.46,.29,1.46);transition:border-color .1s cubic-bezier(.71,-.46,.29,1.46),background-color .1s cubic-bezier(.71,-.46,.29,1.46);overflow:hidden}.ztree li span.button.chk:after{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);position:absolute;left:4px;top:1px;display:table;width:5px;height:8px;box-sizing:border-box;border:2px solid #fff;border-top:0;border-left:0;content:' ';-webkit-transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s}.ztree li span.button.chk.checkbox_true_full,.ztree li span.button.chk.checkbox_true_full_focus{border-color:#2db7f5;background-color:#2db7f5}.ztree li span.button.chk:hover{border-color:#bcbcbc}.ztree li.focusNode>span.button.switch{color:#FFF}.ztree li span.button.switch{// position:absolute;position:relative;z-index:1000;line-height:21px;float:left}.ztree li span.button.switch.noline_close:after{content:"\e611";font-family:uf;position:absolute;top:8px;font-size:12px}.ztree li span.button.switch.noline_open:after{content:"\e608";font-family:uf;position:absolute;top:8px;font-size:12px;left:5px}.basic li span.button.switch.noline_open:after{content:"\e6ce";left:0;font-size:12px}.basic li span.button.switch.noline_close:after{content:"\e6ed";left:0;font-size:12px}.basic li span.button.ico_close:after,.basic li span.button.ico_open:after{content:"\e688";top:1px}.basic li span.button.ico_close,.basic li span.button.ico_open{margin-right:10px}.basic li span.button.ico_docu{font-size:12px}.basic li a.focusNode{color:#fff!important;background-color:#3949ab!important}.basic .focusNode{color:#fff}
View
@@ -1207,19 +1207,19 @@
// pLeft=checkboxLength+parPaddingLeft+iconLength*(node.level+1) + 30 +'px';
// 因为a标签前面的图标设置成了absolute,所以忽略前面的宽度即减去21px
- pLeft=checkboxLength+parPaddingLeft+iconLength*(node.level) + 30 +'px';
+ pLeft=checkboxLength+parPaddingLeft+iconLength*(node.level +1) +'px';
- mLeft = checkboxLength+parPaddingLeft+iconLength*(node.level) +'px';
+ mLeft = checkboxLength+parPaddingLeft+iconLength*(node.level+1) +'px';
}else{
- pLeft=parPaddingLeft+iconLength*(node.level)+30+'px';
- mLeft=parPaddingLeft+iconLength*(node.level)+'px';
+ pLeft=parPaddingLeft+iconLength*(node.level +1)+'px';
+ mLeft=parPaddingLeft+iconLength*(node.level +1)+'px';
}
fontStyle.push('padding-left', ":",pLeft, ";");
fontStyle.push('margin-left', ":", '-'+mLeft, ";");
// 将a标签的宽度根据上级100%再加上层级之间的padding值算出
parDomWidth='calc(100% + '+18*(node.level+1) +'px )';
- fontStyle.push('width', ":", parDomWidth, ";");
+ fontStyle.push('min-width', ":", parDomWidth, ";");
for (var f in fontcss) {
fontStyle.push(f, ":", fontcss[f], ";");
}
Oops, something went wrong.
View
@@ -1200,19 +1200,19 @@
// pLeft=checkboxLength+parPaddingLeft+iconLength*(node.level+1) + 30 +'px';
// 因为a标签前面的图标设置成了absolute,所以忽略前面的宽度即减去21px
- pLeft=checkboxLength+parPaddingLeft+iconLength*(node.level) + 30 +'px';
+ pLeft=checkboxLength+parPaddingLeft+iconLength*(node.level +1) +'px';
- mLeft = checkboxLength+parPaddingLeft+iconLength*(node.level) +'px';
+ mLeft = checkboxLength+parPaddingLeft+iconLength*(node.level+1) +'px';
}else{
- pLeft=parPaddingLeft+iconLength*(node.level)+30+'px';
- mLeft=parPaddingLeft+iconLength*(node.level)+'px';
+ pLeft=parPaddingLeft+iconLength*(node.level +1)+'px';
+ mLeft=parPaddingLeft+iconLength*(node.level +1)+'px';
}
fontStyle.push('padding-left', ":",pLeft, ";");
fontStyle.push('margin-left', ":", '-'+mLeft, ";");
// 将a标签的宽度根据上级100%再加上层级之间的padding值算出
parDomWidth='calc(100% + '+18*(node.level+1) +'px )';
- fontStyle.push('width', ":", parDomWidth, ";");
+ fontStyle.push('min-width', ":", parDomWidth, ";");
for (var f in fontcss) {
fontStyle.push(f, ":", fontcss[f], ";");
}

0 comments on commit 80ee7b0

Please sign in to comment.