jquery插件之手风琴

最新推荐文章于 2022-11-23 09:38:40 发布

coder_up

最新推荐文章于 2022-11-23 09:38:40 发布

阅读量2k

点赞数 1

分类专栏： jquery 文章标签： jquery插件 function jquery stylesheet javascript div

本文链接：https://blog.csdn.net/wjc19911118/article/details/7404612

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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>