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.
相关文章
- 从零开始学习jQuery (十) jQueryUI常用功能实战
- [转] jQuery的deferred对象详解
- .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
- jQuery UI炫酷雨滴落在水面上的波纹涟漪特效
- 常用的JQuery UI框架
- QT中拷贝一个项目的ui界面到另一个项目时Ui.h文件时Ui.h文件控件变量错乱问题解决
- 记一次艰难的jquery easy-ui ajax post 体验
- 强大的jQuery幻灯片播放插件 支持全拼、拖拽和下载等功能
- jquery.validate使用详解
- jQuery插件EasyDrag轻松实现JS拖动的效果
- 3-jQuery - AJAX get()
- 《jQuery UI 开发指南》——第1章 jQuery UI介绍1.1 jQuery UI的安装
- 《jQuery UI 开发指南》——2.4 bind ()方法
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——第3章 修改页面 3.1 技巧:添加类
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.6 技巧:使用append()和appendTo()添加内容
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.7 示例:添加函数的返回结果
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.9 技巧:使用jQuery动态生成HTML
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.15 技巧:包裹和解包元素
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.12 技巧:跨页面时固定footer
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.13 技巧:将footer的位置保持固定
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.22 小结
- jquery.params.js,Jquery获取页面参数,js获取页面参数
- jQuery + css 公告从左往右滚动
- 【web前端(四十一)】javascript_jquery_文档处理、下表单的添加和删除
- jQuery的DOM操作之加入元素和删除元素
- Jquery.linq 使用示例