//拖拽插件 draggable
<!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="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"}); $("#y").draggable({containment:"parent",axis:"y"});//只能在父元素中移动 ,只能在y轴方向移动 });</script></body> </html>
//放置插件 droppable
<!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="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.3 //已透明度0.3 随意拖动 })});</script></body> </html>
//面板折叠插件 accordion
<!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="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><p>咱们结婚吧!</p><h3><a href="#">土豪族</a></h3><p>咱们交个朋友吧!</p></div></div><script type="text/javascript">$(function () {$("#accordion").accordion();//点白富美 土豪族隐藏 });</script></body> </html>
//选项卡 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>
//对话框插件 dialog
<!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 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> </html>
//菜单工具插件 menu
<!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><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 ><a href="#">大明二中</a></li></ul><script type="text/javascript">$(function () {$("#menu").menu();});</script></body> </html>
//微调按钮插件 spinner
<!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 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> </html>
//提示插件
<!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 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 () {$("#name").tooltip({show: {effect: "slideDown",delay: 350},hide: {effect: "explode",delay: 350},position: {my: "left top",at: "left bottom"}});});</script></body> </html>
