基于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 相关文章推荐
用jQuery简化JavaScript开发分析
Feb 19 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
JS实现随机抽取三人
Nov 06 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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 Try Catch异常测试
2009/03/01 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
js运算符的一些特殊用法
2018/07/29 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
十条建议帮你提高Python编程效率
2016/02/16 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
安全生产大检查方案
2014/05/07 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
2015年班干部工作总结
2015/04/29 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers