前端JS组件库 OperaMasks-UI v1.1 正式版发布
fmms 12年前
<p>OperaMasks-UI是OperaMasks团队 2011下半年打造的一款轻量级前端JS组件库，旨在提供一款学习曲线低、定制性灵活、样式统一，且多浏览器支持、覆盖企业业务场景的前端JavaScript UI组件库。目前，该团队已将这一产品以LGPL 开源协议开放给社区。 <br /> <br /> </p> <div style="text-align:left;line-height:1.6em;font-size:14px;" class="t_msgfont"> <span><span style="font-size:small;">OperaMasks UI V1.1 正式版发布了。</span></span> <span style="line-height:normal;"><span style="font-size:small;">下载地址：<a style="color:#006699;text-decoration:none;" href="/misc/goto?guid=4958333966076552126" target="_blank">http://ui.operamasks.org/website/download.html</a></span></span> </div> <div style="text-align:left;line-height:1.6em;font-size:14px;" class="t_msgfont"> 新特性概览： <a href="/misc/goto?guid=4958333966982744039">http://www.operamasks.org/blog/?p=224</a> </div> <div style="text-align:left;line-height:1.6em;font-size:14px;" class="t_msgfont"> <strong>示例页面：</strong> </div> <div style="text-align:left;line-height:1.6em;font-size:14px;" class="t_msgfont"> <img alt="前端JS组件库 OperaMasks-UI v1.1 正式版发布" src="https://simg.open-open.com/show/8ba44cb49139a2d11e114abaa4eb58f4.png" width="500" height="348" /> </div> <div style="text-align:left;line-height:1.6em;font-size:14px;" class="t_msgfont"> <br style="line-height:normal;" /> <br style="line-height:normal;" /> <span>此 版本对比之前的v1.0作了较多的改进，把一些核心文件进行了合并，重写了部分组件结构，使其为统一的widget模式，添加了新的组件和插件，如 omItemSelector,omPanel 和omBorderLayout。在内部结构上也进行了很多统一，如统一的处理事件机制等。另外也修复了一些重要的bug。<br /> </span> <br style="line-height:normal;" /> <span><strong style="font-weight:bold;"><span style="font-size:medium;">新特性</span></strong></span> <br style="line-height:normal;" /> <span>1. 添加了五个新的组件: <ul style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> <li style="margin-left:2em;">omItemSelector: 一个左移右移组件</li> <li style="margin-left:2em;">omPanel: 面版是一个布局组件，同时也是一个展示内容的容器</li> <li style="margin-left:2em;">omBorderLayout: 页面布局基础组件，把页面拆分为north,south,west,center,east（上、下、左、中、右）5个区域，除了center是必须设置的之外其他的都是可选的</li> <li style="margin-left:2em;">omProgressbar: 进度条组件，一般用来呈现任务完成的进度情况。</li> <li style="margin-left:2em;">omTooltip: 提示组件,当某个链接、表单、输入框等需要做功能向导提示的时候可以使用本组件。</li> </ul> 2. 添加了两个omGrid插件 <ul style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> <li style="margin-left:2em;">omGridSort: 一个grid的排序插件，可让grid支持客户端排序和服务端排序，单独使用omGrid时，要额外导入om-grid-sort.js和om-grid-sort.css这两个文件</li> <li style="margin-left:2em;">omGridRowExpander: 一个grid的行展开详情插件，可定制grid每一行的详情信息，并随意展开与收缩，单独使用omGrid时，要额外导入om-grid-rowexpander.js和om-grid-rowexpander.css这两个文件</li> </ul> 3. 组件新特性 omTree支持简单的数据模型，该模型是线性的，意味着后台模型可以直接为一个List，极大简化了后台模型。<br /> <br /> <span style="font-size:medium;"><strong style="font-weight:bold;">改进</strong></span> <ul style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> <li style="margin-left:2em;">统一所有组件基于widget模式开发，使组件更具一致性。</li> <li style="margin-left:2em;">把单个组件中用到的图片进行合并。</li> <li style="margin-left:2em;">内部统一了事件的触发机制,统一触发事件时event作为最后一个参数进行传递，统一事件触发函数中的this为jquery对象。</li> <li style="margin-left:2em;">内部添加对组件销毁的监控，避免用户自行调用组件的remove方法删除组件时造成内存泄漏。</li> <li style="margin-left:2em;">优化了组件的重新初始化，v1.0版本组件重新初始化(如第二次调用 $("#acc").omAccordion({/**some config**/}))不太完善，很多属性重新初 始化后并不会生效，本版本进行了较大的改进。</li> <li style="margin-left:2em;">改进了组件的国际化，从每一个国际化组件占用jQuery一个名称空间改为所有国际化组件共用$.om.lang这个单独的名称空间，减少名称空间污染，并把国际化处理逻辑 移至om-core.js。</li> <li style="margin-left:2em;">修改了omMenu和omButton的样式。</li> </ul> <br /> <br /> <br /> <span style="font-size:medium;"><strong style="font-weight:bold;">升级说明(从v1.0 到 v1.1)</strong></span></span> <br style="line-height:normal;" /> <span>本版本的升级非常简单，只有几个要点需要注意： <ul style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> <li style="margin-left:2em;">在组件的事件监听器中，event参数统一改为最后一个参数，所以监听器有event参数的要重新更改一下参数顺序(如omFileUpload组件事件监听器)</li> <li style="margin-left:2em;">事件监听器中的this现在统一改为jquery对象，之前可能表示dom节点，也可能表示jquery对象，还可能是组件实例</li> <li style="margin-left:2em;">凡是以前使用到类似jquery.ui.mouse.js，jquery.ui.position.js这样的功能性文件时，记得现在要换为以om前缀开头的， 比如，以前你导入了jquery.ui.mouse.js，现在要改为om-mouse.js</li> </ul> <br /> <br /> <br /> <span style="font-size:medium;"><strong style="font-weight:bold;">文件变更</strong></span> <ul style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> <li style="margin-left:2em;">把jquery.ui.widget.js和jquery.ui.core.js 进行了合并，改名为 om-core.js，并修改了部分代码。</li> <li style="margin-left:2em;">把jquery.ui.mouse.js，jquery.ui.position.js等功能性文件名全部改为以om为前缀，如jquery.ui.mouse.js改为om-mouse.js</li> </ul> <br /> <br /> <strong style="font-weight:bold;"><span style="font-size:medium;">重要bug修复</span></strong> <ul style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> <li style="margin-left:2em;">[AOM-328] - omTree的refresh方法不能刷新到最新数据</li> <li style="margin-left:2em;">[AOM-434] - validator 插件校验成功后没有将错误信息标签隐藏</li> <li style="margin-left:2em;">[AOM-435] - css合并时出现问题，导致grid样式出现错误</li> <li style="margin-left:2em;">[AOM-438] - omMenu当菜单项文字过长时样式混乱</li> <li style="margin-left:2em;">[AOM-441] - numberfield在chrome中文输入法下有问题</li> <li style="margin-left:2em;">[AOM-442] - om-tabs在添加很多个页签后，当页签头的宽度超过5000px的时候出现换行。</li> <li style="margin-left:2em;">[AOM-444] - omGrid在IE6下内容过长时表头表体对不齐</li> <li style="margin-left:2em;">[AOM-448] - 如果右键菜单具有子菜单,会导致横向滚动条出现</li> <li style="margin-left:2em;">[AOM-451] - om-numberfiled基本用法时,输入: 0000、000000.3、.3、-00000这类数据时并不会自行修正</li> <li style="margin-left:2em;">[AOM-456] - omTab关闭页签之后下一步总是打开第一个页签</li> <li style="margin-left:2em;">[AOM-458] - omTree监听omDrag事件报错</li> <li style="margin-left:2em;">[AOM-461] - 全局事件绑定方式可能引发内存泄漏</li> <li style="margin-left:2em;">[AOM-463] - 当单独引入om组件(不包括jquery开头的文件), 另外引入jquery UI组件库时页面报错:"Cannot read property 'prototype' of undefined" [AOM-484] - menu键盘操作向上有问题</li> </ul> </span> </div>