jquery插件手风琴效果

原创 2012年03月28日 21:10:57

 

<!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>
<style type="text/css">
body{ font:62.5% "Trebuchet MS", sans-serif; margin: 50px;}
</style>
<link rel="stylesheet" href="include/ui-lightness/jquery-ui-1.8.18.custom.css" />

<script type="text/javascript" src="./include/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./include/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">


//使用jquery加载事件
 $(document).ready(function (){
	
	//json格式 var option={header:"h3",} //[{},{},{}]
	
	$("#accordion").accordion({ 
	          
			  header: "h3", //头信息 h3 必须是h3 因为页面中div是h3
			  event: "click", //面板展开的事件效果 默认是click效果 还有mouseover
			  active:2, //默认展开的面板 从0开始 默认值0
			  animated:"bounceslide", //面板展开的 动画效果
			  autoHeight:true,  //面板的高度 是否是自动增高
			  fillSpace:false,    //true填充到父元素
			  clearStyle:false,  //清空style样式 clears height and overflow styles 
			  navigation:false,
			  icons:{            //图标设置 header默认时的效果 headerSelected代表面板激活状态时的图标
				    header:"ui-icon-carat-2-e-w",  //默认时图片
					headerSelected:"ui-icon-carat-2-n-s" //被选中时图片
				   }
			  
			  }).sortable({
				  
				   axis:"y", //只能在y轴上拖拽排序 x轴 还有x,y默认 x,y
				   handle:"h3", //采用只能拖拽h3 面板内容托不了
				   
				   /*第一种
				   stop:function (event,ui){  //stop事件 匿名函数 event浏览器自带的事件 ui操作控件对象
					       //alert("你要停止吗");
						   //ui item help等
						   ui.item.children("h3").triggerHandler("focusout"); 
					     }*/
				  
				  });
			
			//通过绑定操作方式,写事件处理 第二种	 
			$("#accordion").bind("sortstop",function(event,ui){
				
				alert("已拖拽");
				});	  
		
 });
</script>
</head>

<body>

 <!--
   
   jquery UI使用前提
    第一步:引入别人类库文件
           js类库
           css样式类库文件
 -->
 
   <div id="accordion" style="width:600px; height:250px; border:#F00 solid 1px;">
   
			<div>
				<h3><a href="#">First</a></h3>
				<div>Lorem ipsum dolor sit amet.<br> 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插件实现手风琴效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> ...

jquery插件--实现手风琴效果

无标题文档 //手风琴效果 $(function(){ //var option= { header:"h3",}; $("#accor...

jquery插件手风琴的效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 手风琴的效...

jquery插件实现手风琴效果!

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

jQuery插件的使用 --- 手风琴的效果

jQuery插件的使用 --- 手风琴的效果 在使用jQuery插件之前要导入需要的js文件和css文件,代码如下: ...

bootstrap中jquery插件——collapse折叠效果-手风琴效果

先来掌握collapse插件的基本用法,再慢慢深入实例。 collapse最基本的效果是像下图所示的,点击按钮可以显示/隐藏下面的元素: 实现代码如下:Link with href //...

jquery插件之手风琴

1、在学习jquery插件之前首先我们来看一下该怎样开始布置工作     jquery  ui使用前提:             第一步:引入类库文件                     包...

精心挑选的12款优秀 jQuery 手风琴效果插件和教程

当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架,只需很少的...
  • Tizian
  • Tizian
  • 2012年08月23日 16:21
  • 501

Jquery UI插件---手风琴效果

Jquery UI插件---手风琴效果 今天我们学习了Jquery的UI插件,感觉这个确实是个很好用的制作页面的工具。做出来的页面简单大方,很漂亮。 下面,我就主要来介绍一下我们今天学习的jque...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件手风琴效果
举报原因:
原因补充:

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