基于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 相关文章推荐
在JavaScript中使用inline函数的问题
Mar 08 Javascript
JavaScript null和undefined区别分析
Oct 14 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
webpack的移动端适配方案小结
Jul 25 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输出表格的实现代码(修正版)
2010/12/29 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
利用JS实现数字增长
2016/07/28 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
Koa项目搭建过程详细记录
2018/04/12 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
Python 对象中的数据类型
2017/05/13 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python实现合并两个排序的链表
2019/03/03 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python属于跨平台语言码
2020/06/09 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
幼儿园门卫岗位职责
2014/02/14 职场文书
小学生暑假家长评语
2014/04/17 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
岗位安全生产责任书
2014/07/28 职场文书
司机工作自我鉴定
2014/09/19 职场文书
师德师风剖析材料
2014/09/30 职场文书
英语教师个人工作总结
2015/02/09 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
金陵十三钗观后感
2015/06/04 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers