关闭

实现手风琴效果

标签: functionheadericonsui浏览器css
735人阅读 评论(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="./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>

<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />

<script type="text/javascript">

  $(function(){

  $("#accordion").accordion({

  header:"h3",          //头信息 h3必须h3 

  event:"mouseover" ,  //面板展开的事件效果 默认是click效果

  active:1,              //默认展开的面板从0开始  默认值0

  animated:"bounceslide",  //面板展开的动画效果

  autoHeight:true,          //面板高度  是否是自动 增高

  fillSpace:false,           //填充到父元素

  icons:{

  header:"ui-icon-carat-2-e-w",

  headerSelected:"ui-icon-carat-2-n-s"

  }

  }).sortable({

   axis:"y",  //只能在Y轴上拖拽排序  x轴 y轴 默认xy 

   handle:"h3",  //只能拖拽h3

/*    stop:function(event,ui){ //stop事件 匿名函数 event浏览器自带的处理对象 ui操作控制对象

  

 ui.item.children("h3").triggerHandler("focusout")    }

*/   });

//通过绑定的操作方式 写事件处理

$("#accordion").bind("sortstop",function(event,ui){

alert("ii");

});  

  });

</script>

</head>

<body>

<!--

  jquery  UI使用

    1、引入别人类库文件

            js类库

            css样式类库文件

-->

 <div id="accordion" style="width:600px; height:800px; 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>

 

0
0

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