jQuery UI基本使用方法

时间 2019-11-17

原文原文链接

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

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

1.如何引入jquery

涉及到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.基本使用方法ui

创建组件

<!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）进行应用的（能够是正数，也能够是负数）。