jquery插件手风琴的效果

原创 2012年03月28日 19:01:13

<!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>

<!--引入jQuery类库文件-->
<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入Css样式类库文件-->
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css"/>

<script type="text/javascript">
  
   $(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会");
    });
 });

 
</script>
</head>

<body>
      <!--
        jQuery UI 使用 前提
            第一步:引入别人类库文件
                      js类库
                      css样式类库文件
             第二步:模拟实现
      -->    
     
      <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>
</body>
</html>

【JQuery】jQuery自制简易手风琴效果(附实现原理)

简易手风琴效果,附实现原理
  • LZGS_4
  • LZGS_4
  • 2015年08月30日 09:48
  • 7791

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

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

jquery实现手风琴效果

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

简单的手风琴JS效果实现

简单的手风琴JS效果实现
  • yl_cc
  • yl_cc
  • 2017年05月17日 21:02
  • 447

jquery插件实现手风琴效果!

手风琴的效果 $(document).ready(function (){ // var option = { hrader: "h3",s}; [{},{},{}]; ...
  • Oo__YAN
  • Oo__YAN
  • 2012年03月28日 21:20
  • 3052

jquery插件-手风琴效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> jquer...
  • wo1354691371
  • wo1354691371
  • 2012年03月28日 17:48
  • 734

纯CSS实现手风琴效果

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

原生js实现手风琴菜单效果 与 css3的过渡实现手风琴效果

最近学了css3的变形、过渡和动画,写了一个用css3手风琴菜单的效果,又想着用原生JavaScript来实现手风琴菜单效果。感觉挺有意思的,现在给大家分享一下。 1、css3实现手风琴效果 ...
  • lgdshr123
  • lgdshr123
  • 2016年11月01日 17:23
  • 2397

jquery插件实现手风琴效果

课后练习 $(function(){     $("#sfq").accordion({         header:"h3",         active:1,    ...
  • AFei_student
  • AFei_student
  • 2012年03月28日 19:30
  • 327

一起来写一个简易的手风琴效果

基于JQ的手风琴效果。
  • AmberWu
  • AmberWu
  • 2017年05月22日 10:10
  • 398
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件手风琴的效果
举报原因:
原因补充:

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