jQuery-手风琴

最新推荐文章于 2024-11-13 01:18:00 发布

phpfengzikai

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量462

点赞数

文章标签： javascript stylesheet function div header xhtml

本文链接：https://blog.csdn.net/phpfengzikai/article/details/7404742

版权

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