jquery 控制面板插件的基本操作

<script src="../jquery/jquery-1.7.1.js"></script>

<script src="../jquery/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css-->
<link rel="stylesheet" href="../jquery/css/jquery-ui-1.8.18.custom.css" />

<script type="text/javascript">
$(function(){
// var option={header:"h3"}; //[{},{}] json格式
$("#accordion").accordion({
header:"h3", //头信息 h3 必须是h3 页面中div中时什么 ，这里就是什么
event:'mouseover', //面板展开的事件效果 默认的是click事件
active:1 ,//默认展开的面板 从0开始 默认值是0
animated:"bounceslide",  //面板展开的 动画效果
autoHeight:true,  //面板的高度 是否是自动 增高
fallSpase:false ,//所有填充到父元素
icons:{ //图标的设置

header:"ui-icon-carat-2-n-s", //默认时的效果
headerSelected:"ui-icon-carat-2-n-s" //面板激活时的效果
}
}).sortable({
axis:'y',  //拖拽方式x /y轴   只能在y轴上拖拽
handle:"h3", //只能拖拽h3

/* stop: function(event,ui){ //stop事件 匿名函数 event浏览器自带的事件处理对象 ui藏做控制对象
//alert("你要停止么");
//ui  item help 等
ui.item.children("h3").triggerHandler("focusout");
}*/

});
//通过绑定事件实现
/*$("#accordion").bind("sortstop",function(event,ui){

alert("dddddd");
});*/
});

</script>

<div id="accordion" style="width:600px; height:600px; border:#F00 solid 1px;">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>