您的位置：首页 > Web前端 > JQuery
jquery插件手风琴效果

2012-03-28 21:10 489 查看
<!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>
<style type="text/css">
body{ font:62.5% "Trebuchet MS", sans-serif; margin: 50px;}
</style>
<link rel="stylesheet" href="include/ui-lightness/jquery-ui-1.8.18.custom.css" />

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

//使用jquery加载事件
$(document).ready(function (){

//json格式 var option={header:"h3",} //[{},{},{}]

$("#accordion").accordion({

header: "h3", //头信息 h3 必须是h3 因为页面中div是h3
event: "click", //面板展开的事件效果 默认是click效果 还有mouseover
active:2, //默认展开的面板 从0开始 默认值0
animated:"bounceslide", //面板展开的 动画效果
autoHeight:true,  //面板的高度 是否是自动增高
fillSpace:false,    //true填充到父元素
clearStyle:false,  //清空style样式 clears height and overflow styles
navigation:false,
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 help等
ui.item.children("h3").triggerHandler("focusout");
}*/

});

//通过绑定操作方式，写事件处理 第二种
$("#accordion").bind("sortstop",function(event,ui){

alert("已拖拽");
});

});
</script>
</head>

<body>

<!--

jquery UI使用前提
第一步:引入别人类库文件
js类库
css样式类库文件
-->

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

<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet.<br> 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航