jQuery-ui中的手风琴效果

原创 2012年03月28日 17:31:25

手风琴效果实现思路

在body中书写下面的div,content的内容可以根据需要复制任意个

<div id="accordion">

            <div id=content>
                <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>

引用js和css

<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语句

$(function (){
    
    $("#accordion").accordion({
    
        header: "h3",//这里的字号可以任意改变,根据div中的改变
        animated: "bounceslide" ,//动画
        event: "mouseover",//鼠标放上去,选中,默认值是clike
        change: function(event, ui){
            
            }
        });

相关文章推荐

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

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

强大的jQuery UI——学习手风琴效果

今天初次体验了一把jQuery UI,深刻体会到了它的强大之处,以下代码是实现手风琴的效果,需要引入相应的js类库,大家可去官网下载UI插件http://jquery.com/,为了方便,我将jque...

jQuery UI Accordion(手风琴)

源代码: "> jquery-accordion/demo/demo.css" />

jquery-ui 手风琴组件Accordion学习(可上下拖拽)

jQuery UI Accordion - Sortable /* IE has layout issues when sorting (se...

一个手风琴效果的jquery动画

*{ padding:0px; margin:0px; } .li_...
  • Auyuer
  • Auyuer
  • 2017年07月28日 22:36
  • 86

jquery插件手风琴效果

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

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

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

jquery手风琴效果

屡见不鲜的一个jquery效果 效果图: [插入] 难度不大,代码如下: html: 导航一 ...
  • jian_xi
  • jian_xi
  • 2016年12月01日 22:36
  • 229

第30款插件:第25款插件:jquery.accordion.js 纵向手风琴效果插件

描述:这款手风琴效果适用于折叠的菜单,方便使用!用这款插件制作极其方便,只需要定义很少的参数,便可制作出纵向手风琴效果! 图片展示: 兼容浏览器: IE6+/Firefox/Google ...
  • skace
  • skace
  • 2013年01月20日 03:46
  • 459
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery-ui中的手风琴效果
举报原因:
原因补充:

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