juqery实现手风琴效果

原创 2012年03月28日 16:00:34
用jquery实现手风琴效果
/*引入jquery类库文件*/
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
/*引入css样式*/
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.18.custom.css" 

/>
/*jquery部分*/
<script>
$(function(){
   $('#accordion').accordion({
       header:'h3',           //头文件 h3必须是h3 页面是哪个就是哪个
       event:'movseover',     //面板展开的事件效果,默认是click效果
       animated:'bounceslide',//动画效果 面板展开的动画效果
       
     //图标的设置 header默认时的效果   headerSelected面板激活时的图标
      icons:{
            header:'ui-icon-carat-2-e-w',
            headerSelected:'ui-icon-carat-2-n-s',
            },
      }).sortable({
             axis:'y',    //只能在y轴上拖拽排序 默认为x,y轴
             handle:'h3'   //采用只能拖拽h3
             });

});

</script>

/*html部分*/
<div id='accordion' style='width:600px;height:600px;border:#C09 1px solid;'>
<div>
<h3><a href='#'>first</a></h3>
<div>aaaaaaaaaaaaaa</div>
</div>
<div>
<h3><a href='#'>first2</a></h3>
<div>aaaaaaaaaaaaaa</div>
</div>
<div>
<h3><a href='#'>first3</a></h3>
<div>aaaaaaaaaaaaaa</div>
</div>
</div>
效果显示:
 

新闻滚动效果--juqery实现

  • 2010年12月04日 17:44
  • 154KB
  • 下载

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

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

jquery插件实现手风琴效果!

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

纯div+css实现手风琴效果下拉框的两种方法

效果图: 方法一:利用按钮的checked模拟点击事件 1)  将按钮(input type="radio" name="btn"  />)覆盖在伪按钮(用标签模拟的按钮)上,并且把按钮透明度(...

不写js仅用css实现手风琴和选项卡效果

在10年前有一个软件叫qq,它的面板实现了一种推拉效果,后来有人命名为“手风琴”效果并在网页上通过js实现了这个效果,到今天这种效果依然在一些后台管理界面中存在着。还有一种效果,即window系统实现...

纯css3实现美化复选框和手风琴效果(详细)

关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉   ,然后给选框 绑定一个label标签。 然后用label标签作为容器,在里面放一个:before或一个after 用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:juqery实现手风琴效果
举报原因:
原因补充:

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