The invention provides a web form design method based on mask comprises the following steps: to build the form required control library, and configure the control in the control selection interface; a list of attributes corresponding construction and control, and the configuration in the attribute list attribute editing interface; construction form preview interface, form preview interface according to the current design of the contents of the form do show; construction is on the form preview interface area above the mask, intercept the form preview interface keyboard and mouse operation through the mask; when the mouse click form preview interface, mask capture mouse events, according to the location of the mouse, the location of the control, which will the control set is selected, and in the editing interface display of the control value. The present invention provides a better user experience, and forms and controls are displayed in the form preview interface of the form designer in full accordance with the actual effect, and the appearance and the actual effect of the control are exactly the same.
【技术实现步骤摘要】
基于蒙版的web表单设计方法
本专利技术涉及一种基于蒙版的web表单设计方法。
技术介绍
所见即所得的表单设计器,就是为用户提供一个可即时看到表单样子的WebHTML表单设计器。在设计器中可以向表单插入新的控件,或者修改控件的属性,修改后的表单的样子即时的就可以显示出来。传统的表单设计器主要有以下两种:1.使用图像等模拟控件,只能实现简单的布局设计,这种方式的控件是用图像模拟显示的,并不能达到真正的所见即所得的效果,且控件的布局只能使用绝对坐标定位,对各种屏幕的分辨率支持很差;2.在表单中及控件中额外加入事件和代码用于处理设计事件,这种设计器对原始控件对各种事件的响应会对设计器用户造成干扰,界面友好性不高。并且由于需要在表单中添加各种辅助信息,也并不完全是所见即所得的表单设计器。
技术实现思路
针对所提到的问题,本专利技术提供了一种基于蒙版的web表单设计方法,设计界面包括控件选择界面、属性编辑界面和表单预览界面,步骤包括:1)构建表单所需控件的控件库,并将控件按照列表的格式配置在所述控件选择界面上;2)构建与所述控件各自对应的属性列表,并将属性列表配置在所述属性编辑界面上;3)构建表单预览界面,表单预览界面按照当前设计表单的内容做展现;4)构建位于表单预览界面区域上方的蒙版,通过蒙版拦截对表单预览界面的鼠标及键盘操作;5)当鼠标点击所述表单预览界面时,鼠标事件会在蒙版上触发,蒙版捕获鼠标事件时,根据鼠标的位置匹配出该位置所在的控件,从而将该控件设置为选中状态,并且在属性编辑界面显示该控件的属性值;6)当控件属性或者表单属性发生改变后,在所述表单预览界面显示修 ...
【技术保护点】
基于蒙版的web表单设计方法,设计界面包括控件选择界面、属性编辑界面和表单预览界面,其特征在于,步骤包括:1)构建表单所需控件的控件库,并将控件按照列表的格式配置在所述控件选择界面上;2)构建与所述控件各自对应的属性列表,并将属性列表配置在所述属性编辑界面上;3)构建表单预览界面,表单预览界面按照当前设计表单的内容做展现;4)构建位于表单预览界面区域上方的蒙版,通过蒙版拦截对表单预览界面的鼠标及键盘操作;5)当鼠标点击所述表单预览界面时,鼠标事件会在蒙版上触发,蒙版捕获鼠标事件时,根据鼠标的位置匹配出该位置所在的控件,从而将该控件设置为选中状态,并且在属性编辑界面显示该控件的属性值;6)当控件属性或者表单属性发生改变后,在所述表单预览界面显示修改完后即显示最新样式的效果。
【技术特征摘要】
1.基于蒙版的web表单设计方法,设计界面包括控件选择界面、属性编辑界面和表单预览界面,其特征在于,步骤包括:1)构建表单所需控件的控件库,并将控件按照列表的格式配置在所述控件选择界面上;2)构建与所述控件各自对应的属性列表,并将属性列表配置在所述属性编辑界面上;3)构建表单预览界面,表单预览界面按照当前设计表单的内容做展现;4)构建位于表单预览界面区域上方的蒙版,通过蒙版拦截对表单预览界面的鼠标及键盘操作;5)当鼠标点击所述表单预览界面时,鼠标事件会在蒙版上触发,蒙版捕获鼠标事件时,根据鼠标的位置匹配出该...
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。