您的位置：首页 > Web前端 > JQuery

jquery中手风琴效果实用源代码

2012-03-28 17:38 555 查看

<!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 type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

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

<script type="text/javascript">

$(function(){

$("#accordion").accordion({

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

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

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

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

autoHeight:true, //面板的高度是否是自动增高的，默认为true

fillSpace: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操作控件对象

//alert("你要停止吗？");

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

}*/

});

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

alert("hdsadhhds");

});

});

</script>

</head>

<body>

<div id="accordion" style="width:600px; height:400px; border:#0F0 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航