jQuery插件实例四：手风琴效果[无动画版]

浏览数：15 / 时间：2015年06月09日

手风琴效果就是内容的折叠与打开，在这个插件中，使用了三种数据来源：1、直接写在DOM结构中；2、将数据写在配置项中；3、从Ajax()中获取数据。在这一版中，各项的切换没有添加动画效果，在下一版中会是有动画效果的。

在这个插件中，CSS和JS的配置非常重要，需要特别注意。另外，加个思考，请先看完后再想这个问题：当点击其中某项时，给width直接添加animate是否合适，当快速在其上移动时，如何保证效果？

效果图预览

插件JS

accordionB.js

 1 ;
 2 (function ($, window, document, undefined) {
 3     var defaults = {
 4         ‘isajax‘: false, //是否从ajax加载数据
 5         ‘isDom‘: true, //是否是DOM数据,即直接写在DOM结构中,为默认项
 6         ‘isConfiguration‘: false,//是否是配置数据
 7         ‘imglist‘: [],//配置数据
 8         ‘ajaxurl‘: ‘‘
 9     };
10 
11     $.fn.nhsdAccordion = function (options) {
12         var $parentDiv = $(this);
13         var $opts = $.extend({}, defaults, options);
14         var $mouseoverTile = "";
15 
16         function initDom() {
17             $parentDiv.html("");
18             var $ul = $(‘<ul></ul>‘, { ‘class‘: ‘acdul‘ }).appendTo($parentDiv);
19             for (var i = 0, j = $opts.imglist.length; i < j; i++) {
20                 var temp = $opts.imglist[i];
21                 var $li;
22                 if (i == 0) {
23                     $li = $(‘<li></li>‘, { ‘style‘: ‘width:252px‘ }).appendTo($ul);
24                 } else {
25                     $li = $(‘<li></li>‘, { ‘style‘: ‘width:79px‘ }).appendTo($ul);
26                 }
27                 var $img = $(‘<img />‘, { ‘src‘: temp.src, ‘title‘: temp.title }).appendTo($li);
28                 var $tit = $(‘<span></span>‘).html(temp.title).appendTo($li);
29             }
30             liEvent();
31         }
32 
33         function liEvent() {
34             $(".acdul li").bind("click", function () {
35                 $mouseoverTile = $(this).find(‘img‘).attr(‘title‘);
36                 $(this).find(‘img‘).removeAttr(‘title‘);
37                 $(this).parent().find(‘li‘).attr(‘style‘, ‘width:80px‘);
38                 $(this).attr(‘style‘, ‘width:252px‘);
39             }).bind(‘mouseout‘, function () {
40                 $(this).find(‘img‘).attr(‘title‘, $mouseoverTile);
41             });
42         }
43 
44         function initAjax() {
45             $.ajax({
46                 type: ‘get‘,
47                 url: $opts.ajaxurl,
48                 cache: false,
49                 dataType: ‘json‘,
50                 beforeSend: function () { },
51                 success: function (d) {
52                     $opts.imglist = d;
53                     initDom();
54                 },
55                 error: function () { }
56             });
57         }
58 
59         if ($opts.isajax == true) {
60             initAjax();
61         } else if ($opts.isConfiguration == true) {
62             initDom();
63         } else if ($opts.isDom == true) {
64             liEvent();
65         }
66 
67         return this;
68     }
69 })(jQuery, window, document);

CSS样式

accordionB.css

 1 /* CSS Document */
 2 
 3 /*手风琴效果CSS*/
 4 .accordionDiv {
 5     width: 660px;
 6     height: 400px;
 7     margin: 0 auto;
 8     position: relative;
 9     overflow: hidden;
10     top: 50px;
11 }
12 
13 .acdul {
14     position: absolute;
15 }
16 
17     .acdul li {
18         display: inline-block;
19         float: left;
20         cursor: pointer;
21         position: relative;
22         overflow: hidden;
23         margin-left: 1px;
24         font-size: 20px;
25         color: #ffffff;
26         font-weight: bold;
27     }
28 
29     .acdul img {
30         float: left;
31         position: relative;
32         display: inline-block;
33     }
34 
35     .acdul span {
36         float: left;
37         position: absolute;
38         display: block;
39         width: 22px;
40         margin: 5px 0 0 5px;
41         z-index: 100;
42     }

