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

CSS库包括内容
• • • • 控制基本布局（浮动 对齐 行高等） 控制表现（宽高、颜色、字号、缩进） 控制定位 （上下左右的偏移量） 图标库
图标库
图标库集成了大量的图标。使用起来非常简单。例如下面代码：
<span class="icon_edit">修改</span>
就创建了一个修改图案的图标。 图标除了可以单独使用，还可与其他组件合用。例如可以为按钮、菜单项、工具条等添加图标，如：
可以设置出现水印；
可以设置在输入时出现小叉子，用于清除输入的文字； 可以设置最大允许输入数，并出现剩余字数提示； 密码框会自动检测大写键是否开启； 密码框可以设置检测密码强度。
举例4：文本域(textarea)
鼠标悬停和点击分别有变色效果； 可以设置出现水印； 可以设置最大允许输入数，并出现剩余字数提示； 可以设置通过拖拽或回车来动态增大文本域尺寸。
举例2：数据表格(table)
表格隔行同色，鼠标移入和点击分别有变色效果； 表头可固定，如果是排序模式表头会出现箭头并响应鼠标移入和点击； 如果第一列是checkbox可以自动添加全选按钮； 表格每项额外功能都可通过参数灵活配置
举例3：文本框/密码框(input:text/password)
鼠标悬停和点击分别有变色效果；
则该文本框属于必填项，只能输入中文，不超过20个字符。若填写不符合规则，效果如下：
框架中自带了10多种验证规则，另外还可以通过正则表达式自定义验证规则。
十大亮点
亮点8：非常丰富的皮肤样式
• 在前面以天蓝色风格为例展示了框架的10 几种不同结构的主页和内容模板以及各种 组件。除了天蓝色风格外，框架本身还自 带了10多套不同风格样式的皮肤。
对文本框设置maxNum属性可以限制文本框的最大输入字数，并在输入时出现提示：
<input type="text" maxNum="10"/>
对密码框设置checkStrength="true"会检查密码强度：
<input type="password" checkStrength="true"/>
举例10：警告框/确认框(alert/confirm)
支持自定义风格样式；
警告框更加友好。
举例11：弹出窗口(window)
支持自定义风格样式； 可无限层级弹出窗口； 可通过参数做个性化配置。
十大亮点
亮点4：新增非常多的实用组件和特效
以下只展示了部分组件，更多组件请访问在线版
举例1：浮动面板
并且向左偏移10px，一般的做法是，先为标签的class起个名字，html如下：
• <span class="style1">要处理的文本</span> 然后再写css
•
.style1{padding-left:5px;color:red;}
如果使用css库，则只要
•
<span class="padding_left10 red">要处理的文本</span>
360UI界面集成框架
产品介绍
概述
• “360UI”网页界面集成框架是一套完整的
BS模式系统界面解决方案。提供给设计和
开发WEB应用的人员使用。适合用于自动
化办公、电子政务和RIA应用等系统的开发
中。
特点
• 本框架采用基于模板开发的理念，让使用
者在开发系统时能够无需关心界面表现和 兼容性等方面，通过简单的复制粘贴和非 常小的修改量就能够方便地制作出精致美 观、兼容性强的系统界面，从而把精力集 中在系统功能的设计和实现上，提高开发 效率，降低开发成本。
十大亮点
亮点1：十余套各种结构的主页
每套主页都有很多种不同风格的皮肤，下面是以 天蓝色风格为例。关于框架皮肤将在后面介绍。
结构1：纵向抽屉式导航
结构2：纵向多级菜单导航
结构3：纵向标签式导航
结构4：树结构导航导航
结构5：纵向二级列表导航
结构6：纵向抽屉式图标导航
结构7：横向多级菜单导航
举例2：数据表格
举例3：表单样式
举例4：表单验证
举例5：表单拆分
举例6：多层嵌套
举例7：EXT布局模式
十大亮点
亮点3：对网页原有组件进行改进
以下只展示了部分组件，更多组件请访问在线版
举例1：信息提示（title）
鼠标移入后立刻出现； 改进了提示框的样式； 支持内嵌HTML；
支持自定义提示框风格。
多达140套精心设计制作的登录页面皮肤
登录页风格之一
登录页风格之二
十大亮点
亮点9：完美的浏览器兼容性
• 框架在整个制作过程，通过多种兼容性技术 一直确保在各主流浏览器中做到兼容。 • 目前可以与以下主流浏览器完美兼容： windows中： IE6、IE7、IE8、FireFox、Chrome、Safira Linux中： FireFox
举例6：单选下拉框
渲染的下拉框的写法和用法与原始的select完全一样。如
<select><option value="1">新增图片</option><option value="2">维护图片</option></select> 当为select标签添加editable=“true”时就变成可编辑的下拉框 添加colNum=“xx”就可以自定义下拉框的列数
举例8：表单验证
对需要验证的表单元素加上class=“validate[XXX]”，其中XXX是验证规则，例如required表示必填项， length[0,20]限制字符长度在20字以内。验证规则可写多个。代码如下：
<input type="text" class="validate[required,custom[chinese],length[0,20]]"/>
举例5：按钮(input:button)
鼠标悬停有变色效果； 可以为按钮增各种各样的小图标。
举例6：多选按钮(input:checkbox)
支持自定义风格样式； 鼠标移入文字就会出现手型来响应点击。
举例7：上传控件(input:file)
支持自定义风格样式； 上传文件后鼠标悬停会提示完整路径。
• 只需要更改主页的两个参数值即可实现切 换成另一种风格（支持动态换肤） 。 • 同时也支持用户自己设计皮肤。
12种不同结构的主页中每种结构都有8-10套皮肤
切换成亮蓝色风格
切换成橙色风格
组件自动换肤
当更改主页参数进行换肤后，系统的所有内页与组件都会自动获取主页的配置来更换风格。无需对每 个内页再做配置。例如更换了橙红色的风格，则组件风格变成如下效果：
添加childDataPath设置数据来源并添加childId指定想要联动的下拉框就创建了联动下拉框
举例7：日期控件
为普通文本框添加class=“date” ，如下： <input type="text" class="date"/>
就变成一个日期控件。效果如右侧所示：
再添加dateFmt属性可以设置日期控件的现实方式 ，例如： <input type="text" class="date" dateFmt="HH:mm:ss"/> 就可以只显示时间，效果如右侧所示：
就改造成了一个友好的警告框。效果如下：
确认框和弹出窗口的使用同样也很方便。
举例4：弹出式提示框
写如下代码： $.messager.show(0,'提示内容！',10000,'message.mp3');
就创建了一个弹出式提示框。效果如下：
4个参数分别用来设置：标题、内容、弹出后停留时间、弹出时播放的声音文件
十大亮点
亮点10：提供组件与特效的分离版本
• 如果你的WEB应用只需要使用框架的某几个 组件或特效，那么不必将整套框架机制全部 引入到项目中，360UI框架还提供的组件与 特效的分离版本。 • 分离版本将360UI框架集成的100多种组件和 特效进行分离，每种组件或特效独立为一个 目录。使用时只要找到相应的目录参照实例 代码的做法即可。
举例1：仪表盘
举例2：日程安排
举例3：图片添加标注
举例4：图片裁剪
举例5：组织结构图/流程图
举例6：360°物品查看
十大亮点
亮点6：包含完备的CSS样式库
CSS库简介
简单说来css库就是一些已经写好的css，要实现网页外观上的调整只要使用 class=“xxx”就可以了，不必再写css。 充分利用css库能够很大程度地提高效率。例如要实现一段文字显示为红色，
十大亮点
亮点7：组件与特效使用非常简单
举例1：提示信息
只需要对标签添加一个title属性，如下： <span title="这里是信息提示的内容。">信息提示示例</span>
就创建了一个提示信息。效果如下：
title可以用在很多标签中，如span、div、a、img、input等
举例2：盒子模型（多功能容器）
出时的声音等。
举例3：树形表格
举例4：拓展的表单元素（1）
举例5：拓展的表单元素（2）
举例6：常规菜单
举例7：另类菜单
举例8：容器类
举例9：图表类
部分特效目录
由于特效很难在平面图上体现，建议访问在线版本观看