jQuery-手风琴

原创 2012年03月28日 21:26:35

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手风琴</title>
<script language="javascript" type="text/javascript" src="./include/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./include/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="./include/jquery-ui-1.8.18.custom.css" />
<script language="javascript" type="text/javascript">

 $(function (){
     //当有多额属性时用逗号隔开 ,  属性名:属性值
  $("#accordion").accordion({
   
   header:"h3",     //头信息    必须是h3 页面中div中是什么  这就是什么
   event:"mouseover",    //面板展开的事件效果 默认的是click 点击事件
   active:2,     //默认展开的面板  从0开始  默认的是0即第一个
   animated:"bounceslide",        //面板展开的动画效果
   autoHeight:true,         //展开面板的高度 是否自动增长  默认为true
   fillSpace:false,    //true是填充到父元素
   icon:{               // 面板图片的设置 
    header:"",     // 默认时的效果
    headerSelected:""     //激活时的效果
    }
   }).sortable({   //排序
    
    axis:"y",   //只能沿 y 轴拖拽排序   还可以是 X 轴 也可以 x,y  默认是  x,y
    handle:"h3",   //只能拖拽 h3
    /*stop:function(event,ui){              //一个event事件   匿名函数  event 浏览器自带的事件处理对象  ui 操作控制对象 (被拖拽的东西)
    //alert("dddddddd");
    //ui item help 等
    ui.item.children("h3").trigerHandler("focusout");
     }*/
    });
    <!--通过绑定事件方式 写事件处理-->
    $("#accordion").bind("sortstop",function(event,ui){
     
     alert("oooooooooooo");
     });
  });
</script>
</head>
<body>
<div id="accordion" style="width:600px; height:500px; border:#03F solid 1px">
 <div>
     <h3><a href="#">第一</a></h3>
        <div>11111111111111111111111111111111111111</div>
    </div>
    <div>
     <h3><a href="#">第二</a></h3>
        <div>2222222222222222222222222222222222222</div>
    </div>
    <div>
     <h3><a href="#">第三</a></h3>
        <div>33333333333333333333333333333333333333</div>
    </div>
</div>
</body>
</html>

Bootstrap 手风琴菜单

  • thingir
  • thingir
  • 2017年01月20日 13:31
  • 381

使用Html5实现手风琴案例

使用H5实现横向的手风琴功能 * { padding: 0; margin: 0; ...
  • k491022087
  • k491022087
  • 2017年01月09日 22:52
  • 773

jQuery自制手风琴效果增强版(附实现原理)

手风琴菜单栏效果通常用在页面左侧,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,我在http://blog.csdn.net/lzgs_4/article/details/48101...
  • alokka
  • alokka
  • 2017年06月15日 22:52
  • 775

css实现手风琴图片特效

css实现手风琴图片特效 源代码下载地址:http://www.zuidaima.com/share/1607120235957248.htm...
  • springmvc_springdata
  • springmvc_springdata
  • 2015年08月22日 09:53
  • 960

纯CSS实现手风琴效果

今天来看一个使用hover触发的一个手风琴效果,鼠标hover时改变图像宽度,配合transition实现动画,效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。...
  • whqet
  • whqet
  • 2014年02月23日 10:32
  • 7839

jquery简单手风琴效果

html: css: .sfqdiv{ width:1280px; height:300px; background-color: #...
  • encircles
  • encircles
  • 2016年08月10日 09:47
  • 288

jquery实现手风琴效果

简单的手风琴效果实现实际比看起来简单,只是改变当前的元素宽度和其他元素的宽度,其代码如下(图片什么的都要换成自己噢)         Title             *{m...
  • sunflower_li
  • sunflower_li
  • 2017年03月16日 15:10
  • 784

JQ实现手风琴菜单

效果图预览:html和jq:
  • sinat_19327991
  • sinat_19327991
  • 2017年05月17日 00:19
  • 176

angularjs巧用双向数据绑定实现手风琴效果

最近在工作总遇到需要实现类似手风琴效果的需求,如下图所示: 因为汇总(上半部分)和明细(下面的浅色部分)在不同的情况下显示的字段数量是不一样的,而且还有编辑和展示的状态切换,所以需要自己实现手风...
  • github_38469481
  • github_38469481
  • 2017年05月26日 11:42
  • 297

Bootstrap实现手风琴效果

用Bootstrap实现手风琴效果中,其实主要用到的就是一些折叠插件。
  • ganyingxie123456
  • ganyingxie123456
  • 2017年05月21日 21:33
  • 759
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery-手风琴
举报原因:
原因补充:

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