设计页面-层 Panel

作者在 2017-08-17 16:32:25 发布以下内容

传统软件项目开发时,针对每个业务单据页面需要每控件一个一个的来设计,同时需要在页面功能中对每个控件的属性进行判定处理,尤其是页面风格布局样式需要花去一大半的时间,并且后续要想修改是非常麻烦繁琐,这样就导 致设计完成一个功能页面需要很长时间。问题是正常情况下很多功能是非常通用的,这就造成了重复劳作;如何快速设计页面风格,如何快速的将常用功能集成起来,供后续直接调用使用,并且后续只要修改一个地方,凡是调用的地方就自动变更了,如何让设计人员能通过可视化的简单配置或简单的JS编写就能达到各种类型表单页面设计要求如何提高开发效率,如何合理分配任务,如何快速维护响应...... 在这样的思路基础上,结合软件项目开发经验,开发设计了可视化页面设计工具。通过页面设计能快速达到以上效果,下面就来看看吧!

层 Panel

             层Panel在网页中就是DIV, 在设计器中我们习惯称呼于Panel层;其控件属性包含三部分:基本属性、控件样式、控件事件;

一、基本属性

20160413093806_0268.png (上传于2017-08-17 16:32:25)
20160413093806_0268.png

控件中文:控件ID,唯一标记控件的编码,可以在右边的部件属性中修改;在一个页面中,控件名称不允许重复;

中文标题:填写此控件的中文描述名称

外文标题:填写此控件其他语种描述;

二、控件样式

控件样式通过此定义能实现所见即所得的网页控件;

20160413093832_1070.png (上传于2017-08-17 16:32:25)
20160413093832_1070.png

定位模式:表示控件在网页端的定位方式,一般使用绝对定位模式,但是系统也支持相对定位和静态模式;但是
          非绝对定位模式下,网页控件的布局
就会显得比较凌乱;所以一般建议使用绝对定位模式;

是否隐藏:设置控件是否在网页上面显示;

宽度模式:设置控件的宽度是采用百分比还是绝对大小的方式;如果采用百分比时;控件的宽度计算方式为:当
          前控件的起点坐标与当前页面的宽度
大小相减再乘以百分比来设置控件的宽度;

高度模式:设置控件的高度模式,定义含义跟宽度模式一样,只不过比较对象是页面的高度;

控件样式:为了简化输出HTML网页文件的大小,所以针对控件都有一个默认的控件样式,此样式是直接采用整体
          的CSS里面通用的;自定义样式,
是直接写在控件的Style样式中;如选择自定义样式,则可以定义设
          控件的外观字体等;

背景颜色:设置控件的背景颜色;

边框线型:设置控件的边框线型,虚线、实线、点线;

边框颜色:设置控件的边框线的颜色;

边框宽度:设置层的外边框的宽度;

三、控件事件

    针对层控件,我们也定义支持了层的单击事件,一般情况下很少用到;

20160413093954_2222.png (上传于2017-08-17 16:32:25)
20160413093954_2222.png

四、功能示范

    通过实例示范层的定义及显示;定义设置层的样式:

20160413094010_1035.png (上传于2017-08-17 16:32:25)
20160413094010_1035.png

网页预览效果:

20160413094025_8100.png (上传于2017-08-17 16:32:25)
20160413094025_8100.png




默认分类 | 阅读 2173 次
文章评论,共0条
游客请输入验证码
文章归档
最新评论