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

来源:互联网 发布:内蒙古自治区大数据局 编辑:程序博客网 时间:2024/05/09 07:54
<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>                


原创粉丝点击