jquery-accordion-dialog-tabs

原创 2012年03月28日 19:51:20

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');//添加一个面板
 
});



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

easyui中layout、accordion加tabs实现简单菜单布局实例

一般对于后台界面都是采用BorderLayout进行布局的。BorderLayout也就是将界面分成五块,如下图所示,分别有:North、East、South、West、Center其中比较特殊的是C...

【jQueryUI】利用accordion、tabs与自定义面板布局

下面将用以下的一个布局,说明jQueryUI中accordion、tabs的应用,如何用.ui-widget-content与.ui-widget-header两个元素搞出面板。 以下是在IE8的测...

Jquery-UI—制作可折叠面板(accordion)

先来看一下效果: 使用jquery-ui制作如可折叠选项卡非常简单: 第一步:引入 jquery 和 jquery-ui 文件。 注 jquery-ui 要放在jquery引入之后。因为要引...

滑动新闻 jQuery accordion

  • 2009-09-25 09:00
  • 49KB
  • 下载

Jquery Easyui-Accordion设置菜单项之间的间隔

Easyui-accordion的菜单项之间添加间隔

jquery.accordion源码

  • 2008-06-25 22:27
  • 61KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)