jQuery-手风琴

原创 2012年03月28日 21:26:35

<!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-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./include/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="./include/jquery-ui-1.8.18.custom.css" />
<script language="javascript" type="text/javascript">

 $(function (){
     //当有多额属性时用逗号隔开 ,  属性名:属性值
  $("#accordion").accordion({
   
   header:"h3",     //头信息    必须是h3 页面中div中是什么  这就是什么
   event:"mouseover",    //面板展开的事件效果 默认的是click 点击事件
   active:2,     //默认展开的面板  从0开始  默认的是0即第一个
   animated:"bounceslide",        //面板展开的动画效果
   autoHeight:true,         //展开面板的高度 是否自动增长  默认为true
   fillSpace:false,    //true是填充到父元素
   icon:{               // 面板图片的设置 
    header:"",     // 默认时的效果
    headerSelected:""     //激活时的效果
    }
   }).sortable({   //排序
    
    axis:"y",   //只能沿 y 轴拖拽排序   还可以是 X 轴 也可以 x,y  默认是  x,y
    handle:"h3",   //只能拖拽 h3
    /*stop:function(event,ui){              //一个event事件   匿名函数  event 浏览器自带的事件处理对象  ui 操作控制对象 (被拖拽的东西)
    //alert("dddddddd");
    //ui item help 等
    ui.item.children("h3").trigerHandler("focusout");
     }*/
    });
    <!--通过绑定事件方式 写事件处理-->
    $("#accordion").bind("sortstop",function(event,ui){
     
     alert("oooooooooooo");
     });
  });
</script>
</head>
<body>
<div id="accordion" style="width:600px; height:500px; border:#03F solid 1px">
 <div>
     <h3><a href="#">第一</a></h3>
        <div>11111111111111111111111111111111111111</div>
    </div>
    <div>
     <h3><a href="#">第二</a></h3>
        <div>2222222222222222222222222222222222222</div>
    </div>
    <div>
     <h3><a href="#">第三</a></h3>
        <div>33333333333333333333333333333333333333</div>
    </div>
</div>
</body>
</html>

相关文章推荐

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

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

jquery插件实现手风琴效果!

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

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

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

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

jquery,scss实现简单的手风琴效果首先页面引用jquery,基本的css,之后开始对页面进行整体的布局,首先一个大的div作为容器并且设置容器的大小,之后采用ul li的形式并且要设置为浮动f...

jquery accordion 手风琴的使用

首先,accordion 的意思是手风琴,发音是 饿考滴儿 ,嘿嘿,我觉得大家在使用的时候应该使用它的正确发音,我想是因为效果像是手风琴吧,所以叫做accordion吧,我开始没有仔细看,还以为是ac...

10个让人印象深刻的 jQuery 手风琴效果应用

jQuery 是最流行的 JavaScript 开发框架,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,帮助 Web 开发人员更快速的实现各种精美的界面效果。今天这篇文章向大家展示...

jquery插件手风琴的效果

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

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

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

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

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

jquery手风琴效果

屡见不鲜的一个jquery效果 效果图: [插入] 难度不大,代码如下: html: 导航一 ...
  • jian_xi
  • jian_xi
  • 2016年12月01日 22:36
  • 229
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery-手风琴
举报原因:
原因补充:

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