其实jQuery UI早就在我的学习计划中，只不过因为计划安排始终处于待命状态，最近项目要用到jQuery UI，就提前学习一下，也想能够封装自己的UI库，这样就不用老按照别人的套路走了，像使用jQuery UI的时候，连DOM结构都要按照他们写的来，一个div里面必须包含一个h3才有用，用h2就没用了，这样的框架延伸性太差了吧，还是自己的东西好用！

本篇笔记为jQuery UI的使用笔记，深入到具体封装层面的待我以后读了源码再来写更深入的笔记，目前仅为快速学习，为了跟上项目。

1.如何引入

涉及到UI的框架，总是会涉及到行为和样式，正如jQuery Mobile一样，在使用jQuery UI时也要引入一个适用版本的jQuery.js(一般会自带)和一个框架的js文件和一个css文件，目前我用的版本是1.11.4。

废话不多说，如何使用，看代码就知道了

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">

    </head>

    <body>

        <script src="js/jquery-ui-1.11.4/jquery.js"></script>

        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>

        <script>

            //write your custome code

        </script>

    </body>

</html>

网上大多数教程都是这么说的，但是作为一个强迫症患者，我还是建议把images文件夹引入进来，这样的话在写test程序的时候不会报错，这样也可以更清晰的知道哪些控件使用了哪些图片，是如何使用的。

必要的解释，到官网上下载了jQuery UI后是一个压缩包，解压开来是一个范例的程序，像我这种白痴是肯定不知道哪些文件是有用的，哪些文件是没用的，不过打开范例程序的index.html后分别搜索<link>/<script>你会发现哪几个文件是有用到的，至于其他几个css文件为什么没用到，个人猜想structure应该是基础版的没有主题的css，如果要开发主题就用这个css，而theme应该是已经做好了主题的css。

另外，jQuery UI的官网还提供主题的下载，下好了以后用什么方法链接进去好像就能起效果。说实话我个人觉得，站在学习的角度上来说，这个东西很没意思。

还有一件很烦的事情是，jQuery UI分为四个部分：核心（UI Core）、交互部件（Interactions）、小部件（Widgets）和效果库（Effects），真心搞不清这几个东西的区别，也懒得搞清了，还是赶紧开始写点东西出来，比什么炒概念都要强。

2.基本使用方法

建立组件

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">

    </head>

    <body>

        <div id="test_progressbar"></div>

        <script src="js/jquery-ui-1.11.4/jquery.js"></script>

        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>

        <script>

            //调用方法建立组件

            $("#test_progressbar").progressbar();

        </script>

    </body>

</html>

效果如下

获取参数

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">

    </head>

    <body>

        <div id="test_progressbar"></div>

        <script src="js/jquery-ui-1.11.4/jquery.js"></script>

        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>

        <script>

            //带参数调用方法建立组件

            $("#test_progressbar").progressbar({value:20});

            //获取

            document.write($("#test_progressbar").progressbar("value"));

        </script>

    </body>

</html>

效果图如下

设置参数

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">

    </head>

    <body>

        <div id="test_progressbar"></div>

        <script src="js/jquery-ui-1.11.4/jquery.js"></script>

        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>

        <script>

            $("#test_progressbar").progressbar();

            //设置

            $("#test_progressbar").progressbar("value",40);

        </script>

    </body>

</html>

效果图如下

改变样式

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">

        <style>

            .test_class{width:50%;}

        </style>

    </head>

    <body>

        <div id="test_progressbar"></div>

        <script src="js/jquery-ui-1.11.4/jquery.js"></script>

        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>

        <script>

            $("#test_progressbar").progressbar();

            //设置

            $("#test_progressbar")

                .progressbar("value",40)

                .addClass("test_class");

        </script>

    </body>

</html>

使用option方法改变和获取参数值

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">

        <style>

            .test_class{width:50%;}

        </style>

    </head>

    <body>

        <div id="test_progressbar"></div>

        <script src="js/jquery-ui-1.11.4/jquery.js"></script>

        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>

        <script>

            $("#test_progressbar").progressbar();

            //使用option方法改变参数值

            $("#test_progressbar").progressbar("option","value",90);

            //使用option方法获取参数值

            document.write($("#test_progressbar").progressbar("option","value"));

        </script>

    </body>

</html>

效果图如下

