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插件实现手风琴效果!

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

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

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

jquery插件手风琴的效果

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

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

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

jquery插件手风琴效果

手风琴的效果 body{ font:62.5% "Trebuchet MS", sans-serif; margin: 50px;} //使用jquery加载事...

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

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

用jquery插件实现手风琴效果

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

jquery插件实现手风琴效果!

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

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

无标题文档 //手风琴效果 $(function(){ //var option= { header:"h3",}; $("#accor...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery手风琴效果插件
举报原因:
原因补充:

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