jQuery插件实例四:手风琴效果[无动画版]
2014-06-04 11:31
639 查看
手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1、直接写在DOM结构中;2、将数据写在配置项中;3、从Ajax()中获取数据。在这一版中,各项的切换没有添加动画效果,在下一版中会是有动画效果的。
在这个插件中,CSS和JS的配置非常重要,需要特别注意。另外,加个思考,请先看完后再想这个问题:当点击其中某项时,给width直接添加animate是否合适,当快速在其上移动时,如何保证效果?
在这个插件中,CSS和JS的配置非常重要,需要特别注意。另外,加个思考,请先看完后再想这个问题:当点击其中某项时,给width直接添加animate是否合适,当快速在其上移动时,如何保证效果?
效果图预览
插件JS
accordionB.js; (function ($, window, document, undefined) { var defaults = { 'isajax': false, //是否从ajax加载数据 'isDom': true, //是否是DOM数据,即直接写在DOM结构中,为默认项 'isConfiguration': false,//是否是配置数据 'imglist': [],//配置数据 'ajaxurl': '' }; $.fn.nhsdAccordion = function (options) { var $parentDiv = $(this); var $opts = $.extend({}, defaults, options); var $mouseoverTile = ""; function initDom() { $parentDiv.html(""); var $ul = $('<ul></ul>', { 'class': 'acdul' }).appendTo($parentDiv); for (var i = 0, j = $opts.imglist.length; i < j; i++) { var temp = $opts.imglist[i]; var $li; if (i == 0) { $li = $('<li></li>', { 'style': 'width:252px' }).appendTo($ul); } else { $li = $('<li></li>', { 'style': 'width:79px' }).appendTo($ul); } var $img = $('<img />', { 'src': temp.src, 'title': temp.title }).appendTo($li); var $tit = $('<span></span>').html(temp.title).appendTo($li); } liEvent(); } function liEvent() { $(".acdul li").bind("click", function () { $mouseoverTile = $(this).find('img').attr('title'); $(this).find('img').removeAttr('title'); $(this).parent().find('li').attr('style', 'width:80px'); $(this).attr('style', 'width:252px'); }).bind('mouseout', function () { $(this).find('img').attr('title', $mouseoverTile); }); } function initAjax() { $.ajax({ type: 'get', url: $opts.ajaxurl, cache: false, dataType: 'json', beforeSend: function () { }, success: function (d) { $opts.imglist = d; initDom(); }, error: function () { } }); } if ($opts.isajax == true) { initAjax(); } else if ($opts.isConfiguration == true) { initDom(); } else if ($opts.isDom == true) { liEvent(); } return this; } })(jQuery, window, document);
CSS样式
accordionB.css/* CSS Document */ /*手风琴效果CSS*/ .accordionDiv { width: 660px; height: 400px; margin: 0 auto; position: relative; overflow: hidden; top: 50px; } .acdul { position: absolute; } .acdul li { display: inline-block; float: left; cursor: pointer; position: relative; overflow: hidden; margin-left: 1px; font-size: 20px; color: #ffffff; font-weight: bold; } .acdul img { float: left; position: relative; display: inline-block; } .acdul span { float: left; position: absolute; display: block; width: 22px; margin: 5px 0 0 5px; z-index: 100; }
HTML页面
<!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 name="viewport" http-equiv="Content-Type" content="text/html; charset=utf-8;width=device-width,initial-scale=1;" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="../CSS/global.css"/> <link rel="stylesheet" type="text/css" href="../CSS/accordionB.css"/> <script type="text/javascript" src="../Script/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="../Script/accordionB.js"></script> <script type="text/javascript"> $(document).ready(function () { //var dataimglist = [ // { // 'title': '手风琴效果图一', // 'src': '/Images/accordion/1.png' // }, { // 'title': '手风琴效果图二', // 'src': '/Images/accordion/2.png' // }, { // 'title': '手风琴效果图三', // 'src': '/Images/accordion/3.png' // }, { // 'title': '手风琴效果图四', // 'src': '/Images/accordion/4.png' // }, { // 'title': '手风琴效果图五', // 'src': '/Images/accordion/5.png' // }, { // 'title': '手风琴效果图六', // 'src': '/Images/accordion/6.png' // } //]; //$("#accordionDiv").nhsdAccordion({ // 'imglist': dataimglist, 'interval': 'slow' //}); //上面是把数据写在配置项中 //这是直接写在DOM结构中 $("#accordionDiv").nhsdAccordion({}); //下面是从Ajax()中获取数据的形式,ajaxur后跟的是获取数据源地址 //$("#accordionDiv").nhsdAccordion({'ajaxur':'/plug/accordiionB/'}); }); </script> </head> <body> <div> <div id="accordionDiv" class="accordionDiv"> <ul class="acdul"> <li style="width: 252px"> <img src="../Images/accordion/1.png" title=""><span>手风琴效果图一</span></li> <li style="width: 80px"> <img src="../Images/accordion/2.png" title=""><span>手风琴效果图二</span></li> <li style="width: 80px"> <img src="../Images/accordion/3.png" title=""><span>手风琴效果图三</span></li> <li style="width: 80px"> <img src="../Images/accordion/4.png" title="手风琴效果图六"><span>手风琴效果图四</span></li> <li style="width: 80px"> <img src="../Images/accordion/5.png" title="手风琴效果图六"><span>手风琴效果图五</span></li> <li style="width: 80px"> <img src="../Images/accordion/6.png" title="手风琴效果图六"><span>手风琴效果图六</span></li> </ul> </div> </div> </body> </html>
另global.css
* { margin: 0; padding: 0; } html, body { color: #000; background: #fff; } p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } 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 { margin: 0; padding: 0; list-style: none; } div { display: block; } a { text-decoration: none; color: #333; } a:hover { color: #14a0cd; text-decoration: underline; } img { border: none; line-height: 0; margin: 0; padding: 0; vertical-align: bottom; } table { border-collapse: collapse; } /*td { padding: 3px; }*/ input { padding: 1px; vertical-align: middle; line-height: normal; } a:link, a:visited { text-decoration: none; color: #1F376D; } a:hover, a:active { text-decoration: underline; color: #BD0A01; border: none; } ul { clear: both; overflow: hidden; width: 100%; } ul, li { list-style: none; }
相关文章推荐
- jQuery插件实例五:手风琴效果[动画效果可配置版]
- jquery插件手风琴效果
- jquery插件实现手风琴效果
- 精心挑选的12款优秀 jQuery 手风琴效果插件和教程
- jquery插件--实现手风琴效果
- 第30款插件:第25款插件:jquery.accordion.js 纵向手风琴效果插件
- Bootstrap JS插件使用实例(6)-折叠(手风琴效果)
- Jquery手风琴效果(无插件)
- jQuery插件实例三:图片滚动[切换]效果一
- 用jquery插件实现手风琴效果
- 精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
- jquery插件实现手风琴效果!
- Bootstrap JS插件使用实例(6)-折叠(手风琴效果)
- jQuery插件实现模拟dialogs效果实例(图片)
- jquery插件手风琴的效果
- 精心挑选的12款优秀 jQuery 手风琴效果插件和教程
- jquery实现手风琴效果实例代码
- 精心挑选的12款优秀 jQuery 手风琴效果插件和教程