jquery-accordion-dialog-tabs

jquery的一写插件可以实现以前用一堆代码来实现的功能如手风琴效果、覆盖、移除、爆炸等功能

手风琴

$(function(){
     // var option = { header: "h3",s };  //[{},{},{}]
     $("#accordion").accordion({
   header:"h3",        // 头信息 h3 必须是h3 页面中div中是什么 这里必须是什么
event: "mouseover",  //面板展开的事件效果  默认是 click效果 
active:1,   //默认展开的面板  从0开始   默认值0   
   animated:"bounceslide", // 面板展开的  动画效果  
                autoHeight:true,   //面板的高度  是否是自动 增高
   fillSpace:false,   //true填充到父元素
icons:{           //图标的设置    header 默认时的效果  headerSelected 代表是面板激活状态的效果图标
  header:"ui-icon-carat-2-e-w",
  headerSelected:"ui-icon-carat-2-n-s"
}
 }).sortable({
      axis:"y",//只能在y轴上拖拽排序  x轴    x,y 默认 x,y
  handle:"h3"//只能拖拽 h3
/*  stop:function(event,ui){ //stop 事件  匿名函数  event 浏览器自带的事件处理对象  ui 操作控件对象
       // ui item help 等
    ui.item.children("h3").triggerHandler("focusout");
  }*/
});

//通过绑定的操作方式 写事件处理
$("#accordion").bind("sortstop",function(event,ui){
  alert("会i会i会");
});
});

对话框

$(function(){
  //注册对话框 
      $("#dialog").dialog({
    autoOpen:false , //设置对话框打开的方式 不是自动打开
show:"blind",  //打开时的动画效果
hide:"explode",  //关闭时的动画效果
modal:true, //遮罩效果true  false 非遮罩效果
/* buttons:{  //添加按钮的操作
  "确定":function(){
    $(this).dialog("close");//关闭对话框的操作
  },
"取消":function(){
 alert("取消的操作");
}
},
*/  //buttons的写法的第二种方式
                  buttons:[
   {
text:"ok",
click:function(){
  $(this).dialog("close");//关闭对话框的操作
}
},
 {
text:"取消",
click:function(){
  $(this).dialog("close");//关闭对话框的操作
}
}],
                  draggable:true ,//是否可以拖动的效果  true 可以拖动 默认值就是true  false代表不可以拖动
 closeOnEscape:false ,//是否采用esc键退出对话框 如果为false 则不采用 true 采用 默认值是true
 title:"添加用户操作界面" ,//对话框的标题
 position:"top", //对话框弹出的位置 可以使top left right center  bottom 默认值是 center
 width:600,  //对话框的宽度
 height:200, //对话框的高度
 resizable:false ,//是否可以改变的操作   false 则不可以改变尺寸  true可以改变尺寸   默认值是true
 zIndex:6,
 drag:function(event,ui){
    //可以测试出 对话框的当前坐标位置
 }
  });
  
  //触发连接的事件 当你点击 连接 打开一个对话
  $("#dialog_link").click(function(){
  $("#dialog").dialog("open"); //open参数  作用 打开对话框
  });
  
  
  //我怎么获取 我设置的options中的参数值
  var modalValue = $("#dialog").dialog("option","modal");
  //alert(modalValue);
  //我怎么设置options 中的参数值
  $("#dialog").dialog("option","modal",false);
 });

面板选项卡

 $(function(){
$("#tabs").tabs({
event:"mouseover",
//disabled:1 //面板不可用 1 代表的是第二个 不可以 [1,2]
fx:{
 
//opacity:0.2
opacity:'toggle' //透明度 从无到有的一个动画效果
},
selected:1 //默认选中面板
 
});//根据id选择器获取当前id选择器的jquery对象
 
$('#tabs').tabs('remove',2);//移除
 $('#tabs').tabs('add','tabl4.html','four');//添加一个面板
 
});