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

原创 2012年03月28日 21:00:19

<!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="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../include/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="../../include/css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script language="javascript" type="text/javascript">
$(function (){
 
 $("#accordion").accordion({
  header:"h3",//头信息 与页面div中一致
  event:"mouseover",//鼠标移上去的效果
  active:2,//默认展开的面板 从0开始 默认值0
  animated:"bounceslide",//面板展开的动画效果
  autoHeight:true,//面板的高度 是否自动增高
  fillSpace:true,//填充父元素
  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(){
      //stop事件 event浏览器自带的事件处理对象  ui操作控制的对象
       ui.item.children("h3").triggerHandler("focusout");
      } */  
   });
   
   //通过绑定的操作方式,写事件处理
   $("#accordion").bind("sortstop",function(event,ui){
    alert("呵呵!!!");
    })
 
 });

</script>
</head>

<body>

<div id="accordion" style="width:600px; height:500px;border:#0F0 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实现 模拟手风琴效果

无标题文档 $(function (){ $("#accordion").accordion({ header:"h3",//设置它的开头内容 event:"mouseo...
  • HUMHSX
  • HUMHSX
  • 2012年03月28日 19:21
  • 764

三行jquery实现手风琴效果

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

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

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

jQuery实现弹窗动态添加用户信息【详细注解】

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 添加用户信...
  • zwt90
  • zwt90
  • 2012年03月28日 21:07
  • 1184

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

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

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

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

Jquery实现的手风琴特效-Accordion

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

jquery插件实现手风琴效果!

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

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

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

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