易创论坛 - 因你而精彩
  [Search] 搜索   [Recent Topics] 最新主题   [Hottest Topics] 热门主题   [Members]  会员列表   [Groups] 返回首页 
[Moderation Log] 管理日志   [Register] 会员注册 / 
[Login] 登入 
鼠标拖拽改变表格列宽荟萃  XML
论坛首页 » Ajax技术交流
发表人 内容
eworkday



注册时间: 17/02/2009 09:38:31
文章: 761
离线

以下是网上搜集的有关鼠标拖拽改变表格列宽的实现代码,非原创。

1.第一种实现
在IE6测试成功,实现的效果为被拖拽列的列宽改变,表的总宽度同步改变,其他列宽不变。



2.第二种实现
在IE6、FireFox3测试成功,实现的效果为被拖拽列的列宽改变,表的总宽度同步改变,其他列宽不变。
评价:设计非常优秀,可复用性强,高聚合低耦合。虽然仍然需要完善,但整体的代码风格可保留。任何一个table,只需要在js中将此table的id作为参数实例化一个OpeTable对象即可。

html:

js:


css:




附注:
在改变Body的MouseMove事件时,用到了一个BodyEventsManager类,原因是如果真的在一个项目中,可能原来Body就已经定义了MouseMove方法,如果直接覆盖就恢复不了。在BodyEventsManager中有一个Stack,可以把原有的方法保留住,这样就算是多次改写,只要代码中注意用BodyEventsManager.pop("onmousemove")进行还原,程序是不会出问题的。

附件中的页面可以看到最后实现的效果,在IE和FireFox下通过测试。


3.第三种实现
没有测试过,代码也不全,但有一定参考价值


这篇文章被编辑了 9 次. 最近一次更新是在 07/03/2009 18:05:16


易创天成
[MSN]
 
论坛首页 » Ajax技术交流
前往:   
Powered by JForum 2.1.8 © JForum Team. Improved by EWorkday