jQuery UI简单的讲解
我们先进入一下问答时间，你都知道多少呢？
（1）什么是jQuery UI 呢？
解答：jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。
（2）jQuery UI 的组件组成：
解答：Query UI 主要分为3个部分：交互、微件和效果库。
（3）jQuery UI和jQuery的主要区别?
解答：(1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
(2) jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行
为、改变大小行为等等。
简单的问答就先到这里吧，让我们切入代码的世界吧！
第一个小示例：利用dialog实现form表单提交
第一步先准备项目所需的jQuery UI所需要的支持文件
<!-- 样式引用-->
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<!-- jQuery引用-->
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<!-- jQuery UI引用 -->
<script type="text/javascript" src="js/jquery-ui.js"></script>
官网下载地址：http://jqueryui.com/download/
在项目webapp下创建文件夹，名称为js,把文件发在js文件夹下。目录结构如下：
第二步搭建页面:
<body>
<div id="dialog">
<h2>用户登录</h2>
<form action="ls" method="post">
用户名：<input type="text" name="uname" id="uname"/><br/>
密 码：<input type="text" name="pwd" id="pwd"/><br/>
</form>
</div>
<input id="opener" type="button" value="打开form表单"/>
</body>
第三步编写<script></script>标签内的代码：
<script type="text/javascript">
$(function(){
$("#dialog").dialog({
//是否自动打开 默认为true
autoOpen:false,
width:,
height:,
//点击按钮触发
buttons:{
"提交":function(){
//表单提交
$("form").submit();
}
}
});
//点击对话窗口时打开隐藏的form表单
$("#opener").click(function(){
$("#dialog").dialog("open");
});
});
</script>
dialog插件的常用参数：
常用参数：
属性 类型 说明
Boolean autoOpen 属性 设置该组件被调用时的打开状态。默认值为true，即打开对话框
Object buttons 或
Array buttons 属性 显示一个按钮，可以设置该按钮的显示文本和点击函数
Boolean modal 属性 设置组件是否使用模式窗口。默认为false
close() 方法 执行关闭对话框操作
open() 方法 执行打开对话框操作
beforeClose(event,ui) 事件 当dialog尝试关闭时，此事件将被触发
参数说明：event为事件对象，ui为当前插件对象
close(event,ui) 事件 当dialog被关闭后，此事件将被触发
open(event,ui) 事件 当dialog被打开后，此事件将被触发
可以根据上面的参数，编写代码。
用户登录提交到servlet进行判断，所以我在这里创建了一个LoginServlet进行逻辑判断
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("uname");
String pwd = request.getParameter("pwd");
if("".equals(name)&&"".equals(pwd)){
request.getSession().setAttribute("name",name);
response.sendRedirect("/09jQueryUI/success.jsp");
}else{
response.sendRedirect("/09jQueryUI/index.jsp");
}
}
}
成功页面把用户名打印出来即可。。
<body>
欢迎：<%=request.getSession().getAttribute("name") %>
</body>
上述的代码就是一个简单的dialog插件应用的小案例，你再也不用羡慕那些网站做的花哨的页面了，因为你也可以的。。。。。
接下来我继续讲解下一个jQuery UI常用的插件，会是什么呢？来猜一猜，它就是tabs插件
tabs插件支持多种风格的选项卡模式，普通选项卡，带子选项的选项卡，扁平风格的选项卡，响应式选项卡和手机选项卡等。
上述的支持文件我们就不再次讲解了。
页面的创建：
<body>
<div id="myTabs">
<ul>
<li><a href="#firstTab">第一个</a></li>
<li><a href="#secondTab">第二个</a></li>
<li><a href="#thirdTab">第三个</a></li> </ul>
<div id="firstTab">第一个选项卡</div>
<div id="secondTab">第二个选项卡</div>
<div id="thirdTab">第三个选项卡</div>
</div>
</body>
<script></script>标签内的代码：
<script type="text/javascript">
$(function(){
$("#myTabs").tabs({
//是否可以折叠 默认为false
collapsible:true,
//默认打开第几个选项卡
active:,
//点击某个选项卡时触发的事件
activate:function(event,ui){
//改变内容
ui.newPanel.html("内容被改变了");
//输出上一个选项卡的内容
alert(ui.oldPanel.html());
} });
});
</script>
你也可以在选项卡内在嵌套子选项卡，在这里就是做实现了，有想法的同学可以在闲余的时间试试。。。。
我们还要讲点什么呢，总觉得缺少点东西是不是，对了还有menu插件呢？
menu:菜单的意思。
我们经常在上网的时候，有很多网站都有下拉列表框包含子类的效果，我们也可以做一个简单的效果。。。。
页面搭建：
<div >
<ul id="menu">
<li><a href="#">系统管理</a></li>
<li><a href="#">市场管理</a></li>
<li><a href="#">财务管理</a>
<ul> <li class="ui-state-disabled"><a href="#">财务部</a></li>
<li><a href="#">考核部</a></li>
</ul>
</li>
<li><a href="#">产品管理</a>
<ul>
<li><a href="#">产品检测部</a>
<ul>
<li><a href="#">产品合格</a></li>
<li><a href="#">产品报废</a></li>
</ul>
</li>
<li><a href="#">产品销售部</a> </li>
</ul>
</li>
</ul> </div>
<script></script>标签内的代码：
<script type="text/javascript">
$(function(){ $("#dialog").hide();
$("#mydiv").mouseover(function(){
$("#dialog").show();
});
$("#mydiv").mouseout(function(){
$("#dialog").hide();
}); $("#menu").menu({
//不可用
// disabled:true,
//获得焦点触发的事件
focus:function(){
//当我们移动到任何选项上时，都会把整个下拉菜单变为不可用
$(this).menu("option","disabled",true);
} });
});
</script>
<style type="text/css">
.ui-menu{
width:120px;
}
li{
list-style-type: none;
}
#mydiv{
width:120px;
}
</style>
这里就可以实现下拉列表框的效果，下面的图为常用的参数：
常用参数：
属性 类型 说明
Object icons 属性 设置该组件使用菜单图标
Boolean disabled 属性 设置菜单不可用
option(String name) 方法 获取指定选项的值
expand([event]) 方法 打开当前菜单项的子菜单
focus(event,ui) 事件 当菜单获取焦点或任何菜单项被打开时，触发该事件
menu插件还能实现一种，外部引用的效果，在一个页面通过点击按钮加载数据。。。。
页面上的代码：
<body>
<div>
<ul id="menu">
<li><a href="#">系统管理</a></li>
</ul>
</div>
</body>
<script></script>标签内的代码：
<script type="text/javascript">
$(function(){
$("#menu").menu({
select:function(){
$.get("info.jsp",function(data){
$("#menu").append(data);
$("#menu").menu("refresh");
});
} });
});
</script>
<style type="text/css">
.ui-menu{
width:120px;
}
li{
list-style-type: none;
}
</style>
引用页面的代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<li><a href="#">市场管理</a></li>
<li><a href="#">财务管理</a>
<ul>
<!-- 这里设置的属性为不可用状态 -->
<li class="ui-state-disabled"><a href="#">财务部</a></li>
<li><a href="#">考核部</a></li>
</ul>
</li>
<li><a href="#">产品管理</a>
<ul>
<li><a href="#">产品检测部</a>
<ul>
<li><a href="#">产品合格</a></li>
<li><a href="#">产品报废</a></li>
</ul>
</li>
<li><a href="#">产品销售部</a> </li>
</ul>
</li>
一个简单的引用就是这样实现了，再也不用为了那么绚丽的页面而羡慕了。。。。。
最后讲解一个我们经常碰到的情况，就是当我们在百度页面或者必应页面搜索资料时，往往你还没打完，下面就会联想出来一些相关的词汇，是不是很智能呢？我们接下来讲解的autocomplete插件就可以实现这个效果。
先来点理论的：
语法：
$(selector).autocomplete([settings]); 常用属性：
属性 说明
String Source 或 用于指定数据来源，类型为String、Array、function
Array Source 或 String：用于Ajax请求的URL地址，返回Array（JSON格式）
Array：即字符串数组 或 JSON数组
function Source( function(request, response)：
Object reuqest, 通过request.term获得输入的值（term为默认参数名），
function response( response([Array])用来呈现远程数据
Object data )) Integer minLength 当输入框内字符串长度达到minLength时，激活autocomplete Boolean autoFocus 当autocomplete选择菜单弹出时，自动选中第一个 Integer delay 即延迟多少毫秒激活autocomplete 常用事件:
事件 说明
focus(event,ui) autocomplete的结果列表任意一项获得焦点时触发
ui.item为获得焦点的项 select(event,ui) autocomplete的结果列表任意一项选中时触发
ui.item为选中的项 change(event,ui) 当值改变时触发
ui.item为选中的项
接下来一个小示例：
邮箱效果：
email 效果
//准备数组存储域名
var hosts = ["126.com","gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "qq.com", "163.com"];
$("#email").autocomplete({
autoFocus: true,
//定义资源函数
source: function(request, response) {
var term = request.term, //request.term为输入的字符串
ix = term.indexOf("@"),
name = term, // 用户名
host = "", // 域名
result = []; // 结果 result.push(term);
if (ix > -) {
name = term.slice(, ix);
host = term.slice(ix + );
}
if (name) {
var findedHosts = (host ? $.grep(hosts, function(value) {
return value.indexOf(host) > -;
}) : hosts),
findedResults = $.map(findedHosts, function(value) {
return name + "@" + value; //返回字符串格式
});
result = result.concat($.makeArray(findedResults));
}
response(result); //呈现结果
}
}); <div><input type="text" id="email"/></div>
在这里解释一下，上面用的我们陌生的方法：
解释：
grep方法 使用过滤函数过滤数组元素。
此函数至少传递两个参数：待过滤数组和过滤函数。
过滤函数必须返回 true 以保留元素或 false 以删除元素。 源码分析：
grep: function( elems, callback, inv ) {
var ret = [], retVal;
inv = !!inv; // Go through the array, only saving the items
// that pass the validator function
for ( var i = , length = elems.length; i < length; i++ ) {
retVal = !!callback( elems[ i ], i );
if ( inv !== retVal ) {
ret.push( elems[ i ] );
}
} return ret;
} makeArray方法 将类数组对象转换为数组对象。
类数组对象有 length 属性，其成员索引为 至 length - 。
实际中此函数在 jQuery 中将自动使用而无需特意转换。 源码分析：
// results is for internal usage only
makeArray: function( array, results ) {
var ret = results || []; if ( array != null ) {
// The window, strings (and functions) also have 'length'
// Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930
var type = jQuery.type( array ); if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) ) {
push.call( ret, array );
} else {
jQuery.merge( ret, array );
}
} return ret;
}, 这里接受两个参数，其中第二个参数是内部使用的，在源码内部经常被调用作为其他方法的支持方法。
创建一个新数组ret，如果只有一个参数则为空，如果存在第二个参数就把第二个参数赋值给ret，
在array参数存在的前提下获取其数据类型，如果数据类型为字符串、函数或者正则时或者不存在length属性时，
则假定array不是数组或者类数组，因为字符串、函数和正则（黑莓系统下）都是有length属性的，
所以只判断length不准确，如果不是数组或者类数组就直接将第一个参数放入ret的末尾。
如果通过了则认为是数组或者是类数组，此时调用merge方法将两个数组合并，最后返回ret。
其实写到这里，我们经常用得插件就差不多了，如果你还想继续研究，可以搜索相关的博客。。。。。。
jQuery UI简单的讲解的更多相关文章
- Jquery ui autocomplete简单api
重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...
- jquery ui progressbar简单使用deom
jquery api 和下载: http://api.jqueryui.com/progressbar/#option-value <!doctype html> <html lan ...
- 《jQuery UI开发指南》勘误收集
此书由罗晴明 (http://weibo.com/sunnylqm)和我合译完成,此篇博客作为勘误收集而用,若译文有误或者有任何疑问,欢迎留下评论,或者给我发邮件(地址:gzooler@gmail.c ...
- jQuery UI框架
jQuery UI框架 1.oschina开源社区-jQuery教程 2.jQuery PrimeUI(推荐) 3.弹出框.警告框.提示框.拖动支持.位置固定.选项卡切换 4.Bootstrap框架( ...
- 这 5 个前端组件库，可以让你放弃 jQuery UI
欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 在建立Web应用时,通常都需要用到一些有用的UI组件.无论应用中需要的是日历,滑块,图形或其它用于提升或简化用户交互的组件,那么 ...
- 【转】推荐10款最热门jQuery UI框架
推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...
- jQuery UI Datepicker使用介绍
本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...
- 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
- jQuery ui 框架
jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ...
随机推荐
- CentOS6.5加域
为减少错误已提前关掉了SELinux,防火墙. yum install nss-pam-ldapd -y 第一步:更改主机名为linux.itxdm.me 第二步:更改setup内左边Winbind ...
- docker版redmine安装部署
数据库准备 docker run -d --name some-postgres -e POSTGRES_PASSWORD=secret -e POSTGRES_USER=redmine postgr ...
- windows jenkins 卸载
如果下载的是war包,先在任务管理器上停止jenkins的服务,再删除jenkins整个文件
- RestTemplate--解决中文乱码
[原文链接]:https://www.tecchen.xyz/rest-template-messycode.html 我的个人博客:https://www.tecchen.xyz 在开发扇贝-每日一 ...
- js 多个异步 的并发控制
今天在群里看到一个人发的面试题: 1,请实现如下的函数,可以批量请求数据,所有的URL地址在urls参数中,同时可以通过max参数 控制请求的并发度.当所有的请求结束后,需要执行callback回调. ...
- secureCRT scripts as vbs
gdb multithread debug. lsusb.py # $language = "VBScript" # $interface = "1.0" Su ...
- DGIS之遥感影像数据获取
1.概要 在GIS圈的同行或多或少接触过遥感,记得在大学老师就说过"数据是GIS的核心".本文介绍在国内下载遥感影像的方法. 地理空间数据云,这个是中科院计算机网络中心建设的一个免 ...
- CPU飚高问题排查基本步骤
CPU 飚高 一般是死循环或者死锁问题导致. 1. 通过 top 命令找到 CPU 消耗最高的进程,并记住进程 ID {pid}.top -M -n 2 -d 3 >{pid}/top.txt ...
- docker仓库harbor镜像列表获取命令
2019-03-14 搭建好docker仓库harbor之后,在服务器上获取harbor的所有镜像列表命令 curl -u "harbor账号:密码" -X GET -H &quo ...
- 一段自用javascript代码
function jsontoarray(mjson) { var arr = []; ; for(var x in mjson.data){ arr[i] = new Array(); arr[i] ...