JQuery之UI插件

1、拖曳插件之traggable

拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：

$(selector). draggable({options})

options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。

例如，在页面中的<div>元素中添加两个子类<div>，通过与拖曳插件绑定，这两个子类<div>元素只能在外层的父<div>元素中任意拖曳，

<head><title>拖曳插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div id="x" class="drag">沿x轴拖拽</div><div id="y" class="drag">沿y轴拖拽</div></div><script type="text/javascript">$(function () {$("#x").draggable({containment:"parent",axis:"x"});$("#y").draggable({containment:"parent",axis:"y"});});</script></body>

2、放置插件之droppable

除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下：

$(selector).droppable({options})

selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。

例如，在页面中，通过调用droppable插件将“产品区”中的元素拖曳至“购物车”中，同时改变“购物车”的背景色和数量值，

<head><title>放置插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div class="box"><div class="title">产品区</div><div class="drag"><div>苹果</div></div></div><div class="box"><div class="title">回收站</div><div class="cart"><div id="tip">还没有产品</div></div></div></div><script type="text/javascript">$(function () {$(".drag").draggable();$(".cart").droppable({drop: function () {num++;$(this).addClass('focus'); //改变css类$('#tip').html('');$('.title span').html(num); }})});</script></body>

3、拖曳排序插件sortabe

拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为：

$(selector).sortable({options});

selector参数为进行拖曳排序的元素，options为调用方法时的配置对象，

例如，在页面中，通过加载sortable插件将<ul>元素中的各个<li>表项实现拖曳排序的功能，

 <head><title>拖曳排序插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title"><span class="fl">我最喜欢的运动</span></div><div class="content"><ul><li>1)足球</li><li>2)散步</li><li>3)篮球</li><li>4)乒乓球</li><li>5)骑自行车</li></ul></div></div><script type="text/javascript">$(function () {$("ul").sortable({delay:2,opacity:0.45})});</script></body>

4、面板折叠插件accordion

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容，调用格式如下：

$(selector).accordion({options});

其中，参数selector为整个面板元素，options参数为方法对应的配置对象。

例如，通过accordion插件展示几个相同区域面板的折叠效果，

<head><title>面板折叠插件</title><link href="Css/jquery-ui.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div id="accordion"><h3><a href="#">白富美</a></h3><ul><li>咱们结婚吧!</li><li>sdsdsaa</li></ul><h3><a href="#">土豪族</a></h3><p>咱们交个朋友吧!</p></div></div><script type="text/javascript">$(function () {$("#accordion").accordion();});</script></body>

5、选项卡插件tabs

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题对应的内容，它的调用格式如下：

$(selector).tabs({options});

selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。

例如，在页面中，添加选项卡的标题和内容元素，并绑定tabs插件，当点击标题时，以选项卡的方式切内容，

<head><title>选项卡插件</title><link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div id="tabs"><ul><li><a href="#tabs-1">最爱吃的水果</a></li><li><a href="#tabs-2">最喜欢的运动</a></li></ul><div id="tabs-1"><p>橘子</p><p>香蕉</p><p>葡萄</p><p>苹果</p><p>西瓜</p></div><div id="tabs-2"><p>足球</p><p>散步</p><p>篮球</p><p>乒乓球</p><p>骑自行车</p></div></div></div><script type="text/javascript">$(function () {$("#tabs").tabs({//设置各选项卡在切换时的动画效果fx: { opacity: "toggle", height: "toggle" },event: "mousemove" //通过移动鼠标事件切换选项卡})});</script></body>

6、对话框插件dialog

对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为：

$(selector).dialog({options});

selector参数为显示弹出对话框的元素，通常为<div>，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

例如，当点击“提交”按钮时，如果文本框中的内容为空，则通过dialog插件弹出提示框，提示输入内容不能为空，

 <head><title>对话框插件</title><link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div class="content"><span id="spnName" class="fl">张三</span><input id="btnDelete" type="button" value="删除"  class="fr"/></div><div id='dialog-modal'></div></div><script type="text/javascript">$(function () {$("#btnDelete").bind("click", function () { //询问按钮事件if ($("#spnName").html() != null) { //如果对象不为空sys_Confirm("您真的要删除该条记录吗？");return false;}});});function sys_Confirm(content) { //弹出询问信息窗口$("#dialog-modal").dialog({height: 140,modal: true,title: '系统提示',hide: 'slide',buttons: {'确定': function () {$("#spnName").remove();$(this).dialog("close");},'取消': function () {$(this).dialog("close");}},open: function (event, ui) {$(this).html("");$(this).append("<p>" + content + "</p>");}});}</script></body>

7、菜单工具插件menu

菜单工具插件可以通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下：

$(selector).menu({options});

selector参数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象。

例如，在页面中，通过<ul>元素内联的方式构建一个三层结构的导航菜单，并将最外层<ul>元素通过menu()方法绑定插件，实现导航菜单的功能，

<head><title>菜单工具插件</title><link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><ul id="menu"><li><a href="#">小明一中</a><ul><li><a href="#">高中部</a><ul><li><a href="#">高一(1)班</a></li><li><a href="#">高一(2)班</a></li><li><a href="#">高一(3)班</a><ul><li><a href="#">小胡</a></li><li><a href="#">小李</a></li><li><a href="#">小陈</a></li></ul></li></ul></li><li><a href="#">初中部</a><ul><li><a href="#">初一(1)班</a></li><li><a href="#">初一(2)班</a></li><li><a href="#">初一(3)班</a></li></ul></li><li><a href="#">教研部</a></li></ul></li><li class="ui-state-disabled"><a href="#">大明二中</a></li></ul><script type="text/javascript">$(function () {$("#menu").menu();});</script></body>

8、微调按钮插件spinner

微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，调用格式如下：

$(selector).spinner({options});

selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。

例如，将页面中的三个输入文本框都与微调插件相绑定，当改变三个文本框值时，对应的<div>元素的背景色也将随之发生变化，

<head><title>微调按钮插件</title><link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title">选择颜色值</div><div class="content"><span id="spnColor" class="input fl"><input /></span><span id="spnPrev" class="prev fr"></span></div></div><script type="text/javascript">$(function () {//定义变量var intR = 0, intG = 0, intB = 0, strColor;$("input").spinner({//初始化插件max: 10,min: 0,//设置微调按钮递增/递减事件spin: function (event, ui) {if (ui.value == 8)spnPrev.style.backgroundColor = "red";elsespnPrev.style.backgroundColor = "green";},//设置微调按钮值改变事件change: function (event, ui) {var intTmp = $(this).spinner("value");if (intTmp < 0) $(this).spinner("value", 0);if (intTmp > 10) $(this).spinner("value", 10);if (intTmp == 8)spnPrev.style.backgroundColor = "red";elsespnPrev.style.backgroundColor = "green";}});});</script></body>

9、工具提示插件tooltip

工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置，它的调用格式如下：

$(selector).tooltip({options});

其selector为需要显示提示信息的元素，可选项参数options为tooltip()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。

例如，将三个<a>元素与工具提示插件相绑定，当把鼠标移动在<a>元素内容时，以动画效果弹出对应的提示图片，移出时，图片自动隐藏，

<body><div id="divtest"><div class="title">工具提示插件</div><div class="content"><div><label for="name">姓名</label><input id="name" name="name" title="我是土豪，欢迎与我做朋友" /></div></div></div><script type="text/javascript">$(function () {$("input").tooltip({show: {effect: "slideDown",delay: 350},hide: {effect: "explode",delay: 350},position: {my: "left top",at: "left bottom"}});});</script></body>

最近在整理一些资源工具，放在网站分享 http://tools.maqway.com
欢迎关注公众号：麻雀唯伊，不定时更新资源文章，生活优惠，或许有你想看的

JQuery之UI插件相关推荐

分享一款jQuery的UI插件：Ninja UI
支持组件: 自动补齐 autocomplete 按钮 button 对话框 Dialog 抽屉层 drawer 图标 icon 菜单 menu 星级评级 Rating 滑动器选择 Slider 标签 ...
JQuery Dialog UI按钮文字国际化
在使用JQuery Dialog UI插件时,也许你会遇到这样的问题:怎样动态改变按钮显示的文字?特别是在做国际化的时候.我们知道,在JQuery Dialog中可以自定义按钮Button $(&qu ...
初学jQuery Easy UI的总结
1.使用jQuery Easy UI的目的: jQuery Easy UI是一组基于jQuery的UI插件集合,而jQuery Easy UI 的目标就是帮助Web开发者更轻松的打造出功能丰 ...
jQuery UI 插件
jQuery UI 插件 1.概述 1.简介 UI -> User Interface用户界面 jQuery UI是jQuery官方提供的插件,他强化了jQuery中搭载的动画效果及特效,以实现 ...
第四十四课：jQuery UI和jQuery easy UI
jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...
JQuery Smart UI 简介（五） — 框架设计【前篇】（前台UI层架构）
有不少朋友,在使用演示demo时,出现了打不开access数据库的情况,经园友@smalltide的帮助下,找到了问题,数据层读取默认连接信息时有误(该问题也可能存在其他多数据并存的系统),暂时不更新 ...
7个jquery easy ui 基本组件图解
下面给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head><meta charset=&q ...
jQuery的Tooltip插件
Tooltip插件取代了原生的工具提示框,让它们可自定义只需要调整它们的内容.位置和外观即可示例代码 <!doctype html> <html> <head> ...
jQuery的Autocomplete插件
Autocomplete插件根据用户输入值进行搜索和过滤让用户快速找到并从预设值列表中选择通过给Autocomplete字段焦点,或者在其中输入字符,插件开始搜索匹配的条目并且,显示供选择的值 ...

JQuery之UI插件

JQuery之UI插件相关推荐

最新文章

热门文章