jquery手风琴效果插件

原创 2012年03月28日 16:54:09

<!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>
<!--引入jquery类库文件-->
<script type="text/javascript" language="javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="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 type="text/javascript">
  $(function(){
 $("#accordion").accordion({
  //头信息是h2
   header:"h2",
  //面板展开时事件的效果,默认是click
   event:"click",
  //默认展开的面板
   active:1,
  //面板展开时的动画效果
    animated:"bounceslide",
   //面板高度是否自动增高
    autoHeight:false,
   //填充到父元素
    fillSpace:false,
   //图标的设置
   icons:{
    //header默认时的图标
    header:"ui-icon-carat-2-e-w",
    //激活时的效果图标
    headerSelected:"ui-icon-carat-2-n-w"
    }  
  }).sortable({ 
     //允许在y轴上拖动排序
      axis:"y",
     //允许拖动h2
      handle:"h2",
   stop:function(event,ui){
    alert("拖动停止");
    }  
  });
    
 });
</script>


</head>

<body>
<div id="accordion">
  
      <div>
        <h2><a href="#">这是第一个</a></h2>
        <div>this is the first</div>
      </div>
     
      <div>
        <h2><a href="#">这是第二个</a></h2>
        <div>this is second</div>
      </div>
     
      <div>
        <h2><a href="#">这是第三个</a></h2>
        <div>this is threed</div>
      </div>
 
</div>
</body>
</html>


 

 

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

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

vuejs组件开发之手风琴菜单组件实例

小图标是引入font-awesome字体图标库绘制的。效果如下图所示: index ...
  • CodingNoob
  • CodingNoob
  • 2017年05月16日 00:04
  • 2171

全面解析Bootstrap手风琴效果

第二步:给面板添加内容,每个面板包括两个部分,第一个是面板标题 panel-heading,并且在这里面添加标题 panel-title。第二个部分是面板内容,也...
  • QCIWYY
  • QCIWYY
  • 2016年08月04日 08:57
  • 2100

jquery插件实现手风琴效果!

>  html xmlns="http://www.w3.org/1999/xhtml">  head>  meta http-equiv="Content-Type" content="...
  • SANGLIU
  • SANGLIU
  • 2013年03月14日 20:16
  • 843

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

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

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

无标题文档 //手风琴效果 $(function(){ //var option= { header:"h3",}; $("#accor...
  • zhaoxinglei0309
  • zhaoxinglei0309
  • 2012年03月28日 17:35
  • 282

jquery插件手风琴效果

手风琴的效果 body{ font:62.5% "Trebuchet MS", sans-serif; margin: 50px;} //使用jquery加载事...
  • php398893944
  • php398893944
  • 2012年03月28日 21:10
  • 296

用jquery插件实现手风琴效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> ...
  • youngerhao
  • youngerhao
  • 2012年03月28日 18:48
  • 756

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

Jquery UI插件---手风琴效果 今天我们学习了Jquery的UI插件,感觉这个确实是个很好用的制作页面的工具。做出来的页面简单大方,很漂亮。 下面,我就主要来介绍一下我们今天学习的jque...
  • smallsundoudou
  • smallsundoudou
  • 2012年03月26日 22:19
  • 2327

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

jQuery插件的使用 --- 手风琴的效果 在使用jQuery插件之前要导入需要的js文件和css文件,代码如下: ...
  • hanxiaoshuang321123
  • hanxiaoshuang321123
  • 2012年03月26日 13:44
  • 570
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery手风琴效果插件
举报原因:
原因补充:

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