首页 > 代码库 > JQuery UI
JQuery UI
//拖拽插件 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"; 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></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>
JQuery UI
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。