您的位置：首页 > Web前端 > JQuery

jQuery UI型插件

2016-05-02 14:13 471 查看

1.拖拽插件 draggable

调用draggable()方法，实现各种拖拽元素的效果

$(selector).draggable({options})

options：配置对象

-containment：拖曳区域

-axis：拖曳时的坐标方向

$(function () {
$("#x").draggable({containment:"parent",axis:"x"});
$("#y").draggable({containment:"parent",axis:"y"});
});

！x,y不能写成大写

2.放置插件 droppable

$(selector).droppable({options}})

-options：配置对象

-drop()：该函数表示当被接受的拖拽元素完全进入接收元素的容器时，触发该函数的调用

$(function () {
$(".drag").draggable();
$(".cart").droppable({
drop: function () {
$(this)
.addClass("focus");
$("#tip").html("");
}
})
});

3.拖拽排序插件 sortable

将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，

实现拖曳排序的功能

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

$(function () {
$("ul").sortable({
delay:2,//延时
opacity:0.35//透明度
})
});

4.面板折叠插件 accordion

点击标题时展开内容，再点另一标题时，关闭已展开的内容

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

5.选项卡插件 tabs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
</html>

6.对话框插件 dialog

实现JavaScript中alert()和confirm()函数的功能

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

$(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>");
}
});
}

7.菜单工具插件 menu

$(function () {
$("#menu").menu();
});

8.微调按钮插件 spinner

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

-options：在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。

$(function () {
//定义变量
var intR = 0, intG = 0, intB = 0, strColor;
$("#spnPrev").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";
}
});
});

9.工具提示插件 tooltip

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

-options：在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。

$(function () {
$("#name").tooltip({
show: {
effect: "slideDown",
delay: 350
},
hide: {
effect: "explode",
delay: 350
},
position: {
my: "left top",
at: "left bottom"
}
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航