基于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 live函数
Dec 24 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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页面消耗内存过大的处理办法
2013/03/18 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
php实现zip文件解压操作
2015/11/03 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
php array_map()函数实例用法
2021/03/03 PHP
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
如何利用python查找电脑文件
2018/04/27 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
python的sys.path模块路径添加方式
2020/03/09 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
教师年终个人自我评价
2013/10/04 职场文书
司法助理专业自荐书
2014/06/13 职场文书
职工小家建设活动方案
2014/08/25 职场文书
微观世界观后感
2015/06/10 职场文书