用jquery写的手风琴样式

原创 2012年03月28日 20:58:05
<!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="./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>

<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",//头信息h3页面中是什么 这里必须是什么
	
	  event:"mouseover", //面板展开的事件效果,默认是click事件
	
	  active:2, //默认展开的面板 从0开始 默认是0
	   
	  animated: "bounceslide", // 面板展开的 动画效果
	   
	  autoHeight:true, //面板的高度是否是自动增高的
	  
	  //fillSpace:true, //true填充到父元素
	  
	  icons:{ //图标的设置 header默认时的效果,headerSelected激活面板的时候的图标的状态
		  
		    header:"ui-icon-carat-2-e-w",
			
			headerSelected:"ui-icon-carat-2-n-s"
		  
		  }
	 
	 
	 }).sortable({
		 
		 axis:"y",//只能在y轴上拖拽排序  默认x,y
		 
		 handle:"h3", //只能拖拽h3
		 
		/* stop:function(event,ui){//stop事件 匿名函数 event浏览器自带的事件处理对象 ui操作控件 对象
			 //alert("f");
			 
			 ui.item.children("h3").trigglerHandler("focusout");
			 
			 }
			 */
			 
			 
	 })
		  $("#accordion").bind("sortstop",
		  
		  function(event,ui){
			  
			 alert("fffff"); 
			  
			  
			 
			 
		 
		 });
	
	});

</script>
</head>

<body>
   <!--
    jQuery UI 使用 前提
    第一步:引入别人类库文件
           js类库
           css类库文件
           
    第二步:模拟实现
   -->
   
  <div id="accordion" style="width:600px; height:600px; border:#FF0 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实现手风琴效果

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

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

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

jQuery和CSS3动感手风琴多级列表树菜单

mtree.js是一款效果非常炫酷的jQuery和CSS3动感手风琴多级列表树菜单插件。该手风琴多级列表树菜单基于velocity.js和CSS3 transitions来制作。它提供了5种主题样式的...
  • sunny_girls
  • sunny_girls
  • 2015年05月26日 12:59
  • 2899

jQuery手风琴效果

原地址:http://www.jq22.com/jquery-info9370
  • cometwo
  • cometwo
  • 2016年09月12日 09:34
  • 1035

jquery简单手风琴效果

html: css: .sfqdiv{ width:1280px; height:300px; background-color: #...
  • encircles
  • encircles
  • 2016年08月10日 09:47
  • 288

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

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

JqueryUI学习笔记-手风琴面板accordion

Insert title here /* IE has layout issues when sorting (see #5413) */ .group { zoom: 1 } $(f...
  • dc15822445347
  • dc15822445347
  • 2014年03月31日 12:25
  • 2371

强大的jQuery UI——学习手风琴效果

今天初次体验了一把jQuery UI,深刻体会到了它的强大之处,以下代码是实现手风琴的效果,需要引入相应的js类库,大家可去官网下载UI插件http://jquery.com/,为了方便,我将jque...
  • php_897721669
  • php_897721669
  • 2012年03月28日 19:44
  • 2919

炫酷的jQuery手风琴图片和菜单插件及源码

手风琴效果的应用非常广泛,我们常见的有手风琴图片切换和手风琴菜单,同时它也是焦点图的一种展现形式之一。今天我们就来分享一些基于jQuery的手风琴图片和菜单插件,并提供源代码下载,一起来看看吧。 ...
  • sinat_36258409
  • sinat_36258409
  • 2016年11月20日 17:42
  • 776

【Angular2】手风琴样式页面制作

【前言】 新生页面里面有一个公约,是手风琴样式的页面。这种样式比较美观,也能节省页面空间。关于手风琴样式页面的制作方式,和大家分享一下~ 一、实现思路:         引用bootstrap样式中的...
  • sz15732624895
  • sz15732624895
  • 2017年08月06日 21:53
  • 522
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用jquery写的手风琴样式
举报原因:
原因补充:

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