关闭

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

709人阅读 评论(0) 收藏 举报
 
 
 
<!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>

0
2

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:80547次
    • 积分:1529
    • 等级:
    • 排名:千里之外
    • 原创:73篇
    • 转载:15篇
    • 译文:0篇
    • 评论:8条
    最新评论