jquery插件之手风琴

原创 2012年03月28日 21:14:13

1、在学习jquery插件之前首先我们来看一下该怎样开始布置工作

    jquery  ui使用前提:

            第一步:引入类库文件
                    包括:
                        js类库             js库引入要有顺序首先第一个引入的是jquery核心文件(jquery-1.7.1.min.js),然后在引入jquery-ui核心文件(jquery-ui-1.8.18.custom.min.js)
                        css样式类库    jquery-ui-1.8.18.custom.css

            第二步:模拟实现 

手风琴效果实现:


<!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>jquery-ui-手风琴效果</title>
<!--引入jquery类库文件-->
<script type="text/javascript" language="javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
<!--css-->
<link type="text/css" rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
    $(function (){
            //注册一个
            $("#accordion").accordion({
                    header:"h3",
                    //触发事件
                    event:"mouseover",
                    //面板展开的效果  default:click
                    animated:"bounceslide",
                    //是否填充父元素
                    fillSpace:false,
                    //是否可以拖拽
                    dragable:true,
                    //指定那个先显示
                    active:1,
                    //当任何一个动作发生或者改变的时候触发
                    change:function (){alert("aa");},
                    //自动调整高度
                    autoHeight:true,  //这个autoHeight如果不设置#accordion的高度那么是不会起作用的<div id="accordion" style="width:200px; height:100px; ">,如果设置了高度就会自动按照你指定的高度去显示并且加上滚动条
                    //设置图标
                    icons:{
                            header:"ui-icon ui-icon-arrow-2-e-w",
                            headerSelected:"ui-icon ui-icon-arrowthick-2-n-s"
                        }
                    
                    
            }).sortable({//拖拽,排序
                        //方向,沿那个轴
                        axis:"x,y",
                        handle:"h3",
                        start:function (){
                                //alert("确定走吗?");
                            },
                        stop:function (){
                                //alert("确定开始吗?");
                            }
                    });
                    
                    
            //绑定事件  ,要加上那个动作,比如排序上的停止动作,就是sortstop
            $("#accordion").bind("sortstop",function(){ alert("hello"); });        
        });    
</script>
</head>

<body>
    <h2 class="demoHeaders">Accordion</h2>
        <div id="accordion" style="width:400px; height:100px; ">
            <div>
                <h3><a href="#">First</a></h3>
                <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lor Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.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插件实现手风琴效果!

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

jQuery插件的使用 --- 手风琴的效果

jQuery插件的使用 --- 手风琴的效果 在使用jQuery插件之前要导入需要的js文件和css文件,代码如下: ...

jquery插件手风琴的效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 手风琴的效...

bootstrap中jquery插件——collapse折叠效果-手风琴效果

先来掌握collapse插件的基本用法,再慢慢深入实例。 collapse最基本的效果是像下图所示的,点击按钮可以显示/隐藏下面的元素: 实现代码如下:Link with href //...

jquery插件手风琴效果

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

用jquery插件实现手风琴效果

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

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

无标题文档 //手风琴效果 $(function(){ //var option= { header:"h3",}; $("#accor...

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

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

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

Jquery UI插件---手风琴效果 今天我们学习了Jquery的UI插件,感觉这个确实是个很好用的制作页面的工具。做出来的页面简单大方,很漂亮。 下面,我就主要来介绍一下我们今天学习的jque...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件之手风琴
举报原因:
原因补充:

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