实现手风琴效果

原创 2012年03月28日 19:30:59

<!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="./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>

<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />

<script type="text/javascript">

  $(function(){

  $("#accordion").accordion({

  header:"h3",          //头信息 h3必须h3 

  event:"mouseover" ,  //面板展开的事件效果 默认是click效果

  active:1,              //默认展开的面板从0开始  默认值0

  animated:"bounceslide",  //面板展开的动画效果

  autoHeight:true,          //面板高度  是否是自动 增高

  fillSpace:false,           //填充到父元素

  icons:{

  header:"ui-icon-carat-2-e-w",

  headerSelected:"ui-icon-carat-2-n-s"

  }

  }).sortable({

   axis:"y",  //只能在Y轴上拖拽排序  x轴 y轴 默认xy 

   handle:"h3",  //只能拖拽h3

/*    stop:function(event,ui){ //stop事件 匿名函数 event浏览器自带的处理对象 ui操作控制对象

  

 ui.item.children("h3").triggerHandler("focusout")    }

*/   });

//通过绑定的操作方式 写事件处理

$("#accordion").bind("sortstop",function(event,ui){

alert("ii");

});  

  });

</script>

</head>

<body>

<!--

  jquery  UI使用

    1、引入别人类库文件

            js类库

            css样式类库文件

-->

 <div id="accordion" style="width:600px; height:800px; border:#F00 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自制手风琴效果增强版(附实现原理)

手风琴菜单栏效果通常用在页面左侧,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,我在http://blog.csdn.net/lzgs_4/article/details/48101...
  • alokka
  • alokka
  • 2017年06月15日 22:52
  • 546

CSS3目标伪类选择器--实现简单手风琴效果

总结自:图解CSS3中的实战体验 以前制作手风琴效果需要依赖js脚本,功能强大的CSS3的目标伪选择器可以直接实现同样的效果。 通过目标伪类选择器“E:target”,显示和隐藏不同栏目内...

三行jquery实现手风琴效果

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

简单的手风琴JS效果实现

简单的手风琴JS效果实现
  • yl_cc
  • yl_cc
  • 2017年05月17日 21:02
  • 248

target实现手风琴效果

手风琴 *{ margin: 0; paddi...

不写任何js实现手风琴和选项卡效果

教你用css3的:target实现手风琴和选项卡效果
  • pvfhv
  • pvfhv
  • 2011年02月12日 21:04
  • 1432

用jquery插件实现手风琴效果

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

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

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

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