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

jquery插件-手风琴效果

2012-03-28 17:48 666 查看

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

/*stop:function (event,ui){

//stop 事件匿名函数event 浏览器自带的事件处理对象

//ui item help 等

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

}*/

});

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

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

alert("eee");

});

});

</script>

<body>



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

效果图：

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

标签：

相关文章推荐

新的分享

章节导航