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>