zj2092 发表于 2017-3-30 09:45:11

Web模板定制 (JS + PHP)

最近做一个模板打印的项目调研。
要求实现Web模板的定制和打印(套打),看网上好多都是定制死的模板,感觉不方便,如果出现打飞或者什么的,那么需要手动调整很麻烦,于是自己动手写了个定制模板的,见下:





由于是测试,所以把分页打印和模板定制的功能写在一起了,赫赫。
不过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
页: [1]
查看完整版本: Web模板定制 (JS + PHP)