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

jquery插件手风琴的效果

2012-03-28 19:01 696 查看

<!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(){

// var option = { header: "h3",s }; //[{},{},{}]

$("#accordion").accordion({

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

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

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

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

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

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

// ui item help 等

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

}*/

});

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

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

alert("会i会i会");

});

});

</script>

</head>

<body>



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

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

标签：

相关文章推荐

新的分享

章节导航