天天看点

jquery插件-手风琴效果

<!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>jquery插件-手风琴效果</title>

</head>

<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 type="text/css" href="./css/jquery-ui-1.8.18.custom.css" target="_blank" rel="external nofollow" rel="stylesheet">

<script type="text/javascript">

  $(function (){

  // var option={ header: "h3" };

   $("#accordion").accordion({

    header:"h3",//头信息 h3 必须是h3 页面中的div中是什么必须是什么

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

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

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

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

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

    icons:{ //图标的设置 header默认是的效果  headerSelected 面板激活的效果

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

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

     }

    }).sortable({

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

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

     });

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

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

            alert("eee");   

    }); 

   });

</script>

<body>

<!--

   jquery UI 使用前提

      第一步:引入类库文件

             JS

             CSS

       第二步:模拟实现

-->

<div id="accordion" style="width:600px; height:600px; border:#00F solid 1px;">

   <div>

    <h3><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Second</a></h3>

    <div>Phasellus mattis tincidunt nibh.</div>

   </div>

   <div>

    <h3><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Third</a></h3>

    <div>Nam dui erat, auctor a, dignissim quis.</div>

   </div>

  </div>

</body>

</html>

效果图:

jquery插件-手风琴效果

继续阅读