JQueryUI学习三部曲

　　对于web前端开发，每一个开发人员都在为前端的界面设计烦恼，各种布局、各种颜色搭配以及各种浏览器兼容性等等，这些都会困扰我们。而用户需要一些比较炫的效果，让我们更加烦恼，但开心的是我们拥有jQuery，她可以让我们很好的操作javascript，而且并不要求javascript的技术有多深就可以很容易的上手。而对于网页的css+div布局是否也有同样的框架帮我们解决问题呢，或者说有一款可以集成javascript和css+div的框架呢？庆幸的是JQueryUI帮我们完成了这些工作。

      JQueryUI是一款轻量级的开源框架，是JQuery团队官方推出的一款UI框架，使用她可以很容易就搭建一个简洁易用的UI界面，让开发人员有更多的时间关注业务而不需要考虑布局以及浏览器兼容性问题。在JQueryUI官网（http://jqueryui.com）上我们可以下载到现在最新版本的 JQueryUI（V1.8.22）源码，通过源码阅读我们可以知道她的组成，其实她并不是什么天外来物，她和JQuery一样，是一个javascript的代码库，通过对javascript中代码封装，让我们使用起来更方便而已，她主要分为3个部分：用户交互、小插件和炫酷效果。通过这三个部分满足用户的需求，选择用户交互实现相关鼠标点击事件的处理，小插件实现一些实用动感效果，通过炫酷效果满足用户的个性化，就这样捕获用户的心。在网上有很多关于jQueryUI的相关资料，在此就不再多言，以下就说说自己在使用过程中的总结。

最短代码写出最炫效果

         每个人都想事半功倍的完成某一件事，而在javascript的世界里，要想实现炫酷的效果必须要写繁杂的代码（当然我承认javascript确实很强大，可以实现各种炫酷效果），这样的代码健壮性很差，看着就头疼。而使用jQueryUI就可以很容易的实现。

　　在我们编写前端的过程中，很多都不可避免的使用到模态弹框的效果，使用原生的javascript+css+div编写需要大量的时间，并且需要考虑当前流行的各种浏览器的兼容性，这让开发人员很头疼。但是使用jQueryUI只需要引入其相应的js文件然后短短的几句话就可以搞定，如图1所示：

图1 模态弹框

以此类推，在JQueryUI中可以使用很简单的代码就实现很炫的代码，比如常用的水晶按钮、时间控件、进度条、表格以及一些动态效果等等。

原理和规约

         我们可以很简单的使用jQueryUI实现自己需要的效果，于此，我们就必须遵循其相关的约定，这样她才会为我们去实现效果。她不像javascript那种弱类型，可以随意的定义，在jQueryUI的世界里不允许随意的定义，任何的元素都有自己定义的规则。比如实现图1的那种弹框效果，首先我们必须对定义的div初始化一个dialog（在dialog内部进行了模态弹框的核心实现），必须调用格式为$(“#id”).dialog({相关定义的参数});，其中相关定义的参数可以参照其官网描述即可。这样在页面响应该事件的时候就可以实现对dialog的初始化并显示出来。这里需要明白几个细节，其一，她必须使用键值对的方式对属性（JQueryUI对每一个元素都有自己特定的属性、方法等，其就是通过对属性的赋值表现出效果，对方法的操作实现行为）进行赋值，左边为键，右边为值。其二，在键值对里面可以使用function方法，其格式为键名:function。最后会有一些细节的东西需要严格的遵守，比如其接受的width和height的值必须不能带像素px，而在我们平时常常会写出width=**px这样的语句，但是jQueryUI是不会认的。

         遵循jQueryUI的规约是可以很好的实现效果，但是当我们在得到效果的高兴之余是否想过其内部是如何实现的，是如何进行每一个操作的。当然吃水不忘打井人。上文说过jQueryUI是开源的，因此我们可以看到其源码，观察她的内部源码就会发现，其实现模式和jQuery大径相同，内部都是原生的javascript代码，不过jQueryUI则更多关注了对css和div的操作，比如其内部追加一个元素什么的，则使用append以及appendTo即可实现。其实JQueryUI的原理可以理解为一句话，就是使用jQuery对css和div进行操作同时也封装很多的方法。其元素的生命过程基本上就是最开始的接受用户输入参数进行初始化，调用jQuery代码实现参数和css以及div的拼接，然后渲染即可，此时这个元素就开始了自己的生命，不过其提供了close方法可以关闭这个方法，不过这里要注意这只是关闭该元素，并不是说该元素的生命周期就因此结束，此时只能说她处于一个休眠状态，要是给予一个open方法则会被唤醒继续工作。当然JQueryUI的设计者也给出了销毁元素的方法destroy，通过这个方法可以彻底的干掉该元素，若是不小心使用到该元素只能报对象不存在的错误。

         这里只是简单的说明了jQueryUI的工作原理，其中很多细节需要慢慢去体会才懂其真谛，这里只是抛砖引玉。

DIY JqueryUI

         作为一个开源项目，其内部如何实现，如何工作，用户都会知道。这样就方便了用户自定义自己的“JqueryUI”。JQueryUI在默认的情况下实现的大图标模式，其格式为256x240，并且内部使用em作为单位长度实现兼容各种浏览器的大小，并且动态的改变。因此这样在使用的时候会觉得太多的大处，有一种牛刀杀鸡的感觉，因此我们可以自定义其大小，依据内部父子级别关系修改其css文件中的使用到em的地方，比如width、height、margin、padding、border等等，既可以实现小图标模式，当然也需要自定义一套小图标，并使用锚点的方式显示。

         现在在网上自定义JQueryUI的方式比较少，主要是因为其内部的css很简单，可以很容易理解并且很容易去修改。因此在这一节只是给出一个思想，供读者自己去自定义相关漂亮简介的界面。

    由于自己没有更深入的专研JQueryUI，只是对其常用的功能以及自己再使用时需要注意的地方进行了说明，本篇文章只能作为入门的学习，若文中有不当之处，欢迎斧正！

转载于:https://www.cnblogs.com/DreamliCry/archive/2012/11/14/2769992.html