现在的位置: 首页 > 综合 > 正文

jQuery-ui中的手风琴效果

2013年10月07日 ⁄ 综合 ⁄ 共 759字 ⁄ 字号 评论关闭

手风琴效果实现思路

在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){
            
            }
        });

抱歉!评论已关闭.