使用jQuery实现手风琴效果
  <!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>














 

 

 

 

 

阅读更多
想对作者说点什么? 我来说一句

现代诗歌

诗歌

Aloe_904 Aloe_904

2017-10-27 22:52:20

阅读数:72

没有更多推荐了,返回首页

不良信息举报

使用jQuery实现手风琴效果

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