基于 jquery ui 扩展Widget

我会带着你远行 2022-04-25 09:50 186阅读 0赞

jQuery UI CSS Framework是jQuery UI中的一个样式框架，可以利用jQuery Theme roller 来生成自己想要的css样式效果。我们可以利用jQuery UI的一些框架来开发出基于jQuery UI CSS Framework效果的插件来。

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()方法的不同：

view source

print?01 $(function()\{

03     // \_create() 和 \_init() 在第一次调用的时候被执行

04     $("div").mywidget();

06     // widget已经实例化到div上了，此时只执行\_init()方法

07     $("div").mywidget();

09     // 销毁widget

10     $("div").mywidget("destroy");

12     // 因为widget已经被销毁，此时\_create()和\_init()方法都将被执行

13     $("div").mywidget();

15 \});

事件

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

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

view source

print?01 //此widget是将textbox进行修饰一下的。自身没有css，采用的是jquery ui css framework的样式

02 (function($)\{

03 //ui默认采用jquery的ui前缀，后面的是widget名称

04     $.widget("ui.textboxdecorator", \{

05 //此widget中没有options

06         options:\{

07         \},

08         \_init: function()\{

09             //验证是否是需要装饰的元素

11             if (!(this.element.attr("tagName").toLowerCase() === "input" || this.element.attr("tagName").toLowerCase() === "textarea")) \{

12                 return;

13             \}

14             if (!(this.element.attr("type").toLowerCase() === "text" || this.element.attr("type").toLowerCase() === "password")) \{

15                 if (this.element.attr("tagName").toLowerCase() === "input")

16                     return;

17             \}

18 //this.element也就是调用此widget的元素

19             var e = this.element;

20 //ui-widget widget基本的样式，ui-state-default。默认状态的样式；ui- corner-all 圆角（基于css3，ie下不起作用）

21             this.element.addClass("ui-widget ui-state-default ui-corner-all");

22             //添加hover效果和active效果

23                         this.element.mouseover(function()\{

24                 e.addClass("ui-state-hover");

25             \}).mouseout(function()\{

26                 e.removeClass("ui-state-hover");

27             \}).mousedown(function()\{

28                 e.addClass("ui-state-active");

29             \}).mouseup(function()\{

30                 e.removeClass("ui-state-active");

31             \});

32         \},

33 //销毁时，移除widget增加的样式

34         destroy:function()\{

35             this.element.removeClass("ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active");

36         \}

37     \})

38 \})(jQuery)

在使用该widget的时候，需要引用jquery，jquery.ui.core.js,jquery.ui.widget.js文件，css文件需要jquery.ui.core.css和jquery.ui.theme.css两个文件

在调用的时候采用$("\*\*\*"). textboxdecorator();来调用此widge

基于 jquery ui 扩展Widget

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI 如何使用部件库（Widget Factory）

相关 jQuery UI 为什么使用部件库（Widget Factory）

相关 jQuery UI 小部件（Widget）方法调用

相关 jQuery UI 通过部件库（Widget Factory）扩展小部件

相关 jQuery UI 部件库（Widget Factory）

相关 jQuery UI 实例 - 部件库（Widget Factory）

相关为什么用 php widget,13.6 Widget扩展

相关 Qt：UI设计Widget程序

相关基于 jQuery 的前端 UI 框架 LuLu UI

相关基于 jquery ui 扩展Widget