利用option方法传多个参数

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">

        <style>

            .test_class{width:50%;}

        </style>

    </head>

    <body>

        <div id="test_progressbar"></div>

        <script src="js/jquery-ui-1.11.4/jquery.js"></script>

        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>

        <script>

            $("#test_progressbar").progressbar();

            $("#test_progressbar").progressbar( "option", {

                value: 100,

                disabled: true

            });

        </script>

    </body>

</html>

效果图如下

添加事件监听和内部的回调函数

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">

        <style>

            .test_class{width:50%;}

        </style>

    </head>

    <body>

        <div id="test_progressbar"></div>

        <script src="js/jquery-ui-1.11.4/jquery.js"></script>

        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>

        <script>

            $("#test_progressbar").progressbar();

            $("#test_progressbar").progressbar({

                change: function() {

                    alert( "The value has changed!---by callback" );

                }

            });

            $("#test_progressbar").bind( "progressbarchange", function() {

                alert( "The value has changed!---by bind()" );

            });

            $("#test_progressbar").progressbar("option","value",50);

        </script>

    </body>

</html>

CSS框架 API

布局助手
.ui-helper-hidden：对元素应用 display: none。
.ui-helper-hidden-accessible：对元素应用访问隐藏（通过页面绝对定位）。
.ui-helper-reset：UI 元素的基本样式重置。重置的元素比如：padding、margin、text-decoration、list-style，等等。
.ui-helper-clearfix：对父元素应用浮动包装属性。
.ui-helper-zfix：对 <iframe> 元素应用 iframe "fix" CSS。

小部件容器
.ui-widget：对所有小部件的外部容器应用的 Class。对小部件应用字体和字体尺寸，同时也对自表单元素应用相同的字体和 1em 的字体尺寸，以应对 Windows 浏览器中的继承问题。
.ui-widget-header：对标题容器应用的 Class。对元素及其子元素的文本、链接、图标应用标题容器样式。
.ui-widget-content：对内容容器应用的 Class。对元素及其子元素的文本、链接、图标应用内容容器样式。（可应用到标题的父元素或者同级元素）

交互状态
.ui-state-default：对可点击按钮元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable default" 容器样式。
.ui-state-hover：当鼠标悬浮在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable hover" 容器样式。
.ui-state-focus：当键盘聚焦在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable hover" 容器样式。
.ui-state-active：当鼠标点击可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable active" 容器样式。

交互提示 Cues
.ui-state-highlight：对高亮或者选中元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "highlight" 容器样式。
.ui-state-error：对错误消息容器元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "error" 容器样式。
.ui-state-error-text：对只有无背景的错误文本颜色应用的 Class。可用于表单标签，也可以对子图标应用错误图标颜色。
.ui-state-disabled：对禁用的 UI 元素应用一个暗淡的不透明度。意味着对一个已经定义样式的元素添加额外的样式。
.ui-priority-primary：对第一优先权的按钮应用的 Class。应用粗体文本。
.ui-priority-secondary：对第二优先权的按钮应用的 Class。应用正常粗细的文本，对元素应用轻微的透明度。

图标
状态和图像
.ui-icon：对图标元素应用的基本 Class。设置尺寸为 16px 方块，隐藏内部文本，对 "content" 状态的精灵图像设置背景图像。注意： .ui-icon class 将根据它的父容器得到一个不同的精灵背景图像。例如，ui-state-default 容器内的 ui-icon 元素将根据 ui-state-default 的图标颜色进行着色。
图标类型
在声明 .ui-icon class 之后，接着您可以声明一个秒速图标类型的 class。通常情况下，图标 class 遵循语法 .ui-icon-{icon type}-{icon sub description}-{direction}。
例如，一个指向右侧的三角形图标，如下所示： .ui-icon-triangle-1-e

其他视觉效果
圆角半径助手
.ui-corner-tl：对元素的左上角应用圆角半径。
.ui-corner-tr：对元素的右上角应用圆角半径。
.ui-corner-bl：对元素的左下角应用圆角半径。
.ui-corner-br：对元素的右下角应用圆角半径。
.ui-corner-top：对元素上边的左右角应用圆角半径。
.ui-corner-bottom：对元素下边的左右角应用圆角半径。
.ui-corner-right：对元素右边的上下角应用圆角半径。
.ui-corner-left：对元素左边的上下角应用圆角半径。
.ui-corner-all：对元素的所有四个角应用圆角半径。
覆盖 & 阴影
.ui-widget-overlay：对覆盖屏幕应用 100% 宽度和高度，同时设置背景颜色/纹理和屏幕不透明度。
.ui-widget-shadow：对覆盖应用的 Class，设置了不透明度、上偏移/左偏移，以及阴影的 "厚度"。厚度是通过对阴影所有边设置内边距（padding）进行应用的。偏移是通过设置上外边距（margin）和左外边距（margin）进行应用的（可以是正数，也可以是负数）。

