使用jQuery实现手风琴效果

原创 2012年03月28日 16:52:10
  <!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>














 

 

 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

使用jQuery实现 模拟手风琴效果

无标题文档 $(function (){ $("#accordion").accordion({ header:"h3",//设置它的开头内容 event:"mouseo...

三行jquery实现手风琴效果

手风琴特效的实现 实现手风琴特效,先讲一下大致的思路.1.用一个大的div 包裹住一个ul ,ul ,里面再接四个小的li, html代码结构大致如下,设置背景色是为了看出效果,最后一个是默认展...

基于jQuery实现的手风琴效果Accordion

在公司使用java ee开发的过程中,对于一些反反复复用到的web前端效果,本屌丝产生了很严重的想把他们封装好,形成各种各样的组件直接引用即可,从而减少无数次的复制粘贴的感觉。由于是自己第一次尝试封装...

jquery实现侧边栏手风琴三级导航菜单demo

jquery实现侧边栏手风琴三级导航菜单 效果图: 引入文件,font-awesome为字体库文件: css代码: ul { list-st...

Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果

首先建立数据库,数据关系图如下: 本文要实现的效果就是在评论别人文章时,如果文章内容过长或者评论内容过长,实现的一个评论分段延迟加载的效果,即每页可显示30条评论,可每隔10条延迟加载一次以提高...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)