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. MYSQL的常用命令和增删改查语句和数据类型

    连接命令:<a href="http://lib.csdn.net/base/mysql" class='replace_word' title="MySQL知识库 ...

  2. 魔改——MFC SDI 支持 内嵌 EXCEL OLE

    ==================================声明================================== 本文版权归作者所有 未经作者授权 请勿转载 保留法律追究的 ...

  3. java实现基于activeMQ的消息推送

    一. 准备工作 1. 点击此下载相关的第三方jar包,并在工程中引用 二. spring配置文件:application.xml <?xml version="1.0" en ...

  4. Loadrunner代理录制设置

    使用LR代理录制原理 启用LR代理服务器监听设置好的端口号是否有请求信息发送给服务器,有请求时,代理服务器接收带请求,并转发给对应的系统服务器,LR从而获取到请求的信息与数据,生成脚本. 使用代理的前 ...

  5. [python]爬虫学习(二)

    ---恢复内容开始--- #python2 import urllib2 #python3 import urllib.request html=urllib.request.urlopen('htt ...

  6. Markdown:让书写更美好

    http://www.jianshu.com/p/17fdcf17bbb4 http://sdutlinux.org/t/218   文档整体解决方案 在自己的服务器上安装GitBook markdo ...

  7. Comparison of SQL Server Compact, SQLite, SQL Server Express and LocalDB

    Information about LocalDB comes from here and SQL Server 2014 Books Online. LocalDB is the full SQL ...

  8. 报表移动端app如何实现页面自适应?

    1. 描述 PC上制作好的报表,在手机端查看的时候,报表软件默认的自适应效果不尽人如意.例如,报表比较大,到手机上被缩的非常小,字都看不清等等.为此FineReport增加了选项可以手动控制报表在移动 ...

  9. 初识【Windows API】--文本去重

    最近学习操作系统中,老师布置了一个作业,运用系统调用函数删除文件夹下两个重复文本类文件,Linux玩不动,于是就只能在Windows下进行了. 看了一下介绍Windows API的博客: 点击打开 基 ...

  10. MATLAB神经网络原理与实例精解视频教程

    教程内容:<MATLAB神经网络原理与实例精解>随书附带源程序.rar9.随机神经网络.rar8.反馈神经网络.rar7.自组织竞争神经网络.rar6.径向基函数网络.rar5.BP神经网 ...