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的时候将重写这些。

  1. destroy():将widget实例从dom对象上移除,在开发widget的时候一般此方法是必须的。就是移除你自己在dom element上添加的样式和行为以及dom结构。
  2. options:在这里面保存的是widget的配置信息,在创建widget的时候需要设置一些配置参数。
  3. element:就是widget作用的dom对象。
  4. enable()和disable()这两个方法就是禁用和启用widget的。其实是修改options.disabled。

还有两个私有方法是创建widget的时候要重写的。

  1. _create() 这个方法就是创建widget的方法,在页面调用widget的时候,就会执行此方法,来构建widget。Widget的绝大大多数行为和结构都是在这里创建的。
  2. _init() 这个方法大多数时候不会被重写,这个方法在构建widget的时候在_create后执行。
  3. _create()方法在widget构建的时候执行,而_init()方法在构建和重新初始化的时候执行。而destroy方法则是在移除widget的时候被执行。在widget中,所有的私有方法都将加以"_"前缀。
  4. _setOption():此方法提供了options的属性的设置,一般情况下如果options里面的参数不需要特殊处理(校验,类型转换,以及设置属性的时候触发某一操作等)的时候不需要对此方法进行重写事件。

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

Jquery ui widget开发的更多相关文章

  1. jquery ui widget 源代码分析

    jquery ui 的全部组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,有用它能实现一致的API.创建有状态的插件,而无需关心插件的内部转换. $.wi ...

  2. 使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins)

    使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) Note 这一章节的内容是基于 Scott Gonzalez 一篇博客 Building ...

  3. JQuery UI Widget Factory官方Demo

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. jQuery UI Widget(1.8.1)工作原理--转载

    先看下代码的相关注释: /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/abo ...

  5. jQuery UI Widget 原理

    先看下代码的相关注释: /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/abo ...

  6. 通过扩展jQuery UI Widget Factory实现手动调整Accordion高度

    □ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width&q ...

  7. jQuery UI Widget(1.8.1)工作原理

    /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) * Dual l ...

  8. jQuery UI Widget Factory

    https://learn.jquery.com/jquery-ui/widget-factory/ The jQuery UI Widget Factory is an extensible bas ...

  9. jquery.ui.widget详解

    案例详解 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. Windows系统下Oracle每天自动备份

    linux和unix下面使用shell可以很方便实现,如果windows环境下可以结合计划任务实现 创建备份目录d:\backup, 创建批处理命令Bak.bat,编写备份脚本 exp user/pa ...

  2. android xml 布局错误

    最近重新安装了下android开发环境,发现在调整页面的时候 ,老是报以下错误,导致无法静态显示ui效果. Missing styles. Is the correct theme chosen fo ...

  3. sql server全文索引使用中的小坑

    一.业务场景 我们在实际生产环境中遇到了这样一种需求,即需要检索一个父子关系的子树数据 估计大家也遇到过类似的场景,最典型的就是省市数据,其中path字段是按层级关系生成的行政区路径: 如果我们已知某 ...

  4. OpenStack 企业私有云的若干需求(10):OpenStack 的前景和钱景

    本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...

  5. Hibernate双向多对多关联

    一.配置双向多对多关联 以Project类(项目)和Emp类(员工)为例: 1.创建Project类,并需要定义集合类型的Emp属性 public class Project { //编号 priva ...

  6. Confluence Wiki -- 页面限制

    Confluence Wiki 中 [页面设置] 应该如何理解? 当一个用户有这个权限后,这个用户可以对一个页面做限制,可以限制这个页面不能被其他用户浏览或编辑: 反之,如果没有这个权限,那么这个用户 ...

  7. IdentityHashMap类:增加相同Key(键)内容的结果

    正常Map操作中,key是不能重复的. 先看使用HashMap()操作,增加相同Key内容的结果: 先看代码: package 类集; import java.util.HashMap; import ...

  8. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 密码强化、网络安全强化

    公司的系统庞大后,用户数量也庞大,容易引起各种网络安全相关问题,需要把每个用户的网络安全意识都提高,由于历史原因有些用户的密码过于简单,很容易被猜到,引起很多没必要的麻烦. 系统登录成功后,检查密码复 ...

  9. c# 调用c++DLL方法及注意事项

    引用命名空间 using System.Runtime.InteropServices 调用方法: 一.静态加载 用DllImprot方式来加载c++DLL.如下格式: //对应c++方法 //voi ...

  10. 去除phpcms会员登录后头部登陆条的会员名称的括号

    phpcms会员登录后显示会员名称是带括号的,现在把他修改成不带括号. 找到函数库libs/functions/global.func.php,修改如下即可: function get_nicknam ...