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

原创 2012年03月28日 19:21:54
 
 
 
<!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>
<!-- 先加载要使用的js类库,加载的时候跟顺序有关系 -->
<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>
<!-- 加载css类库 -->
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script  language="javascript"  type="text/javascript">
$(function (){
	$("#accordion").accordion({
		  header:"h3",//设置它的开头内容
		  event:"mouseover",//设置面板展开的事件效果,默认为click
		  active:0,   //设置面板默认展开的 索引值从0开始
		  animated:"bounceslide",  //面板展开的动画效果
		  autoHeight:false,  //面板的宽度是否随着内容的增多自动增高
		  fillSpace:false,     //填充父元素
		  icons:{ //图标设置    header 默认时的效果   
			   header:".ui-icon-carat-2-e-w",   //默认图标
			   headerSelected:"ui-icon-carat-2-n-s"  //选中之后的图标改变
			     }
		  
		  }).sortable({ //拖拽效果
			  axi:"x",  //实现拖拽效果   默认的是在y轴上进行拖拽
			  handle:"h3", //实现只能拖拽h3
			  stop:function (event,ui){ //stop 事件  匿名函数   event  浏览器自带的事件处理对象 ui操作控件
				 // alert("这是真的嘿嘿");
				 ui.item.children("h3").triggerHandler("focusout")   
				    }
				  });
		//通过绑定的操作实现  事件处理		  
      $("#accordion").bind("sortstop",function (event,ui){
		  alert("这是什么东西啊"); 
		   })
	 
	 
	  })


</script>
</head>

<body>
<h1>模拟手风琴效果</h1>
<div id="accordion" style="width:600px; height:600px; 
  border:#CF3 1px solid;">
			<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实现手风琴效果

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

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

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

JQUERY实现鼠标悬停在图片上模拟放大镜效果

JQUERY实现鼠标悬停在图片上模拟放大镜效果

Jquery实现网格手风琴特效源码

  • 2013年05月31日 16:17
  • 184KB
  • 下载

Jquery实现的手风琴特效-Accordion

  • 2012年02月29日 23:25
  • 470KB
  • 下载

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

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

JS弹出层效果使用jquery实现

  • 2010年07月19日 16:44
  • 55KB
  • 下载

jquery插件实现手风琴效果!

手风琴的效果 $(document).ready(function (){ // var option = { hrader: "h3",s}; [{},{},{}]; ...
  • Oo__YAN
  • Oo__YAN
  • 2012年03月28日 21:20
  • 3022

jquery,scss实现简单的手风琴效果

jquery,scss实现简单的手风琴效果首先页面引用jquery,基本的css,之后开始对页面进行整体的布局,首先一个大的div作为容器并且设置容器的大小,之后采用ul li的形式并且要设置为浮动f...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jQuery实现 模拟手风琴效果
举报原因:
原因补充:

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