计算机服务器

我练习一下,以免不时之需。

树形菜单不过就是把普通菜单重新排列一下,看起来像树形而已。

上图京东的菜单,给他多几个嵌套,然后添加收缩伸展事件,差不多就行了。

给个例子:复制代码 代码如下:

- 标题1

-   内容1
-   内容2
-   内容3
-   内容4
-   ### 标题1_1

    -   内容1_1
    -   内容1_2
    -   内容1_3
    -   内容1_4

-   ### 标题1_2

    -   内容1_1
    -   内容1_2
    -   内容1_3
    -   内容1_4

然后添加事件: 复制代码 代码如下: var innerText = document.innerText ? 'innerText' : 'textContent'; var span = document.createElement; span[innerText] = '-'; span.className = 'controlSymbol'; function ${ return document.getElementById{ var args = arguments; var ret = []; for(var i = 0; i < args.length; i++){ var temp = document.getElementsByTagName; try{ ret = ret.concat(Array.prototype.slice.call{ for(var j = 0; j < temp.length; j++){ ret.push; } } } return ret; } function addSymbol{ var innerSpan = span.cloneNode; h.insertBefore(innerSpan,h.firstChild); } function next{ while{ if(el.nextSibling.nodeType == 1){ return el.nextSibling; } el = el.nextSibling; } return null; } var outerWrap = $; var hs = $_; for(var i = 0 ; i < hs.length; i++){ addSymbol; } outerWrap.onclick = function{ event = event || window.event; var t = event.target || event.srcElement; if(t.className == 'controlSymbol'){ var sn = next; var snStyle = next.style; snStyle.display = (snStyle.display == 'block' || snStyle.display == '') ? 'none' : 'block'; t[innerText] = t[innerText] == '+' ? '-':'+'; } } 不过用的多的可能是动态的添加菜单,也就是动态的生成HTML序列。 一个例子: 复制代码 代码如下: var tree = { '标题2':[ '内容1', '内容2', '内容3', '内容4', {'标题2_1':['内容2_1','内容2_2','内容2_3','内容2_4']}, {'标题2_2':['内容2_1','内容2_2','内容2_3','内容2_4']}, '内容5' ] } var fragment = document.createElement; function concatTree{ var array = []; for{ array.push; array.push; array.push; for(var i = 0; i < tree[key].length; i++){ if(tree[key][i].constructor == Object){ array = array.concat(concatTree; }else{ array.push; array.push; array.push; } } array.push; } return array; } fragment.innerHTML = concatTree; $.appendChild; 像上面的方法也可以用来生成表格,扯远了,比如 复制代码 代码如下: var oArray = { thead : ['标题一','标题二','标题三','标题四'], tbody : [巴黎人电玩 , [1,2,3,4], [5,6,7,8], [9,10,11,12], [13,14,15,16], [17,18,19,20], [21,22,23,24] ], tfoot : [25,26,27,28] } function createTable{ var html = []; html.push; for{ html.push; if{ assemTag }else if{ assemTag }else if{ for(var k = 0, len_1 = arr[key].length; k < len_1; k++){ assemTag(arr[key][k],html,'td') } } html.push; } html.push; var temp = document.createElement; temp.innerHTML = html.join; return temp.firstChild; } function assemTag{ html.push; var s = ''; var e = ''

  • tag + '>'; for(var j = 0, len = array.length; j < len; j++){ html.push; html.push; html.push; } html.push; } document.body.appendChild; 一般可以直接创建一个节点元素,然后直接设置innerHTML,不过innerHTML虽说是IE先搞起的,但是IE又最不彻底,对于table和tr是不可设置innerHTML的,所以只能假div之手了。
其他新闻
友情链接

公司名称巴黎人电玩
版权所有:Copyright © 2015-2019 http://www.zhongqiangjy.com. 巴黎人电玩有限公司 版权所有

友情链接

Copyright © 2015-2019 http://www.zhongqiangjy.com. 巴黎人电玩有限公司 版权所有
公司地址http://www.zhongqiangjy.com