关闭

jQuery-手风琴

251人阅读 评论(0) 收藏 举报

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:65472次
    • 积分:744
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:6篇
    • 译文:0篇
    • 评论:3条
    最新评论