Jquery ui widget开发
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的时候要重写的。
- _create() 这个方法就是创建widget的方法,在页面调用widget的时候,就会执行此方法,来构建widget。Widget的绝大大多数行为和结构都是在这里创建的。
- _init() 这个方法大多数时候不会被重写,这个方法在构建widget的时候在_create后执行。
- _create()方法在widget构建的时候执行,而_init()方法在构建和重新初始化的时候执行。而destroy方法则是在移除widget的时候被执行。在widget中,所有的私有方法都将加以"_"前缀。
- _setOption():此方法提供了options的属性的设置,一般情况下如果options里面的参数不需要特殊处理(校验,类型转换,以及设置属性的时候触发某一操作等)的时候不需要对此方法进行重写事件。
如果有自定义的事件,可以采用widget为我们封装好的方法来处理_trigger()这个方法来处理,其调用方法 this._trigger(type, event, data),第一个参数为时间类型,第二个参数为事件event对象,第三个参数为事件要传递的参数。
Jquery ui widget开发的更多相关文章
- jquery ui widget 源代码分析
jquery ui 的全部组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,有用它能实现一致的API.创建有状态的插件,而无需关心插件的内部转换. $.wi ...
- 使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins)
使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) Note 这一章节的内容是基于 Scott Gonzalez 一篇博客 Building ...
- JQuery UI Widget Factory官方Demo
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- jQuery UI Widget(1.8.1)工作原理--转载
先看下代码的相关注释: /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/abo ...
- jQuery UI Widget 原理
先看下代码的相关注释: /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/abo ...
- 通过扩展jQuery UI Widget Factory实现手动调整Accordion高度
□ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width&q ...
- jQuery UI Widget(1.8.1)工作原理
/*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) * Dual l ...
- jQuery UI Widget Factory
https://learn.jquery.com/jquery-ui/widget-factory/ The jQuery UI Widget Factory is an extensible bas ...
- jquery.ui.widget详解
案例详解 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
随机推荐
- 使用eclipse开发Morphline的Java代码段
背景:morphline是一个轻量级的etl工具.除了提供标准化的方法之外,还可以定制化的开发java片段.定制化的java片段会在加载时被作为一个独立的类编译,对源数据作处理. morphline关 ...
- 弹窗样式 idialog,purebox,artdialog4.1.2,jquery.alert.v1.2
<script src="<?php echo $imgurl;?>/tools/media/js/jquery.iDialog.js"></scri ...
- 架构实例之Demo_JSP
架构实例之Demo_JSP 1.开发工具和开发环境 开发工具: MyEclipse10,JDK1.6.0_13(32位),Tomcat7.0(32位),mysql5.7.13 开发环境:W ...
- 移动端开发之APP消息推送
有这样一种场景,当你在手机APP上输入你的信息,会自动跳出一个弹窗,表示某任务已执行.最简单的一个例子就是当你输入手机号,点击获取验证码的时候,就会跳出一个对话框,说“验证码已发送到手机,请注意查收” ...
- linux学习(2)
自从安装了虚拟机和各种工具软件之后,学习Linux的过程不断被打断,一直想把Ubuntu烧录到itop4412开发板里面去,却总是失败,感觉这个过程都加强我的抗打击能力了,现在来说说,对于一个第一次烧 ...
- java操作Redis
需要使用如下jar包 <!-- https://mvnrepository.com/artifact/redis.clients/jedis --> <dependency> ...
- 深入浅出SQL笔记1–数据和表
1.数据库的概念及组成 数据库是保存表和其他相关SQL结构的容器. 数据库是由各种各样的表构成的,一个数据库里面的表总是存在相互联系的关系. 数据库内的信息组成了表,表示由行和列构成的,行是一组能够描 ...
- AC日记——I Hate It 洛谷 P1531
题目背景 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 题目描述 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师的 ...
- [随记]Eval的连接方法
在 .NET 3.5 及以下版本中,如下做法是错误的: <asp:Label ID="_column" runat="server" Text='栏目 I ...
- Linux常用命令(二)
2.2.其他权限管理命令 命令名称:chown 功能:更改文件目录或文件的所有者语法:chown[用户][文件或目录]命令名称:chgrp 功能:改变文件或目录的所属组语法:chgrp[用户][文件或 ...