最近做一个模板打印的项目调研。
要求实现Web模板的定制和打印(套打),看网上好多都是定制死的模板,感觉不方便,如果出现打飞或者什么的,那么需要手动调整很麻烦,于是自己动手写了个定制模板的,见下:
[img]http://dl.iteye.com/upload/attachment/163811/638949ab-56d1-3ac1-bd11-2038f08fa218.png[/img]
由于是测试,所以把分页打印和模板定制的功能写在一起了,赫赫。
不过JS基本是模板相关的嘎。
实现思路如下:
1.拖拽功能:
document.onmousedown : 拖拽开始的事件
document.onmouseup : 释放的事件
document.onmousemove : 拖拽的事件
如果判断为是可以拖拽的控件(lab , table etc...)那么就移动它到目前鼠标所在的位置,并且把相关的x/y设置到Property-Window里面去(这个很像.NET-IDE哦^__^)
2.回滚功能:
在drag-down以后,记录一个history-array,push进去类似{id, x, y}这样结构的数据,表示哪个控件被移动到了哪个位置上
如果点击Back,那么就会逆向查找这个history-array,找到其前一个位置,回滚到这个位置上即可(如果找不到前一个位置,回滚到初始位置即可)
3.PropertyWindow的设置功能:
把值直接设置到当前对应的控件上即可(红色标明当前控制的控件)
Save/Cancel即记录进对应的DB,保存成模板,不过这个sample并没有完全实现
详细见代码把,赫赫。
以上Over ^__^
Shadow
S.H
2009/11/03 16:59:00
要求实现Web模板的定制和打印(套打),看网上好多都是定制死的模板,感觉不方便,如果出现打飞或者什么的,那么需要手动调整很麻烦,于是自己动手写了个定制模板的,见下:
[img]http://dl.iteye.com/upload/attachment/163811/638949ab-56d1-3ac1-bd11-2038f08fa218.png[/img]
由于是测试,所以把分页打印和模板定制的功能写在一起了,赫赫。
不过JS基本是模板相关的嘎。
实现思路如下:
1.拖拽功能:
document.onmousedown : 拖拽开始的事件
document.onmouseup : 释放的事件
document.onmousemove : 拖拽的事件
如果判断为是可以拖拽的控件(lab , table etc...)那么就移动它到目前鼠标所在的位置,并且把相关的x/y设置到Property-Window里面去(这个很像.NET-IDE哦^__^)
2.回滚功能:
在drag-down以后,记录一个history-array,push进去类似{id, x, y}这样结构的数据,表示哪个控件被移动到了哪个位置上
如果点击Back,那么就会逆向查找这个history-array,找到其前一个位置,回滚到这个位置上即可(如果找不到前一个位置,回滚到初始位置即可)
3.PropertyWindow的设置功能:
把值直接设置到当前对应的控件上即可(红色标明当前控制的控件)
Save/Cancel即记录进对应的DB,保存成模板,不过这个sample并没有完全实现
详细见代码把,赫赫。
以上Over ^__^
Shadow
S.H
2009/11/03 16:59:00