您的位置：首页 > Web前端 > JQuery

jquery插件之手风琴

2012-03-28 21:14 393 查看

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>



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



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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航