夜光序言:
本是青灯不归客,却因浊酒留风尘。
正文:使用鼠标调整列表中或者网格中元素的排序。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>夜光:可排序小部件(Sortable Widget)演示</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<script>$("#sortable").sortable();</script>
</body>
</html>
jQuery UI API - 日期选择器部件(Datepicker Widget)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>夜光:日期选择器部件(Datepicker Widget)演示
主要的东西和内容要看api,网上都有~~
</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<div id="datepicker"></div>
<script>
$( "#datepicker" ).datepicker();
</script>
</body>
</html>
jQuery UI API - 菜单部件(Menu Widget)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>夜光:菜单部件(Menu Widget)演示</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<style>
.ui-menu {
width: 200px;
}
</style>
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<ul id="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Item 3-1</a></li>
<li><a href="#">Item 3-2</a></li>
<li><a href="#">Item 3-3</a></li>
<li><a href="#">Item 3-4</a></li>
<li><a href="#">Item 3-5</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<script>
$( "#menu" ).menu();
</script>
</body>
</html>
jQuery UI API - 对话框部件(Dialog Widget)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>夜光:对话框部件(Dialog Widget)演示</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<button id="opener">打开对话框</button>
<div id="dialog" title="对话框标题">我是一个对话框</div>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</body>
</html>
jQuery UI API - 进度条部件(Progressbar Widget)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>夜光:进度条部件(Progressbar Widget)演示</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<div id="progressbar"></div>
<script>
$( "#progressbar" ).progressbar({
value: false
});
</script>
</body>
</html>