jQuery UI基本使用方法
其实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基本使用方法的更多相关文章
- JQuery UI datepicker 使用方法(转)
官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...
- ASP.NET jQuery 随笔 使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能
首先当然是去下载JQuery UI ,这里这里是下载地址http://jqueryui.com/ 第一步是点击这里 第二步选择你想要下载的主题进行下载 我这里是选择的cupertino主题包 点击圆圈 ...
- 《jQuery UI开发指南》勘误收集
此书由罗晴明 (http://weibo.com/sunnylqm)和我合译完成,此篇博客作为勘误收集而用,若译文有误或者有任何疑问,欢迎留下评论,或者给我发邮件(地址:gzooler@gmail.c ...
- jquery ui是什么
jquery ui是什么 一.总结 一句话总结:jQuery UI [1] 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视 ...
- jQuery UI入门
jQuery UI是jQuery的一个插件集,为jQuery的核心库添加了新的功能. jQUery UI库可以从http://jquery.com下载. 下载一个ZIP文件jquery-ui-1.9. ...
- jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法
前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...
- jQuery UI的基本使用方法与技巧
一.概述 jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library, th ...
- jquery ui中 accordion的问题及我的解决方法
原文:jquery ui中 accordion的问题及我的解决方法 jquery有一套所谓的ui组件,很不错的.如果有兴趣的朋友,可以参考http://jqueryui.com/ 但其中的accord ...
- jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题
今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...
随机推荐
- ASP.NET Core 中的 Razor 页面介绍
标题:ASP.NET Core 中的 Razor 页面介绍 地址:https://docs.microsoft.com/zh-cn/aspnet/core/razor-pages/index?view ...
- QSet使用及Qt自定义类型使用QHash等算法
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QSet使用及Qt自定义类型使用QHash等算法 本文地址:http://techie ...
- (六)hadoop系列之__hadoop分布式集群环境搭建
配置hadoop(master,slave1,slave2) 说明: NameNode: master DataNode: slave1,slave2 ------------------------ ...
- LoadRunner脚本增强技巧之参数化(二)
特别提醒: 1.在形成数据池之后,数据库中的数据变化不会影响数据池中的数据. 2.数据文件一定要以一个空行结束,否则,最后一行输入的数据不会被参数所使用. 3.一般我们用到的很多的都是使用数据文件来保 ...
- angular 数据内容有重复时不显示问题
<body ng-app="app"> <div ng-controller="myctl"> <ul> <li ng ...
- elsarticle模板 去掉Preprint submitted to
参考:http://latex.org/forum/viewtopic.php?t=11123 修改elsarticle.cls文件. 我的CTeX装在c盘中,elsarticle.cls文件路径为: ...
- C++解析(11):对象的构造
0.目录 1.对象的初始化 2.构造函数 3.无参构造函数与拷贝构造函数 4.小结 1.对象的初始化 对象中成员变量的初始值是多少? 下面的类定义中成员变量i和j的初始值是什么? 从程序设计的角度,对 ...
- CF662C Binary Table 枚举 FWT
题面 洛谷题面 (虽然洛谷最近有点慢) 题解 观察到行列的数据范围相差悬殊,而且行的数量仅有20,完全可以支持枚举,因此我们考虑枚举哪些行会翻转. 对于第i列,我们将它代表的01串提取出来,表示为\( ...
- Linux学习笔记一:Linux配置java环境变量
一.安装JDK: 1.创建JDK的安装目录: sudo mkdir /usr/jdk 2.将jdk-7u25-linux-x64.tar.gz拷贝至/usr/jdk目录下 sudo cp jdk-7u ...
- [HNOI2002]跳蚤 【容斥】
题目描述 Z城市居住着很多只跳蚤.在Z城市周六生活频道有一个娱乐节目.一只跳蚤将被请上一个高空钢丝的正中央.钢丝很长,可以看作是无限长.节目主持人会给该跳蚤发一张卡片.卡片上写有N+1个自然数.其中最 ...