360UI框架界面框架(企业不用再为美工发愁).ppt

举例4：弹出式提示框 写如下代码： $.messager.show(0,提示内容！,10000,message.mp3); 就创建了一个弹出式提示框。效果如下： 4个参数分别用来设置：标题、内容、弹出后停留时间、弹出时播放的声音文件 举例5：文本框 为普通的文本框标签添加watermark=“xxx”则有水印功能： input type=text watermark=输入查询条件/ 设置文本框的clearable属性为true,就会在输入时出现一个小叉子，用于清空： input type=text clearable=true/ 对文本框设置maxNum属性可以限制文本框的最大输入字数，并在输入时出现提示： input type=text maxNum=10/ 对密码框设置checkStrength=true会检查密码强度： input type=password checkStrength=true/ 举例6：单选下拉框 渲染的下拉框的写法和用法与原始的select完全一样。如 selectoption value=1新增图片/optionoption value=2维护图片/option/select 当为select标签添加editable=“true”时就变成可编辑的下拉框 添加colNum=“xx”就可以自定义下拉框的列数 添加childDataPath设置数据来源并添加childId指定想要联动的下拉框就创建了联动下拉框 举例7：日期控件 为普通文本框添加class=“date” ，如下： input type=text class=date/ 就变成一个日期控件。效果如右侧所示： 再添加dateFmt属性可以设置日期控件的现实方式 ，例如： input type=text class=date dateFmt=HH:mm:ss/ 就可以只显示时间，效果如右侧所示： 举例8：表单验证 对需要验证的表单元素加上class=“validate[XXX]”，其中XXX是验证规则，例如required表示必填项，length[0,20]限制字符长度在20字以内。验证规则可写多个。代码如下： input type=text class=validate[required,custom[chinese],length[0,20]]/ 则该文本框属于必填项，只能输入中文，不超过20个字符。若填写不符合规则，效果如下： 框架中自带了10多种验证规则，另外还可以通过正则表达式自定义验证规则。 亮点8：非常丰富的皮肤样式 十大亮点 在前面以天蓝色风格为例展示了框架的10几种不同结构的主页和内容模板以及各种组件。除了天蓝色风格外，框架本身还自带了10多套不同风格样式的皮肤。 只需要更改主页的两个参数值即可实现切换成另一种风格（支持动态换肤） 。 同时也支持用户自己设计皮肤。 12种不同结构的主页中每种结构都有8-10套皮肤 切换成亮蓝色风格 切换成橙色风格 组件自动换肤 当更改主页参数进行换肤后，系统的所有内页与组件都会自动获取主页的配置来更换风格。无需对每个内页再做配置。例如更换了橙红色的风格，则组件风格变成如下效果： 多达140套精心设计制作的登录页面皮肤 登录页风格之一 登录页风格之二 亮点9：完美的浏览器兼容性 十大亮点 框架在整个制作过程，通过多种兼容性技术一直确保在各主流浏览器中做到兼容。 目前可以与以下主流浏览器完美兼容： windows中： IE6、IE7、IE8、FireFox、Chrome、Safira Linux中： FireFox 亮点10：提供组件与特效的分离版本 十大亮点 如果你的WEB应用只需要使用框架的某几个组件或特效，那么不必将整套框架机制全部引入到项目中，360UI框架还提供的组件与特效的分离版本。 分离版本将360UI框架集成的100多种组件和特效进行分离，每种组件或特效独立为一个目录。使用时只要找到相应的目录参照实例代码的做法即可。 组件与特效的分离版本 在线版访问地址： 举例7：上传控件(input:file) 支持自定义风格样式； 上传文件后鼠标悬停会提示完整路径。 举例8：单选下拉框(select) 支持自定义风格样式； 在IE6下不会处于层的上方； 支持分组、自定义列数、可编辑、无限级联动等功能 举例9：多选下拉框(select:multiple) 支持自定义风格样式； 在IE6下不会处于层的上方； 选择后，鼠标悬浮会提示所有选中的选项； 可通过属性做个性化配置，如某项始终处于最上、最多允许选择几项等。 举例10：警告框/确认框(alert/confirm) 支持自定义风格样式； 警告框更加友好。 举例11：弹出窗口(window) 支持自定义风格样式； 可无限层级弹出