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";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>
?
轉載于:https://www.cnblogs.com/YyuTtian/p/4267913.html
總結
- 上一篇： 驾照一分能换多少钱啊
- 下一篇： Java Web 中的一些问题