基于jQuery UI CSS Framework开发Widget的经验


Posted in Javascript onAugust 21, 2010

jQuery UI中两大核心的css文件是ui.core.css和ui.theme.css.这两个css样式贯穿整个基于jQuery ui的界面上,并且可以通过jQuery ui ThemeRoller来生成自己的样式。
.ui-helper-hidden :为元素应用display:none
.ui-helper-hidden-accessible:将元素的绝对位置设置为不可见
.ui-helper-clearfix:适用于浮动包裹父元素的属性
. ui-helper-zfix:适用于修复iframe元素覆盖的问题
.ui-state-default:元素的默认样式
.ui-state-hover:元素为hover状态的样式
.ui-state-focus:元素为focus状态的样式
.ui-state-active:元素为active状态(一般为鼠标选中)的样式
.ui-state-hightlight:需要高亮状态的样式
.ui-state-error:元素为错误状态(一般描述错误信息)的样式
.ui-state-error-text:描述错误文字的样式
.ui-state-disabled:元素被禁用的样式
.ui-priority-primary:被应用于级别为第一级的button,如果button需要区分曾记的话。将应用加粗字体
.ui-priority-secondary:被应用于级别为第二级的button,和上一场景相对应,将应用一般粗细的字体,并且相对于元素轻度透明
Icon types:css framework提供了一套默认的图标,这些图标适用于大多场景,一般使用的方式是“ui-icon ui-icon-****”来指定icon
.ui-corner-tl:左上角圆角,基于css3,ie不支持
.ui-corner-tr:右上角圆角,基于css3,ie不支持
.ui-corner-bl:左下角圆角,基于css3,ie不支持
.ui-corner-br:右下角圆角,基于css3,ie不支持
.ui-corner-top:上面两个角圆角,基于css3,ie不支持
.ui-corner-bottom:底部两个角圆角,基于css3,ie不支持
.ui-corner-right:右部两个角圆角,基于css3,ie不支持
.ui-corner-left:左部两个角圆角,基于css3,ie不支持
.ui-corner-all:全部角圆角,基于css3,ie不支持
.ui-widget-overlay:遮罩
.ui-widget-shadow:阴影
在写jQuery ui widget的时候合适的利用这些css就可以做出和jQuery ui theme兼容的自定义ui来。
jQuery ui 提供了一些基本的widget,但是他提供了很好的机制来创建widget。在jQuery css framework中包含了基本的css样式(视觉和感觉诸如颜色,字体大小,图标等),而在ui的css中,则需要定义构建widget结构的css,比如margin,padding,position等。在开发widget的时候也要尽量遵循这一原则,这样才能很好的利用jquery theme roller来应用样式,从而在整体上保持一致,在前面的文章中简单的 介绍了jquery css framework。下面就简单的介绍下jquery ui 的开发指引。
Jquery的官方文档中对此写的很清晰。一般来说,jquery ui都是继承自jquery.ui.widget.js这个文件的。这个文件提供了一个工厂方法来创建widget对象。其方法是$.widget(String name, Options prototype).下面简单介绍下这个类提供的方法和属性。在创建widget的时候将重写这些。
destroy():将widget实例从dom对象上移除,在开发widget的时候一般此方法是必须的。就是移除你自己在dom element上添加的样式和行为以及dom结构
options:在这里面保存的是widget的配置信息,在创建widget的时候需要设置一些配置参数。
element:就是widget作用的dom对象。
enable()和disable():这两个方法就是禁用和启用widget的。其实是修改options.disabled。
还有两个私有方法是创建widget的时候要重写的。在widget中,所有的私有方法都将加以"_"前缀。
_create(): 这个方法就是创建widget的方法,在页面调用widget的时候,就会执行此方法,来构建widget。Widget的绝大大多数行为和结构都是在这里创建的。
_init(): 这个方法大多数时候不会被重写,这个方法在构建widget的时候在_create后执行。
从相关的文档上查询到:
_create(): 方法在widget构建的时候执行,而_init()方法在构建和重新初始化的时候执行。而destroy方法则是在移除widget的时候被执行。
_setOption(): 此方法提供了options的属性的设置,一般情况下如果options里面的参数不需要特殊处理(校验,类型转换,以及设置属性的时候触发某一操作等)的时候不需要对此方法进行重写。
下面这段代码说明了_create()方法和_init()方法的不同:

$(function(){ 
// _create() 和 _init() 在第一次调用的时候被执行 
$("div").mywidget(); 
// widget已经实例化到div上了,此时只执行_init()方法 
$("div").mywidget(); 
// 销毁widget 
$("div").mywidget("destroy"); 
// 因为widget已经被销毁,此时_create()和_init()方法都将被执行 
$("div").mywidget(); 
});

事件
如果有自定义的事件,可以采用widget为我们封装好的方法_trigger()来处理,其调用方法为 this._trigger(type, event, data),第一个参数为时间类型,第二个参数为事件event对象,第三个参数为事件要传递的参数。

接下来会用一个简单的jquery ui widget代码,来说明如何开发widget。

//此widget是将textbox进行修饰一下的。自身没有css,采用的是jquery ui css framework的样式 
(function($){ 
//ui默认采用jquery的ui前缀,后面的是widget名称 
$.widget("ui.textboxdecorator", { 
//此widget中没有options 
options:{ 
}, 
_init: function(){ 
//验证是否是需要装饰的元素 
if (!(this.element.attr("tagName").toLowerCase() === "input" || this.element.attr("tagName").toLowerCase() === "textarea")) { 
return; 
} 
if (!(this.element.attr("type").toLowerCase() === "text" || this.element.attr("type").toLowerCase() === "password")) { 
if (this.element.attr("tagName").toLowerCase() === "input") 
return; 
} 
//this.element也就是调用此widget的元素 
var e = this.element; 
//ui-widget widget基本的样式,ui-state-default。默认状态的样式;ui- corner-all 圆角(基于css3,ie下不起作用) 
this.element.addClass("ui-widget ui-state-default ui-corner-all"); 
//添加hover效果和active效果 
this.element.mouseover(function(){ 
e.addClass("ui-state-hover"); 
}).mouseout(function(){ 
e.removeClass("ui-state-hover"); 
}).mousedown(function(){ 
e.addClass("ui-state-active"); 
}).mouseup(function(){ 
e.removeClass("ui-state-active"); 
}); 
}, 
//销毁时,移除widget增加的样式 
destroy:function(){ 
this.element.removeClass("ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active"); 
} 
}) 
})(jQuery)

在使用该widget的时候,需要引用jquery,jquery.ui.core.js,jquery.ui.widget.js文件,css文件需要jquery.ui.core.css和jquery.ui.theme.css两个文件
在调用的时候采用$("***"). textboxdecorator();来调用此widget。
Javascript 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
jquery png 透明解决方案(推荐)
Aug 21 #Javascript
基于jquery的模态div层弹出效果
Aug 21 #Javascript
ExtJs 表单提交登陆实现代码
Aug 19 #Javascript
ExtJs中简单的登录界面制作方法
Aug 19 #Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 #Javascript
JS面向对象编程之对象使用分析
Aug 19 #Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 #Javascript
You might like
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
深入理解vue Render函数
2017/07/19 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
npm的lock机制解析
2019/06/20 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python中turtle作图示例
2017/11/15 Python
python如何读写json数据
2018/03/21 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python内置类型性能分析过程实例
2020/01/29 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
浅析Python面向对象编程
2020/07/10 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
教师远程培训感言
2014/03/06 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server