说说jQuery UI 1.8的组件体系特点

简介:

jQuery以其良好的api设计在前端开发中造成了极大的影响力,他们的“write less do more”这个宗旨得到了充分的体现,但是他的UI库又是一个怎么样的体系结构呢,他们的UI库的api设计的怎么样呢?

我还是通过一段伪代码,来演示下如何来写一个jQuery UI组件:

 

(function($) { //私有变量和方法 这里是代码 $.widget("ui.dialog", {//组件名称 //共有方法和属性,定义在prototype上 options: {//配置属性 }, _create: function() { //dom操作 //绑定事件 }, //执行默认的动作 _init: function() { if ( this.options.autoOpen ) { this.open(); } }, //销毁组件 destroy: function() { }, //返回生成组件的dom元素 widget: function() { return this.uiDialog; }, //设置和获取配置项 option: function(key, value){ $.Widget.prototype._setOption.apply(self, arguments); } } }); $.extend($.ui.dialog, { //类属性和方法 }); }(jQuery)); 如果用到继承 $.widget($.ui.Simpledialog, $.ui.dialog ,{ //共有属性和方法在这里定义 })

这里我们可以看到只要调用$.widget(String name, Options prototype).,就可以生成一个jQuery UI的组件,那么这个方法帮我们做了什么工作呢?

1.       如果仅仅生成一个独立的组件,我们直接调用$.widget(String name, Options prototype),其中第一个方法就是组件的名称,第一个参数就是组件的一些共有属性和方法。

2.       如果需要用到继承,我们就用$.widget(String name, String baseName,Options prototype),这个的第二个参数就是基类的名称了。

3.       $.widget向我们提供了create方法来生成dom和绑定事件,_init方法来执行一些默认的动作,_setOption来设置一个配置属性项,widget用来获取生成组件的外层dom元素,destroy用来销毁组件,option()用来获取和设置配置项,我们可以再自己写的组件中覆盖这些方法。

 

使用dialog控件:

 

 

$('#dialog').dialog({ autoOpen: false, show: 'blind', hide: 'explode' }); 初始化后设置配置项: $( ".selector" ).dialog( "option", "autoOpen", false ); 获取配置项: $( ".selector" ).dialog( { autoOpen: false } ); 初始化后绑定事件: $( ".selector" ).bind( "dialogopen", function(event, ui) {}); 初始化后调用方法: $( ".selector" ).dialog( "open" )   

 

 

 

Ok,现在为止我们已经会开发和使用用jQuery UI1.8开发的dialog,我们来总结下jQueryUI1.8库的一些特点:

1.       API的使用上仍然秉承了jQuery核心库的特点,获取和设置属性使用同一个方法。

2.       $.widget没有为控件绑定事件的接口,必须自己手工在create中进行绑定。

3.       jqueryUI有着强大的自定制组件的功能,我们很方便你的自定义的自己的样式的组件,具体请看(http://jqueryui.com/themeroller/

 

虽然JQueryUI1.8有很优秀的地方,但是由于它的组件都是第三方贡献的,代码的可维护性较差,也没有代码的管理结构,性能方面也比较牵强,因此组织大型的RIA应用的时候,如果您不是一个JavaScript ninja,您还是不要使用这个ui框架了,总之它的ui库还是比较年轻。但是可以使用jQuery核心库,核心库还是很风光的,欢迎大家看这边文章http://news.csdn.net/a/20100327/217617.html

 

 

 

目录
相关文章
|
12天前
|
缓存 搜索推荐 索引
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
在鸿蒙应用开发中,Image 组件用于加载和显示图片资源,并提供多种属性来控制图片的显示效果和适配方式。本篇将带你学习如何在鸿蒙应用中加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。
51 7
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
|
3天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
14天前
|
自然语言处理 开发者
「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
本篇将详细介绍鸿蒙应用开发中的 Text 和 Button 组件。通过本篇内容,你将学习如何使用 Text 组件显示文本、格式化文本样式,以及如何使用 Button 组件处理点击事件并自定义样式。掌握这些基本组件的用法将为后续的 UI 开发奠定基础。
41 4
「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
|
5月前
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
39 4
|
30天前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
108 0
|
2月前
|
JavaScript
从零开始写一套广告组件【一】搭建基础框架并配置UI组件库
其实这个从零有点歧义,因为本质上是要基于`tdesign-vue-next`来进行二次封装为一套广告UI组件库,现在让我们在一起快乐的搭建自己的广告UI库之前,先对以下内容做出共识:
80 0
从零开始写一套广告组件【一】搭建基础框架并配置UI组件库
|
1月前
Element-UI组件的使用
【10月更文挑战第1天】
34 0
|
3月前
|
存储 搜索推荐 Java
探索安卓开发中的自定义视图:打造个性化UI组件Java中的异常处理:从基础到高级
【8月更文挑战第29天】在安卓应用的海洋中,一个独特的用户界面(UI)能让应用脱颖而出。自定义视图是实现这一目标的强大工具。本文将通过一个简单的自定义计数器视图示例,展示如何从零开始创建一个具有独特风格和功能的安卓UI组件,并讨论在此过程中涉及的设计原则、性能优化和兼容性问题。准备好让你的应用与众不同了吗?让我们开始吧!
|
3月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
3月前
|
JavaScript UED
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
该文章介绍了如何基于Vue2.0仿照Element UI的el-tooltip组件实现一个自定义的气泡框组件,该组件能够根据内容是否为空智能显示或隐藏,支持多种数据类型的显示。
114 0
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框