1.交互:
$(document).ready(function(){
$("#a_btn").button().draggable();
//拖动
$("#div1").draggable();
//放置
$("#div2").droppable();
$("#div2").on("drop", function(event, ui){
//alert(event);
$("#div2").text("drop事件");
});
//缩放,鼠标放到该处后可以拖动
$("#div3").resizable();
//使用鼠标选择单个元素或一组元素。
//$("#btn").button();
//$("ul").selectable();
//$("#btn").on("click", function () {
// //alert("hello");
// if($("#r").hasClass("ui-selected")){
// alert("right");
// }
//})
// 使用鼠标调整列表中或者网格中元素的排序。
$("ul").sortable();
});
.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/app1.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
<style>
.ui-selected{
background-color: yellowgreen;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" id="a_btn">百度</a>
<div style="width: 100px; height: 100px; border: 2px solid red" id="div1"></div>
<div style="width: 200px; height: 200px; border: 2px solid green" id="div2"></div>
<div style="width: 100px; height: 100px; border: 2px solid red; background-color: #1c94c4" id="div3"></div>
<strong>海贼王</strong>
<ul>
<li id="r">路飞</li>
<li>罗杰</li>
<li>白胡子</li>
</ul>
<a href="#" id="btn">提交</a>
</body>
</html>
2. 控件
$(document).ready(function () {
//在一个有限的空间内显示用于呈现信息的可折叠的内容面板。
$("#accordion").accordion();
//根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。
var aototags = ["python","c/c++", "java"];
$("#tags").autocomplete({
source:aototags
})
//日期控件
$("#date").datepicker();
$("#btn").button();
//对话框
$("#btnd").button().on("click", function () {
$("#div").dialog();
});
})
.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/app2.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<div id="accordion">
<h3>选项1</h3>
<div>
<p>
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
</p>
</div>
<h3>选项1</h3>
<div>
<p>
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
</p>
</div>
<h3>选项1</h3>
<div>
<p>
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
</p>
</div>
<h3>选项1</h3>
<div>
<p>
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
</p>
</div>
</div>
<label>Tags:</label>
<input id="tags">
<p>Date:<input type="text" id="date"></p>
<a href="#" id="btn">按钮</a>
<div id="div">
<p>这是一个对话框</p>
</div>
<a id="btnd">对话框</a>
</body>
</html>
3. 控件2
/**
*
*/
var pb;
var max=100;
var current = 0;
var valueSpan, slider;
$(document).ready(function () {
//进度条,显示一个确定的或不确定的进程状态。
//$("#pb").progressbar({value:50});
pb=$("#pb");
pb.progressbar({max:100});
setInterval(function () {
current++;
if(current>=100){
current=0;
}
pb.progressbar("option", "value", current);
}, 100);
// 菜单
$("#menu").menu({position:{at:"left bottom"}});
//滑块
//$("#slider").slider();
slider = $("#slider");
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"));
}
})
//下拉菜单
$("#spinner").spinner();
$("#spinner").spinner("value","10");
$("#btn").on("click", function () {
alert($("#spinner").spinner("value"));
})
//tabs
$("#tabs").tabs();
});
.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/app3.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
<style>
#menu{
width: auto;
}
.ui-menu:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.ui-menu .ui-menu-item{
display: inline-block;
float: left;
margin: 0;
padding: 10;
width: auto;
}
</style>
</head>
<body>
<!--进度条-->
<div id="pb"></div>
<!-- 菜单-->
<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/C++</li>
<li>Python</li>
<li>R</li>
</ul>
<!-- 滑块-->
<span id="span">0</span>
<div id="slider"></div>
<!-- 下拉菜单-->
<input id="spinner">
<button id="btn">getValue</button>
<!-- tabs-->
<div id="tabs">
<ul>
<li><a href="#hello1">hello1</a></li>
<li><a href="#hello2">hello2</a></li>
<li><a href="#hello3">hello3</a></li>
</ul>
<div id="hello1">
hello1
hello
hello
</div>
<div id="hello2">
hello2
hello
hello
</div>
<div id="hello3">
hello3
hello
hello
</div>
</div>
</body>
</html>