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实现 模拟手风琴效果

无标题文档 $(function (){ $("#accordion").accordion({ header:"h3",//设置它的开头内容 event:"mouseo...

jquery插件实现手风琴效果!

手风琴的效果 $(document).ready(function (){ // var option = { hrader: "h3",s}; [{},{},{}]; ...

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

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

WindowsPhone8 ListBox 实现手风琴折叠菜单效果

WindowsPhone8 ListBox 实现手风琴折叠菜单效果   XAML示例代码如下:

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

效果图: 方法一:利用按钮的checked模拟点击事件 1)  将按钮(input type="radio" name="btn"  />)覆盖在伪按钮(用标签模拟的按钮)上,并且把按钮透明度(...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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