首页运维零件 › 仅改变外观vns威尼斯城官网登入,子节点可以异步加载数据

仅改变外观vns威尼斯城官网登入,子节点可以异步加载数据

其实原理很简短,大家点击的时候我们给成分加上八个自定义的attr,加上后便会有有三个至极的体裁去自动适配背景,几秒后去掉该样式恢复原状
首先在投机的js中张开叁个主意hoverEl 复制代码 代码如下: $.extend($.fn, {
hoverEl:function(State of Qatar{ var _this = $; var _t = setTimeout{ _this.attr;
}, 10); _this.attr; setTimeout{ clearTimeout( _this.attr; var _t =
setTimeout{ _this.removeAttr; _this.attr; },200卡塔尔(قطر‎; } }卡塔尔国;
其次定义样式,当特定attr被增加时 复制代码
代码如下: li[hover=on]{ background-image:-webkit-gradient(linear, 0%
100%, 0% 0%, from)!important; background-image:
-webkit-linear-gradient(top, #4286F5, #194FDB)!important; color:
white!important; cursor: pointer!important; } 调用示例: 复制代码 代码如下: $;

据他们说自身的品种实市场价格况,首如果几个关键点:

据说本身的系列推行意况,主纵然多少个关键点:

标签的外观难题很可恶,各种浏览器都不等同,单单就IE,叁个本子就叁个长相,还不可能用CSS修饰。

1:帮忙静态的树,即一回性将全体数额加载到客商端。2:异步树,即贰遍只加载一流或若干级节点,子节点能够异步加载数据。3:Checkbox树,用于选用等,最佳是能够帮忙节点级联4:能够世襲大数据量,并品质展现非凡5:能够在主流浏览器中运维优良

1:帮忙静态的树,即三遍性将全数数码加载到顾客端。
2:异步树,即三回只加载顶尖或若干级节点,子节点能够异步加载数据。
3:Checkbox树(大概是静态树也恐怕是异步树),用于选择(如选择组织部门,选拔数据字典项)等,最佳是能够援救节点级联(这么些是难题)
4:能够承袭大数据量,并质量表现卓绝
5:能够在主流浏览器中运维卓绝

在此将自己对的美化方法共享出来。优点:
仍保存使用,仅改动外观,不更改不干预Form行为,前期加载JS。

那笔者要塑造的TreeView便是为了落到实处这一个5个重视目标的。

那小编要制造的TreeView便是为了落实这么些5个至关心注重要目的的。

什么也不说了,都在代码里。复制代码
代码如下:$.ready { // 找寻须要美化的标记,大家用三个class名称 "beautify"
来鲜明,未有这些样式的则将被忽略 var selects = $; if {
//先在代码尾巴部分扩展三个

先来看下效果图

先来看下效果图

,用来承载和出示下拉框选项 $.append("

上海教室是中中原人民共和国行政区域的数据树,总共得节点是3500+。

vns威尼斯城官网登入 1

"State of Qatar; //挨个美化呗 selects.each { //给本函数下的 this
设置多少个外号,在底下的无名函数司令员会被用到 var select = this; //创设三个, .dummy 将用以大家对此类 进行特意样式定义 //同有时间将
的局地属性和体裁复制给这么些 dummy input //成立完后,将以此 插入 dom,
紧跟原 var input = $(""State of Qatar .attr("disabled", this.disabledState of Qatar .css("width",
parseInt + "px"State of Qatar .css("display", this.style.display卡塔尔(قطر‎ .insertAfter
.val(this.options[this.selectedIndex].text卡塔尔; //将 藏掉,不要在
.beautify 中去定义 display:none, 因为js加载失利时,我们还得用上它
this.style.display = "none"; // 当 被点击时 input.click {
//调出前边创造的

那么大家要动工了;

上海教室是炎黄行政区域的数据树,总共得节点是3500+。

,并清空内容 //将 的样式表传递给它,当须要对那个

1:第二个规定的节点Dom布局

那么我们要动工了;

开展修饰时,就靠那几个样式定义 var div = $ .empty(卡塔尔(قطر‎ .attr("class",
select.className卡塔尔国; //设置

相比较土的是table套table的(样式上好调节,不过大数据量,和档案的次序较深的树,这种构造自然顶不住的)
还应该有风姿洒脱种是比较卓绝的UL套LI的艺术,那是当今众多书选用的不二秘技如Jquery.treeview正是行使的这种格式,好处比较鲜明正是布局轻松,
何况在不扶持Js的浏览器上,相符也能表现出树的样子,可是Jquery.treeview的节点在IE下,特别是IE6下不可能被里面因素撑开,,请奇怪的场景(作者推测是因为使用padding来做缩进,margin-left:负值来决定Logo地点有关,然则改革起来难度也超级大),在这里种情形下书会变形就有这种难点,只可以通过设置节点的width来消除。

1:第八个规定的节点Dom布局(即用哪些的HTML来营造节点)

的增长幅度 //在那我们看清二个特殊的class名 "extend" //假使带有
.extend,表示宽度将受额外自定义调控;不然,宽度将私下认可与 风流罗曼蒂克致 $.hasClass
? div.css : div.css.innerWidth; //将 复制到

JQuery.treeview的节点构造

  • 比较土的是table套table的(样式上好调控,可是大数据量,和档次较深的树,这种组织自然顶不住的)
  • 还或者有少年老成种是相比独特的UL套LI的主意,那是前些天众多书选拔的诀要如Jquery.treeview正是选取的这种格式,好处相比较刚烈正是布局轻便,
    何况在不协助Js的浏览器上,相似也能表现出树的模样(这种状态实际上小编可以忽视),不过Jquery.treeview的节点在IE下,极其是IE6下无法被里面因素撑开,(IE7,8当达到一定深度时不可能撑开),请古怪的情况(笔者推断是因为运用padding来做缩进,margin-left:负值来调整Logo地点有关,不过改正起来难度也超级大),在这里种意况下书会变形(Jquery.treeview)就有这种主题材料,只好通过安装节点的width来减轻。

个中,一个 对应贰个 标志 for (var i = 0; i < select.options.length;
i++卡塔尔 { var item = select.options[i]; var a = $("").css("color", item.style.color卡塔尔 .addClass .html .appendTo; if (i ==
select.selectedIndex卡塔尔国 { a.addClass; } //当选项被点击时, 内容展示为对应
,关闭

Jquery.TreeView IE6 下 打开第三级即现身错位

vns威尼斯城官网登入 2

层,同不经常候将事件冒泡给原本的 a.click { var n = $; select.selectedIndex =
n; input.val(select.options[n].text卡塔尔(قطر‎; div.hide; }State of Qatar; }
//在这里间我们看清叁个不一样常常的class名 "noscroll"
//当选项过多时,暗中认可会让选项列表现身滚动条;但万大器晚成有 .noscroll
修饰,则强逼不现身滚动条 var noscroll = (select.options.length < 10
|| $.hasClass; if (/msie 6/i.test(window.navigator.userAgent卡塔尔国卡塔尔国 {
div.css("height", noscroll ? "auto" : "215px"卡塔尔国.css("overflow-y",
noscroll ? "hidden" : "scroll"卡塔尔; } else { div.css("max-height", noscroll
? "10000px" : "215px"卡塔尔; } //在这里地大家剖断三个特殊的class名 "onside"
//借使有 .onside 修饰,弹出的选项层就要侧边,不然是在上边 //注:
此处用到2个函数 locateBeside 和 locateBelow
是笔者js库中的方法,稍等别的给出 $.hasClass ? div.locateBeside :
div.locateBelow; //对每每点击 之类的事情,做一些智能调解 if
(window.activeDummySelect == select卡塔尔 { div.slideToggle; } else {
div.hide; window.activeDummySelect = select; }
//在有滚动条的情形下,我们必要将滚动条滚动到近日入选项的职位 if
(!select.selectedIndex > 6 && div[0].scrollHeight > div.height {
div.scrollTop((select.selectedIndex - 3) *
div[0].firstChild.offsetHeightState of Qatar; } }State of Qatar; }State of Qatar;
//最终别忘了:点击网页上的游离区域时,应该掩瞒

IE8下进展到第5级

JQuery.treeview的节点布局

$.click { if .is && !$.is { $; } }卡塔尔; } }卡塔尔国; 上边代码里说用到了2个点子:
locateBeside 和 locateBelow, 是本身js库中对 jQuery
的强大,顺便多赠送2个主意locate 和 locateCenter :-卡塔尔 代码如下:复制代码 代码如下: $.fn.extend({ locate:
function { if == "fixed"卡塔尔 { y -= $; } return this.css; }, locateBeside:
function { var p = $, w1 = $, w2 = this.outerWidth(State of Qatar, h2 =
this.outerHeight(卡塔尔, x = p.left + w1 + 5 + , y = p.top; if < x + w2卡塔尔(قطر‎ {
x = p.left - w2 - 5 - ; } if < y + h2State of Qatar { y = p.top - (y + h2 + 15 -
$; } return this.locate; }, locateBelow: function { var p = $; return
this.locate.outerHeight(卡塔尔(قطر‎ + 3 + ; }, locateCenter: function (卡塔尔 { return
this.locate - this.width.height / 2 + $ 卡塔尔(قطر‎; } }卡塔尔(قطر‎;
最终交给一些体裁表定义的事例,甚至演示效果:复制代码 代码如下: input.dummy {
background-image: url(/static/images/combo.gif卡塔尔(قطر‎; background-position:
right 12px; background-repeat: no-repeat; cursor: pointer !important; }
input.dummy:hover, input.dummy:focus { background-image:
url(/static/images/combo_hover.gif); } #dummydata { position:
absolute; z-index: 20; border: 1px solid #a4601e; background-color:
#393939; max-height: 200px; overflow: auto; } #dummydata a { display:
block; color: #ddd; line-height: 25px; text-indent: 3px; text-overflow:
ellipsis; } #dummydata a:hover { color: #198cef; text-decoration:
none; } #dummydata.matrix { width: 208px; padding: 5px; } /* matrix
效果 */ #dummydata.matrix a { float: left; width: 33%; }
#dummydata.matrix-large { width: 640px; padding: 5px; } /*
matrix-large 效果 */ #dummydata.matrix-large a { float: left; width:
25%; } #dummydata a.fullwidth { float: none; } #dummydata a.delimiter
{ float: none; width: 100%; height: 10px; visibility: hidden; }
#dummydata a.selected { color: yellow; } 下面样式定义的意义图

还会有意气风发部分是div套table的法门,CSDN的导航树就是这种,是种折中的方法,如下图所示

vns威尼斯城官网登入 3

html中要做的,只是加多少个class修饰

而自己利用的也是第三种艺术,不过缩进选用了补偿的点子,即缩进的职分用空白的图纸填充来制止Jquery.treeview的标题

Jquery.TreeView  IE6 下 张开第三级即现身错位

自个儿的树节点构造

vns威尼斯城官网登入 4
IE8下张开到第5级

规定了节点的HTML大家就足以来写CSS了。有了意义图,有个节点布局接着就编写CSS了

  • 还或然有部分是div套table的方法,CSDN的导航树正是这种,是种折中的方法(节点也不算太复杂,何况CSS也正如好写),如下图所示
    vns威尼斯城官网登入 5

下边是CSS的完好代码复制代码 代码如下: .ie
.bbit-tree .bbit-tree-bwrap{ } .bbit-tree ul,.bbit-tree li {
list-style-type:none; margin:0px; padding:0px; } .bbit-tree-body {
font-size:12px; } .bbit-tree-icon, .bbit-tree-ec-icon,
.bbit-tree-node-cb,.bbit-tree-elbow-line, .bbit-tree-elbow,
.bbit-tree-elbow-end, .bbit-tree-elbow-plus, .bbit-tree-elbow-minus,
.bbit-tree-elbow-end-plus, .bbit-tree-elbow-end-minus{ border: 0 none;
height: 18px; margin: 0; padding: 0; vertical-align: top; width: 16px;
background-repeat: no-repeat; } .bbit-tree-node-cb { height:16px; }
.bbit-tree-node-collapsed .bbit-tree-node-icon, .bbit-tree-node-expanded
.bbit-tree-node-icon, .bbit-tree-node-leaf .bbit-tree-node-icon{ border:
0 none; height: 18px; margin: 0; padding: 0; vertical-align: top; width:
16px; background-position:center; background-repeat: no-repeat; } .ie
.bbit-tree-node-indent img, .ie .bbit-tree-node-icon, .ie
.bbit-tree-ec-icon { vertical-align:middle !important; }
.bbit-tree-noicon .bbit-tree-node-icon{ width:0; height:0; } /* No line
styles 未有线的样式 */ .bbit-tree-no-lines .bbit-tree-elbow{
background:transparent; } .bbit-tree-no-lines .bbit-tree-elbow-end{
background:transparent; } .bbit-tree-no-lines .bbit-tree-elbow-line{
background:transparent; } /* Arrows Vista系统树的样式独有箭头*/
.bbit-tree-arrows .bbit-tree-elbow{ background:transparent; }
.bbit-tree-arrows .bbit-tree-elbow-plus{ background:transparent
no-repeat 0 0; } .bbit-tree-arrows .bbit-tree-elbow-minus{
background:transparent no-repeat -16px 0; } .bbit-tree-arrows
.bbit-tree-elbow-end{ background:transparent; } .bbit-tree-arrows
.bbit-tree-elbow-end-plus{ background:transparent no-repeat 0 0; }
.bbit-tree-arrows .bbit-tree-elbow-end-minus{ background:transparent
no-repeat -16px 0; } .bbit-tree-arrows .bbit-tree-elbow-line{
background:transparent; } .bbit-tree-arrows .bbit-tree-ec-over
.bbit-tree-elbow-plus{ background-position:-32px 0; } .bbit-tree-arrows
.bbit-tree-ec-over .bbit-tree-elbow-minus{ background-position:-48px 0;
} .bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-end-plus{
background-position:-32px 0; } .bbit-tree-arrows .bbit-tree-ec-over
.bbit-tree-elbow-end-minus{ background-position:-48px 0; }
.bbit-tree-elbow-plus, .bbit-tree-elbow-minus,
.bbit-tree-elbow-end-plus, .bbit-tree-elbow-end-minus{ cursor:pointer; }
.ie ul.bbit-tree-node-ct{ font-size:0; line-height:0; zoom:1; }
.bbit-tree-node{ white-space: nowrap; } .bbit-tree-node-el {
line-height:18px; cursor:default; /* cursor:pointer;*/ }
.bbit-tree-node a{ text-decoration:none; -khtml-user-select:none;
-moz-user-select:none; -webkit-user-select:ignore;
-kthml-user-focus:normal; -moz-user-focus:normal; -moz-outline: 0 none;
outline:0 none; } .bbit-tree-node a span{ text-decoration:none;
padding:1px 3px 1px 2px; } .bbit-tree-node .bbit-tree-node-disabled
.bbit-tree-node-icon{ -moz-opacity: 0.5; opacity:.5; filter: alpha; }
.bbit-tree-node .bbit-tree-node-inline-icon{ background:transparent; }
.bbit-tree-node a:hover{ text-decoration:none; } /* Fix for ie
rootVisible:false issue,矫正四个IEdebug */ .bbit-tree-root { zoom:1; }
/***********此间是Logo了,能够在那处替换哦*****************/
.bbit-tree-node-expanded .bbit-tree-node-icon{
background-image:url(images/tree/folder-open.gif); }
.bbit-tree-node-leaf .bbit-tree-node-icon{ background-image:url; }
.bbit-tree-node-collapsed .bbit-tree-node-icon{
background-image:url(images/tree/folder.gif); } .bbit-tree-node-loading
.bbit-tree-node-icon{ background-image:url(images/tree/loading.gif)
!important; } .bbit-tree-node .bbit-tree-node-inline-icon {
background-image: none; } .bbit-tree-node-loading a span{ font-style:
italic; color:#444444; } .bbit-tree-lines .bbit-tree-elbow{
background-image:url(images/tree/elbow.gif); } .bbit-tree-lines
.bbit-tree-elbow-plus{ background-image:url(images/tree/elbow-plus.gif);
} .bbit-tree-lines .bbit-tree-elbow-minus{
background-image:url(images/tree/elbow-minus.gif); } .bbit-tree-lines
.bbit-tree-elbow-end{ background-image:url(images/tree/elbow-end.gif); }
.bbit-tree-lines .bbit-tree-elbow-end-plus{
background-image:url(images/tree/elbow-end-plus.gif); } .bbit-tree-lines
.bbit-tree-elbow-end-minus{
background-image:url(images/tree/elbow-end-minus.gif); }
.bbit-tree-lines .bbit-tree-elbow-line{
background-image:url(images/tree/elbow-line.gif); } .bbit-tree-no-lines
.bbit-tree-elbow-plus{
background-image:url(images/tree/elbow-plus-nl.gif); }
.bbit-tree-no-lines .bbit-tree-elbow-minus{
background-image:url(images/tree/elbow-minus-nl.gif); }
.bbit-tree-no-lines .bbit-tree-elbow-end-plus{
background-image:url(images/tree/elbow-end-plus-nl.gif); }
.bbit-tree-no-lines .bbit-tree-elbow-end-minus{
background-image:url(images/tree/elbow-end-minus-nl.gif); }
.bbit-tree-arrows .bbit-tree-elbow-plus{
background-image:url(images/tree/arrows.gif); } .bbit-tree-arrows
.bbit-tree-elbow-minus{ background-image:url(images/tree/arrows.gif); }
.bbit-tree-arrows .bbit-tree-elbow-end-plus{
background-image:url(images/tree/arrows.gif); } .bbit-tree-arrows
.bbit-tree-elbow-end-minus{
background-image:url(images/tree/arrows.gif); } /*TreeNode
选中的Disabled的有些颜色,字体样式*/ .bbit-tree-node{ color:#000;
font: normal 11px arial, tahoma, helvetica, sans-serif; }
.bbit-tree-node a{ color:#000; } .bbit-tree-node a span{ color:#000; }
.bbit-tree-node .bbit-tree-node-disabled a span{ color:gray !important;
} .bbit-tree-node .bbit-tree-node-over { background-color: #eee; }
.bbit-tree-node .bbit-tree-selected { background-color: #d9e8fb; }

 

上边了树的基本样式外,定义了一个有+号带line的样式和+号不带line的体制

 

那正是十二分+号带line的体制

 

css中所用到的持有图片

而自作者利用的也是第两种方式,可是缩进选择了增补的措施,即缩进的职位用空白的图样填充来幸免Jquery.treeview的标题

2:明确数据构造复制代码 代码如下: var
menudata = [{ id: "0.1",//唯一的ID即可 text: "Beyondbit UI Demo",
hasChildren: true, isexpand: true, complete: true, ChildNodes: [{ id:
"0.1.1", text: "日期接收", hasChildren: true, isexpand: false, complete:
true, ChildNodes: [{ id: "0.1.1.1", text: "控件演示", value:
"Testpages/datepicker德姆o.htm", hasChildren: false, isexpand: false,
complete: true, ChildNodes: null }, ... ]
这样的构造有个好处就多少本人是带档期的顺序的,非常便利遍历,在后边的级联关联合中学会看见3: 面子做好了那就初始做里子了,编写脚本
笔者是JQuery得拥护者,所以自然js的框架自然是行使Jquery了
先上个完整代码,再逐条解析 复制代码
代码如下:
/****************************************
author:xuanye.wan@gmail.com page:
***************************************/
{ $.fn.swapClass = function { return this.removeClass; }
$.fn.switchClass = function { if { return this.swapClass; } else {
return this.swapClass; } } $.fn.treeview = function { var dfop = {
method: "POST", datatype: "json", url: false, cbiconpath:
"/images/icons/", icons: ["checkbox_0.gif", "checkbox_1.gif",
"checkbox_2.gif"], showcheck: false, //是或不是出示选用 oncheckboxclick:
false,
//当checkstate状态变化时所接触的事件,可是不会触发因级联选择而孳生的变化
onnodeclick: false, cascadecheck: true, data: null, clicktoggle: true,
//点击节点张开和减弱子节点 theme: "bbit-tree-arrows" //bbit-tree-lines
,bbit-tree-no-lines,bbit-tree-arrows } $.extend; var treenodes =
dfop.data; var me = $; var id = me.attr; if (id == null || id == ""State of Qatar {
id = "bbtree" + new Date; me.attr; } var html = []; buildtree;
me.addClass.html; InitEvent; html = null; //预加载图片 if { for (var i =
0; i < 3; i++卡塔尔 { var im = new Image; im.src = dfop.cbiconpath +
dfop.icons[i]; } } //region function buildtree { ht.push("

vns威尼斯城官网登入 6

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=4301

上一篇:

下一篇:

相关文章