How jQuery UI Works
https://learn.jquery.com/jquery-ui/how-jquery-ui-works/
jQuery UI contains many widgets that maintain state and therefore may have a slightly different usage pattern than typical jQuery plugins you are already used to.
While the initialization is the same as most jQuery plugins, jQuery UI's widgets are built on top of the Widget Factory which provides the same general API to all of them.
So if you learn how to use one, then you'll know how to use all of them! This document will walk you through the common functionality, using the progressbar widget for the code examples.
jQuery UI是基于widget factory的,只要你学会如何使用jQuery UI,那么就可以知道如何使用其他基于widget factory的
Initialization
In order to track the state of the widget, we must introduce a full life cycle for the widget.
The life cycle starts when the widget is initialized.
To initialize a widget, we simply call the plugin on one or more elements.
$( "#elem" ).progressbar();
This will initialize each element in the jQuery object, in this case the element with an id of "elem".
Because we called the .progressbar()
method with no parameters, the widget is initialized with its default options.
We can pass a set of options during initialization in order to override the default options.
$( "#elem" ).progressbar({ value: 20 });
We can pass as many or as few options as we want during initialization. Any options that we don't pass will just use their default values.
The options are part of the widget's state, so we can set options after initialization as well. We'll see this later with the option
method.
link Methods
Now that the widget is initialized, we can query its state or perform actions on the widget.
All actions after initialization take the form of a method call.
To call a method on a widget, we pass the name of the method to the jQuery plugin.
For example, to call the value
method on our progressbar widget, we would use:
$( "#elem" ).progressbar( "value" );
If the method accepts parameters, we can pass them after the method name. For example, to pass the parameter 40
to the value
method, we can use:
$( "#elem" ).progressbar( "value", 40 );
Just like other methods in jQuery, most widget methods return the jQuery object for chaining.
$( "#elem" )
.progressbar( "value", 90 )
.addClass( "almost-done" );
Common Methods
Each widget will have its own set of methods based on the functionality that the widget provides.
However, there are a few methods that exist on all widgets.
option
As we mentioned earlier, we can change options after initialization through the option
method.
For example, we can change the progressbar's value to 30 by calling the option
method.
$( "#elem" ).progressbar( "option", "value", 30 );
Note that this is different from the previous example where we were calling the value
method.
In this example, we're calling the option
method and saying that we want to change the value option to 30.
We can also get the current value for an option.
$( "#elem" ).progressbar( "option", "value" );
In addition, we can update multiple options at once by passing an object to the option
method.
$( "#elem" ).progressbar( "option", {
value: 100,
disabled: true
});
You may have noticed that the option
method has the same signature as getters and setters in jQuery core, such as .css()
and .attr()
.
The only difference is that you have to pass the string "option" as the first parameter.
disable
As you might guess, the disable
method disables the widget.
In the case of progressbar, this changes the styling to make the progressbar look disabled.
$( "#elem" ).progressbar( "disable" );
Calling the disable
method is equivalent to setting the disabled
option to true
.
link enable
The enable
method is the opposite of the disable
method.
$( "#elem" ).progressbar( "enable" );
Calling the enable
method is equivalent to setting the disabled
option to false
.
link destroy
If you no longer need the widget, you can destroy it and return back to the original markup.
This ends the life cycle of the widget.
$( "#elem" ).progressbar( "destroy" );
Once you destroy a widget, you can no longer call any methods on it unless you initialize the widget again.
If you're removing the element, either directly via .remove()
or by modifying an ancestor with .html()
or .empty()
, the widget will automatically destroy itself.
link widget
Some widgets generate wrapper elements, or elements disconnected from the original element.
In these cases, the widget
method will return the generated element.
In cases like the progressbar, where there is no generated wrapper, the widget
method returns the original element.
$( "#elem" ).progressbar( "widget" );
link Events
All widgets have events associated with their various behaviors to notify you when the state is changing.
For most widgets, when the events are triggered, the names are prefixed with the widget name.
For example, we can bind to progressbar's change event which is triggered whenever the value changes.
$( "#elem" ).bind( "progressbarchange", function() {
alert( "The value has changed!" );
});
Each event has a corresponding callback, which is exposed as an option.
We can hook into progressbar's change
callback instead of binding to the progressbarchange
event, if we wanted to.
$( "#elem" ).progressbar({
change: function() {
alert( "The value has changed!" );
}
});
Common Events
While most events will be widget specific, all widgets have a create
event. This event will be triggered immediately after the widget is created.
How jQuery UI Works的更多相关文章
- jQuery UI的基本使用方法与技巧
一.概述 jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library, th ...
- [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4
本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-c ...
- jquery ui widget 源代码分析
jquery ui 的全部组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,有用它能实现一致的API.创建有状态的插件,而无需关心插件的内部转换. $.wi ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- jQuery UI与jQuery easyUI的冲突解决办法
jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...
- 【转】推荐10款最热门jQuery UI框架
推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...
- Jquery UI
jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...
- JQuery UI dialog 弹窗实例及参数说明
按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...
- Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路
通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...
随机推荐
- picgo+typora优化markdown体验
picgo+typora优化markdown体验 写markdown的时候许多图片的存放的上传是一个大问题,之前一直都是使用先截图,在commit之后,再将线上图片地址粘贴到相应的位置 现在知道了pi ...
- oracle三种表连接方式
1. 排序合并连接(Sort Merge Join) 排序合并连接的执行过程如下所示: * 将每个行源的行按连接谓词列排序 * 然后合并两个已排序的行源,并返回生成的行源 例如: select * f ...
- 23、selenium爬取歌曲精彩评论
我们这次试试用selenium爬取QQ音乐的歌曲评论,我选的歌是<甜甜的>. https://y.qq.com/n/yqq/song/000xdZuV2LcQ19.html f ...
- express做登录判断
1)JWT试试 https://github.com/penguinab/express-jwt 2)express session https://github.com/whevether/reac ...
- VMware 中的win7虚拟机在一段时间后就会自动挂起
VMware workstation 中的win7虚拟机在一段时间不用后就会自动挂起. 其实这不是VMware workstation 的问题,而是win7的问题.关闭win7系统 的自动休眠功能即可 ...
- cobbler装机系统部署
1.cobbler安装 [root@linux-node1 ~]# cp /etc/cobbler/settings{,.ori} # 备份 # server,Cobbler服务器的IP. sed - ...
- Linux--目录管理与文件管理--02
******Linux目录结构与目录管理******* 一.Linux目录结构: 1.目录创建规则:FHS文件系统层次化标准 指定了Linux操作系统的哪些目录是一定要具备的 2.目录的结构 树形结构 ...
- 问题:关于2.3 jmu-Java-02基本语法-03-身份证排序 (9 分)
输出未能排序 import java.util.Scanner; import java.util.Arrays; public class Main { pu ...
- [ZJOI2014]力 题解
题目地址 洛谷P3338 Solution 第一道FFT的应用AC祭! 我们要求: \[E_j=\frac{F_j}{q_j}=\sum_{i<j}\frac{q_i}{(i-j)^2}-\su ...
- netty之IO演进之路
常见IO类型: 传统的同步阻塞I/O编程<BIO> 基于NIO的非阻塞编程 基于NIO2.0的异步非阻塞AIO编程 BIO缺点: 没有数据缓冲区,I/O性能存在问题 没有Channel概念 ...