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

简单的手风琴效果实现实际比看起来简单,只是改变当前的元素宽度和其他元素的宽度,其代码如下(图片什么的都要换成自己噢)         Title             *{m...
  • sunflower_li
  • sunflower_li
  • 2017年03月16日 15:10
  • 789

【JQuery】jQuery自制简易手风琴效果(附实现原理)

简易手风琴效果,附实现原理
  • LZGS_4
  • LZGS_4
  • 2015年08月30日 09:48
  • 7834

jQuery自制手风琴效果增强版(附实现原理)

手风琴菜单栏效果通常用在页面左侧,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,我在http://blog.csdn.net/lzgs_4/article/details/48101...
  • alokka
  • alokka
  • 2017年06月15日 22:52
  • 789

使用jQuery实现手风琴效果

手风琴效果 /*UI的使用要引入别人的类库文件 js类库 css样式 */ $(function(){ //var option={header:"h3"}; $("#acco...
  • bing7599069
  • bing7599069
  • 2012年03月28日 16:52
  • 310

纯CSS实现手风琴效果

今天来看一个使用hover触发的一个手风琴效果,鼠标hover时改变图像宽度,配合transition实现动画,效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。...
  • whqet
  • whqet
  • 2014年02月23日 10:32
  • 7852

用jquery实现手风琴效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 实现手风琴...
  • shanhuchong67
  • shanhuchong67
  • 2012年03月28日 21:31
  • 181

jQuery实现手风琴效果【详细注解】

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档...
  • zwt90
  • zwt90
  • 2012年03月28日 21:00
  • 325

三行jquery实现手风琴效果

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

jQuery实现手风琴效果

jQuery实现手风琴效果 *{ margin: 0; padding: 0; } ul{ list-style: none; } .parent{ width: 200px; text-...
  • XLjiqimaobuchiyu
  • XLjiqimaobuchiyu
  • 2017年09月12日 22:54
  • 81

一起来写一个简易的手风琴效果

基于JQ的手风琴效果。
  • AmberWu
  • AmberWu
  • 2017年05月22日 10:10
  • 416
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jQuery实现 模拟手风琴效果
举报原因:
原因补充:

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