关闭

使用jQuery实现手风琴效果

标签: jqueryjavascriptstylesheetheaderfunctionxhtml
249人阅读 评论(0) 收藏 举报
  <!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="./jquery-1.7.1.js">
</script>
<script language="javascript" type="text/javascript" src="./jquery-ui-1.8.18.custom.min.js">
</script>

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

  <script language="javascript" type="text/javascript">
/*UI的使用要引入别人的类库文件
js类库
css样式

*/
$(function(){
	//var option={header:"h3"};
$("#accordion").accordion({
	header:"h3",     //头信息
	event:"mouseover",//面板展开的诗句效果,默认的
	active:1,   //默认展开的面板 从0开始 默认值0
	animated:"toggle",//面板展开的动画效果
	autoHeight:true,//面板高度 是否自动增高的
	fillSpace:true,//填充到父元素
	icons:{   //图标的设置
		header:"ui-icon-carat-2-e-w",//设置主题格式
		headerSelected:"ui-icon-carat-2-n-s"
		}
	}).sortable({
		axis:"y",//只能在y轴拖动
		handle:"h3"//只能拖拽h3
		/*stop:function(event,ui){//stop事件 匿名函数 event浏览器自带的事件处理对象
		ui.item.children("h3").triggerHandler("focusout");
			//alert("你要停止吗");
			}*/
		});
$("#accordion").bind("scortstop",function(event,ui){
	alert("sdddd");
	});

	});

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














 

 

 

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:52065次
    • 积分:1292
    • 等级:
    • 排名:千里之外
    • 原创:81篇
    • 转载:5篇
    • 译文:0篇
    • 评论:8条