三级菜单选择器

 

 

[置顶] Lite-Ext 适合WebPage的轻量级Ext

在 google code 持续更新，这里停止

演示@google code  

 

   实现一个这样的功能 ， 可以将 树的两层节点 平面显示出来 ，第三级 适时弹出 ，51job 有这个功能，去看了一下 ，发现 51job 是用 table 来实现的 ，不符合标准 ，且不具备伸缩性(任意行列数显示)， 就自己 用 ul li 实现了一下 ，打算作为一个基础类库以后加以完善。

ps :  重构了一个页面  通过了 xhtml 1.0 css2.1 验证 ，还不很规范 ，树用在 这里 了

 

 

效果图  (测试代码附件 zip)

425

 

 

 

430

5.0

 

 

5.6

 

6.0

 

 

6.7

 

 

 

7.1

 

 

操作方式和 51job 一样 ，点击 黑字节点 可以弹出 第三级子菜单。

 

 

主要是一个  多选类 ，基础dom操作 采用 extjs-core ，说明先写在代码里了

 

/**
author : yiminghe

version : v4(20090326) 创建项目,原型完成
v4.1(20090326) fix ie7 clear bug 
v4.2(20090328) use display mode to avoid scrollbar
v4.2.5(20090328) modal show and disable level1 selection
v4.3(20090328) level2 show change , level2 and level3 can't be selected simultaneously
v4.5(20090328) 增加将level3弹出框限制在树控件中，提高效率(level3弹出框需要时才创建) 
v5.0(20090329) 界面进行革新优化，支持拖放
v5.1(20090330) 在li上支持点击，单选支持（没有弹出提示框，直接替换）,支持第三级菜单拖放,已选择框和树节点框通过相同后缀id联系 
v5.2(20090407) 修改 css html 支持 w3c css2.1 ,修改id生成，可以多颗重复数据树生成
v5.3(20090417) 清理浮动css xhtml整理
v5.5(20090422) 大幅度清除无用生成标签(span div),增加取消回调,已选择部分压缩空间,
v5.6(20090423) 采用ext事件处理机制，抽象出window
v6.0(20090427) 与windowlite 结合，支持拖放，调节大小
v6.5(20090514) javascript 大部分重写,两层区域树结构一次生成添加到DOM，采用事件委托，只设置三组事件处理函数，两层区域，弹出菜单区域，选择区域。
v6.6(20090518) 利用ext的css selector功能修复（6.5之前功能） 选择个数限制，二级三级菜单项不能同时选择，即全部和底下的菜单不能同时选中。
v6.7(20090525) 修复ie7，8显示细节问题,已选择移到下面和按钮临近
v7.0(20090919) 整合windowlite 2.9.8
v7.1(20091009) 界面优化大幅变动，增加操作方便（二级框选择，取消叉与阴影）

Any problem contact [email protected]
**/

ps:事件委托的好处

从6.5开始采用事件委托机制，避免事件处理函数的大量绑定，对系统有很大的效率提升，理论基础：

（http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/ ）

 

1.避免陷入大量的事件处理函数的管理之中。

2.事件处理函数的减少意味着更少的内存占用

3.用户代码和dom的联系减少，可以提高系统性能。（dom还是很昂贵的）

4.不用担心用innerHTML冲掉了儿子元素已经绑定的事件处理函数，由父节点处理即可。