其实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. 2018软工实践—Alpha冲刺(7)

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 学习MSI.CUDA 试运行软件并调试 ...

  2. 2018软工实践—Alpha冲刺(5)

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助测试的进行 测试项目运行的服务器环境 ...

  3. 小程序获取access_token

    <?php //小程序appid $appid = 'wx79d7c348d19f010c'; //小程序 APPSecret 密钥 $appsecret = 'd624aca86d0350ee ...

  4. Win server 2016 升级 Win server 2019 [测试验证]

    . 给win server 2016 挂在 win server 2019 的安装盘 2. 点击setup 直接进行安装操作  选择不下载更新, 然后到达输入序列号的界面 序列号为: WMDGN-G9 ...

  5. mysql中(存储)函数

    (存储)函数: 函数,也说成“存储函数”,其实就是js或php中所说的函数! 唯一的区别: 这里的函数必须返回一个数据(值): 定义形式: 注意事项: 1, 在函数内部,可以有各种变量和流程控制的使用 ...

  6. Maven学习——1、安装与修改Maven的本地仓库路径

    1.1.下载 官网 http://maven.apache.org/download.cgi 1.2.安装配置 apache-maven-3.3.3-bin.zip 解压下载的压缩包 1.3.配置环境 ...

  7. angularjs 常用功能练习

    <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8& ...

  8. H Hip To Be Square Day5——NWERC2012

    这个题目巨坑啊.调试的时间加起来绝对超过1天整. 不过终于调试出来了,真心感动地尿流满面啊. 题目的意思是给你一个区间[A,B],可以从区间里选出任意多个整数,使得这些整数的积是一个不超过 2^126 ...

  9. 【Mybatis】Mybatis的sql模糊查询

    这个网站中有很多方法.https://code.google.com/p/mybatis/issues/detail?id=85 自己试验了如下的方法. 1.  参数中直接加入%% param.set ...

  10. Luogu4897 【模板】最小割树

    没事干写一发模板. #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib& ...