HTML 学习笔记 JQueryUI(Interactions,Widgets)
Draggable
允许使用鼠标移动元素(拖动)
demo
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" />
</head>
<body>
<div id="div" style="width: 100px; height: 100px; border: 2px solid orange;"></div>
<script>
$(function() {
$("#div").draggable();
$("#div").on({"dragstart" : function(event,ui){
$("body").append("<div style='background: red; height: 20px; width: 20px;'>拖动开始时触发</div>")
}});
$("#div").on("dragcreate",function(event,ui) {
console.log("拖动组建被创建时触发");
})
$("#div").on("drag",function() {
alert("拖动时一直出发");
});
$("#div").on("dragstop",function(event,ui){
alert("拖动结束时触发");
});
});
</script>
</body></html>
droppable 放置事件
代码
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> </head> <body> <div id="dropDiv" style="width: 100px; height: 100px; border: 2px solid orange;"></div> <div id="dropDiv1" style="width: 200px; height: 200px; border: 2px solid red;"></div> <script> $(function() { $("#dropDiv").draggable(); $("#dropDiv1").droppable(); $("#dropDiv1").on("drop",function(event,ui){ // alert("hahahahha"); $("#dropDiv1").text("放置文件"); }); }); </script> </body> </html>
resizable()鼠标改变元素大小
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> </head> <body> <div id="resizeDiv" style="width: 100px; height: 100px; border: 2px solid orange;"></div> <script> //使用鼠标改变元素大小 $(function() { $("#resizeDiv").resizable(); $("#resizeDiv").on("resize",function(event,ui) { $("body").append("<div style='width: 20px; height: 20px; background: red;'></div>") }); }) </script> </body> </html>
selectable() 能被选中
例子
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> <style> .ui-selected { background-color: red; } </style> </head> <body> <strong>世界上最帅的人是谁?</strong> <ul id="selectedable"> <li id="right">A:田</li> <li>B:田</li> <li>C:田</li> </ul> <a href="#" id="btn">提交</a> <script> $("#btn").button(); $("#btn").on("click",function() { if ($("#right").hasClass("ui-selected")) { alert("恭喜你答对了"); } }); $("#selectedable").selectable(); </script> </body> </html>
sortable()拖动排序 简单的例子
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> </head> <body> <ul id="sortable"> <li>苹果</li> <li>香蕉</li> <li>梨子</li> <li>菠萝</li> </ul> <script> $("#sortable").sortable(); </script> </body> </html>
Accordion() 逐个展开效果
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> </head> <body> <div id="accordion"> <h3>选项一</h3> <div> <p>嘿嘿嘿</p> </div> <h3>选项一</h3> <div> <p>嘿嘿嘿</p> </div> <h3>选项一</h3> <div> <p>嘿嘿嘿</p> </div> <h3>选项一</h3> <div> <p>嘿嘿嘿</p> </div> </div> <!--//逐个展开效果--> <script> $("#accordion").accordion(); </script> </body> </html>
autocomplete()方法 智能提示补全
<html> <head> <meta charset="UTF-8"> <title>自动补全</title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> </head> <body> <label for="tags">Tags:</label> <input id="tags" /> </body> <script> $(function() { var autotags = ["ios","ime","html","java","javaScript","android"]; $("#tags").autocomplete({ source:autotags }); }); </script> </html>
datePicker() 日期选择器
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> </head> <body> <p>Date:<input type="text" id="datePicker"/></p> <script> $("#datePicker").datepicker(); </script> </body> </html>
dialog() 弹出一个对话框
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> </head> <body> <div id="dialog"> <p>这是一个对话框</p> </div> <script> $("#dialog").dialog(); </script> </body> </html>
progressbar()进度条
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> </head> <body> <div id="progressbar" style="width: 100px; height: 10px;"> </div> <script> var pb; var max = 100; var current = 100; $(function() { pb = $("#progressbar"); pb.progressbar({"max":100}) setInterval(chnagepb,100); }); function chnagepb() { current++; if (current >=100) { current = 0; } pb.progressbar("option","value",current); } </script> </body> </html>
menu()制作菜单
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> <style> #menu { width: 150px; } ul li { } .ui-menu:after{ content:"."; display: block; visibility: hidden; line-height: 0; height: 0; } .ui-menu .ui-menu-item { display: inline-block; float: left; margin: 0px; padding: 10; width: auto; } </style> </head> <body> <ul id="menu"> <li> <a href="#">Java</a> <ul> <li><a href="#">Java EE</a></li> <li><a href="#">Java SE</a></li> <li><a href="#">Java ME</a></li> </ul> </li> <li>C</li> <li>C++</li> <li>Swift</li> </ul> <script> $(function() { //设置菜单的位置 $("#menu").menu({"position":{"at":"right bottom"}}); }); </script> </body> </html>
slider()滑块
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> </head> <body> <div id="slide"></div> <span id="span">0</span> <script> var valueSpan,slider; $(function() { slider = $("#slide"); valueSpan = $("#span"); // slider.slider({change:function(event,ui) { // valueSpan.text(slider.slider("option","value")); // }}) slider.slider({slide:function(event,ui) { valueSpan.text(slider.slider("option","value")); }}) }); </script> </body> </html>
spinner() 增加或者减小输入框里面的内容
<html> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> </head> <body> <input id="spinner" /> <button id="getvalue">getValue</button> <script> $(function() { $("#spinner").spinner(); //设置默认值 $("#spinner").spinner("value","10"); $("#getvalue").click(function() { alert($("#spinner").spinner("value")); }); }); </script> </body> </html>
tabs() 选项卡
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" /> </head> <body> <div id="tabs"> <ul> <li><a href="#hello1">hello</a></li> <li><a href="#hello2">hello</a></li> <li><a href="#hello3">hello</a></li> </ul> <div id="hello1"> hello hello hello hello </div> <div id="hello2"> hello2 hello2 hello2 hello2 </div> <div id="hello3"> hello3 hello3 hello3 hello3 </div> </div> <script> $("#tabs").tabs(); </script> </body> </html>
这只是最基本的应用 具体的深入的应用还是要研究Jquery UI 的API http://api.jqueryui.com/category/utilities/