jQuery UI基本使用方法的更多相关文章

  1. JQuery UI datepicker 使用方法(转)

    官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...

  2. ASP.NET jQuery 随笔 使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能

    首先当然是去下载JQuery UI ,这里这里是下载地址http://jqueryui.com/ 第一步是点击这里 第二步选择你想要下载的主题进行下载 我这里是选择的cupertino主题包 点击圆圈 ...

  3. 《jQuery UI开发指南》勘误收集

    此书由罗晴明 (http://weibo.com/sunnylqm)和我合译完成,此篇博客作为勘误收集而用,若译文有误或者有任何疑问,欢迎留下评论,或者给我发邮件(地址:gzooler@gmail.c ...

  4. jquery ui是什么

    jquery ui是什么 一.总结 一句话总结:jQuery UI [1]  是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视 ...

  5. jQuery UI入门

    jQuery UI是jQuery的一个插件集,为jQuery的核心库添加了新的功能. jQUery UI库可以从http://jquery.com下载. 下载一个ZIP文件jquery-ui-1.9. ...

  6. jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法

    前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...

  7. jQuery UI的基本使用方法与技巧

    一.概述 jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library, th ...

  8. jquery ui中 accordion的问题及我的解决方法

    原文:jquery ui中 accordion的问题及我的解决方法 jquery有一套所谓的ui组件,很不错的.如果有兴趣的朋友,可以参考http://jqueryui.com/ 但其中的accord ...

  9. jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题

    今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...

随机推荐

  1. 字典树---2001 POJ Shortest Prefixes(找最短前缀)

    做的第一道字典树的题,算比较水的: -->>>:传送门 代码: #include <stdio.h> #include<stdlib.h> #define M ...

  2. Log4Net的使用研究（一）

    等待研究中………… 20160421 标题:C#使用Log4Net记录日志   文章地址: http://www.cnblogs.com/wangsaiming/archive/2013/01/11/ ...

  3. mybatis update数据时无异常但没更新成功；update异常时如数据超出大小限制，造成死锁

    没更新的问题原因: sqlSession.commit(); 没执行commit,但官方文档里有这样的描述:“默认情况下 MyBatis 不会自动提交事务,除非它侦测到有插入.更新或删除操作改变了数据 ...

  4. json_decode遇到的编码问题

    初入csdn,就最近遇到的简单问题做一个功能解释; json_encode和json_decode只针对utf8字符有效,如果遇到其他编码比如gbk,需要进行转码然后解析: header(" ...

  5. linux学习笔记4

    查看当前系统还有哪些用户 who 字符计数 wc -l(line) 可以统计有多少行 -w(word) 可以统计有多少个单词 -c(character) 可以统计有多少个字符  切个字符 - 排序 l ...

  6. SQL入门之多表查询

    如果查询需要针对两个或者更多个表,则在需要涉及到表的连接操作(join). 0.笛卡儿积 最简单的连接方式是直接在from子句中加入两个表,并且用join操作符隔开.形式为Table1 join Ta ...

  7. 最小生成树-Borůvka算法

    一般求最小生成树的时候,最流行的是Kruskal算法,一种基于拟阵证明的贪心,通过给边排序再扫描一次边集,利用并查集优化得到,复杂度为\(O(ElogE)\).另一种用得比较少的是Prim算法,利用优 ...

  8. bzoj2818 Gcd（欧拉函数）

    Description 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. Input 一个整数N Output 如题 Sample Input 4 Sam ...

  9. web项目访问路径上为什么不能写上WebContent

    我们常常在WEB项目中要写很多的访问路径,比如说/good/target.jsp;目录结构中从来不会带有项目目录结构的WebContent?这到底的为什么呢? 我们知道WEB项目是放在容器上运行的,而 ...

  10. P2812 校园网络【[USACO]Network of Schools加强版】

    题目背景 浙江省的几所OI强校的神犇发明了一种人工智能,可以AC任何题目,所以他们决定建立一个网络来共享这个软件.但是由于他们脑力劳动过多导致全身无力身体被♂掏♂空,他们来找你帮助他们. 题目描述 共 ...