jquery ui里面提供的一些事件与效果展示
首先也要引用jquery框架以及jquery ui框架（jquery ui使用可参照“jquery ui中文说明”）。
官方参考文档：http://jqueryui.com/demos/
<script type="text/javascript" src="http://www.cnblogs.com/jq520/admin/jquery.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/jq520/admin/jquery-ui-1.8.15.js"></script>
效果：
drop
explode/分解消失
shake/摇晃
size/逐渐变大
bounce/弹跳
puff/膨胀消失
drag/可拖动
resizable/可变大小
sortable()/可拖动排序:
-
one
-
two
-
three
-
four
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="jquery-ui-1.8.15.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button id="btn">click</button>
<div id="myList" style="width:400px; height:300px; background-color:#FF9;">drop</div><br />
<div class="aa" style="width:100px; height:100px; background-color:#000; color:#FFF;">explode/分解消失</div><br />
<div class="bb" style="width:100px; height:100px; background-color:#f60; color:#FFF;">shake/摇晃</div><br />
<div class="cc" style="width:100px; height:100px; background-color:#0CC; color:#FFF;">size/逐渐变大</div><br />
<div class="dd" style="width:100px; height:100px; background-color:#069; color:#FFF;">bounce/弹跳</div><br />
<div class="ee" style="width:100px; height:100px; background-color:#6C0; color:#FFF;">puff/膨胀消失</div><br />
<div class="ff" id="ff" style="width:100px; height:100px; background-color:#F66; color:#FFF;">drag/可拖动</div><br />
<div class="hh" id="ff" style="width:100px; height:100px; background-color:#993; color:#FFF;">resizable/可变大小</div>
<div id="datepicker" style="margin-top:20px;"></div>
<div style="padding:2px; width:200px; border:1px #ddd solid; margin:20px 0px;"><input id="autocomplete" style="width:194px;" type="text" /></div>
<h2>sortable()/可拖动排序:</h2>
<ul class="gg" style="list-style:none; padding:0px; margin:0px; width:200px;">
<li><div style="width:100px; height:100px; background-color:#000; color:#FFF;">one</div></li>
<li><div style="width:100px; height:100px; background-color:#f60; color:#FFF;">two</div></li>
<li><div style="width:100px; height:100px; background-color:#0CC; color:#FFF;">three</div></li>
<li><div style="width:100px; height:100px; background-color:#069; color:#FFF;">four</div></li>
</ul>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.15.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myList").click(function () {
$(this).hide("drop", { direction: "left" }, 500);
});
$("#btn").click(function () {
if($("#myList").is(":hidden"))
{
$("#myList").show("drop", { direction: "right" }, 500);
}
$(".aa").show("explode",{pieces:16},1000);
});
$(".aa").click(function(){
$(this).hide("explode",{pieces:16},500);
});
$(".bb").click(function(){
$(this).effect("shake",{times:3},300);
});
$(".cc").toggle(function(){
$(this).effect("size", { to: {width: 300,height: 300} }, 500);
},function(){
$(this).effect("size", { to: {width: 100,height: 100} }, 500);});
$(".dd").click(function(){
$(this).effect("bounce",{times:3},300);
});
$(".ee").click(function(){
$(this).hide("puff",{},500); //膨胀消失
});
$(".ff").draggable({disabled:false}); //$(".ff").draggable({ axis: 'x' })只可以X轴拖动
$('.gg').sortable();
$('.hh').resizable();
$("input#autocomplete").autocomplete({
source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] //文本框检测输入提示
});
})
</script>
</body>
</html>
