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";
else
spnPrev.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";
else
spnPrev.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
欢迎关注公众号:麻雀唯伊 , 不定时更新资源文章,生活优惠,或许有你想看的