三级菜单选择器

yiminghe

 
 
[置顶] 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 : yimingheversion : v4(20090326) 创建项目,原型完成v4.1(20090326) fix ie7 clear bug v4.2(20090328) use display mode to avoid scrollbarv4.2.5(20090328) modal show and disable level1 selectionv4.3(20090328) level2 show change , level2 and level3 can't be selected simultaneouslyv4.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事件处理机制，抽象出windowv6.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.8v7.1(20091009) 界面优化大幅变动，增加操作方便（二级框选择，取消叉与阴影）Any problem contact hym_sunrise@126.com**/

ps:事件委托的好处


从6.5开始采用事件委托机制，避免事件处理函数的大量绑定，对系统有很大的效率提升，理论基础：
（http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/）

 
1.避免陷入大量的事件处理函数的管理之中。
2.事件处理函数的减少意味着更少的内存占用
3.用户代码和dom的联系减少，可以提高系统性能。（dom还是很昂贵的）

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