HTML页面

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta name="viewport" http-equiv="Content-Type" content="text/html; charset=utf-8;width=device-width,initial-scale=1;" />
 5 <title>无标题文档</title>
 6 <link rel="stylesheet" type="text/css" href="../CSS/global.css"/>
 7 <link rel="stylesheet" type="text/css" href="../CSS/accordionB.css"/>
 8 <script type="text/javascript" src="../Script/jquery-1.9.1.min.js"></script>
 9 <script type="text/javascript" src="../Script/accordionB.js"></script>
10 <script type="text/javascript">
11         $(document).ready(function () {
12             //var dataimglist = [
13             //        {
14             //            ‘title‘: ‘手风琴效果图一‘,
15             //            ‘src‘: ‘/Images/accordion/1.png‘
16             //        }, {
17             //            ‘title‘: ‘手风琴效果图二‘,
18             //            ‘src‘: ‘/Images/accordion/2.png‘
19             //        }, {
20             //            ‘title‘: ‘手风琴效果图三‘,
21             //            ‘src‘: ‘/Images/accordion/3.png‘
22             //        }, {
23             //            ‘title‘: ‘手风琴效果图四‘,
24             //            ‘src‘: ‘/Images/accordion/4.png‘
25             //        }, {
26             //            ‘title‘: ‘手风琴效果图五‘,
27             //            ‘src‘: ‘/Images/accordion/5.png‘
28             //        }, {
29             //            ‘title‘: ‘手风琴效果图六‘,
30             //            ‘src‘: ‘/Images/accordion/6.png‘
31             //        }
32             //];
33 
34             //$("#accordionDiv").nhsdAccordion({
35             //    ‘imglist‘: dataimglist, ‘interval‘: ‘slow‘
36             //});
37             //上面是把数据写在配置项中
38             //这是直接写在DOM结构中
39             $("#accordionDiv").nhsdAccordion({});
40             //下面是从Ajax()中获取数据的形式,ajaxur后跟的是获取数据源地址
41             //$("#accordionDiv").nhsdAccordion({‘ajaxur‘:‘/plug/accordiionB/‘});
42         });
43 </script>
44 </head>
45 <body>
46     <div>
47         <div id="accordionDiv" class="accordionDiv">
48             <ul class="acdul">
49                 <li style="width: 252px">
50                     <img src="../Images/accordion/1.png" title=""><span>手风琴效果图一</span></li>
51                 <li style="width: 80px">
52                     <img src="../Images/accordion/2.png" title=""><span>手风琴效果图二</span></li>
53                 <li style="width: 80px">
54                     <img src="../Images/accordion/3.png" title=""><span>手风琴效果图三</span></li>
55                 <li style="width: 80px">
56                     <img src="../Images/accordion/4.png" title="手风琴效果图六"><span>手风琴效果图四</span></li>
57                 <li style="width: 80px">
58                     <img src="../Images/accordion/5.png" title="手风琴效果图六"><span>手风琴效果图五</span></li>
59                 <li style="width: 80px">
60                     <img src="../Images/accordion/6.png" title="手风琴效果图六"><span>手风琴效果图六</span></li>
61             </ul>
62         </div>
63     </div>
64 </body>
65 </html>

另global.css

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 html, body {
 7     color: #000;
 8     background: #fff;
 9 }
10 
11 p {
12     display: block;
13     -webkit-margin-before: 1em;
14     -webkit-margin-after: 1em;
15     -webkit-margin-start: 0px;
16     -webkit-margin-end: 0px;
17 }
18 
19 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
20     margin: 0;
21     padding: 0;
22     list-style: none;
23 }
24 
25 div {
26     display: block;
27 }
28 
29 a {
30     text-decoration: none;
31     color: #333;
32 }
33 
34     a:hover {
35         color: #14a0cd;
36         text-decoration: underline;
37     }
38 
39 img {
40     border: none;
41     line-height: 0;
42     margin: 0;
43     padding: 0;
44     vertical-align: bottom;
45 }
46 
47 table {
48     border-collapse: collapse;
49 }
50 /*td {
51 padding: 3px;
52 }*/
53 input {
54     padding: 1px;
55     vertical-align: middle;
56     line-height: normal;
57 }
58 
59 a:link, a:visited {
60     text-decoration: none;
61     color: #1F376D;
62 }
63 
64 a:hover, a:active {
65     text-decoration: underline;
66     color: #BD0A01;
67     border: none;
68 }
69 
70 ul {
71     clear: both;
72     overflow: hidden;
73     width: 100%;
74 }
75 
76 ul, li {
77     list-style: none;
78 }