jQuery插件实例四：手风琴效果[无动画版]
手风琴效果就是内容的折叠与打开，在这个插件中，使用了三种数据来源：1、直接写在DOM结构中；2、将数据写在配置项中；3、从Ajax()中获取数据。在这一版中，各项的切换没有添加动画效果，在下一版中会是有动画效果的。
在这个插件中，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:;
}
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:;
padding:;
}
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:;
padding:;
list-style: none;
}
div {
display: block;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
color: #14a0cd;
text-decoration: underline;
}
img {
border: none;
line-height:;
margin:;
padding:;
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插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
- ASP.NET中使用jQuery插件实现图片幻灯效果
参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title>< ...
- JQuery插件：动态列和无间隙网格布局Mason.js
来源:GBin1.com 在线演示 JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest).这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘. Mason ...
- jQuery插件实例一：年华时代插件Alert对话框
在工作中使用jQuery插件相信对于程序员来说非常普遍,在网络上也有很多优秀的插件可供大家使用,功能非常强大.在之前用过的一些插件中,有些太过追求功能的强大和可配置性,造成使用的复杂度上升.个人认为与 ...
- 一个很简单的jQuery插件实例教程(菜鸟级)
很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...
- jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。
公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...
- jQuery插件实例三：图片滚动[切换]效果一
图片切换效果在很多网站上都能看到,是一种常见的广告/活动宣传方式,通常位于网页上端.这个插件是众多图片切换效果的形式中的一种,数据源可在前端配置,也可从后台通JSON格式传输数据,当然,数据格式是固定 ...
- 【jquery插件】-网页下雪效果
又到了年底,从圣诞节开始,可以发现各大网站的活动是越来越多,都变的银装素裹,本人由于业务需求也需要做这么一个效果,所以就通过google大神找了一下相关资源,结果就出现了N种雪花效果的方式.种 ...
- 网站开发常用jQuery插件总结(四）验证插件validation
在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验 ...
随机推荐
- 揭开Future的神秘面纱——结果获取
前言 在前面的两篇博文中,已经介绍利用FutureTask任务的执行流程,以及利用其实现的cancel方法取消任务的情况.本篇就来介绍下,线程任务的结果获取. 系列目录 揭开Future的神秘面纱—— ...
- 【PyTorch深度学习60分钟快速入门 】Part0：系列介绍
说明:本系列教程翻译自PyTorch官方教程<Deep Learning with PyTorch: A 60 Minute Blitz>,基于PyTorch 0.3.0.post4 ...
- c语言－遍历pci设备（2）mmio访问
前言 今天其实我在公司也没有做什么,但是昨天就把pcie遍历的mmio形式做了出来,赞扬公司的台湾服务器,至少我可以使用google来去搜索我想要的资料和答案,有一位大神在台湾的论坛上发布了一片博文, ...
- 如何从GitHub迁移到GitLab？
如何从GitHub迁移到GitLab? 在本文中,我们将解释如何从Github迁移到Gitlab,同时我们也将解释如何将Github的开源项目导入到Gitlab. 正如你可能非常清楚的那样, Gitl ...
- Springmvx拦截html出现406解决以及Server Tomcat v8.0 Server at localhost failed to start 问题解决方法
问题是这样的:环境是SSM框架,在配置好的框架里想请求一个html,结果406了,406就是HTTP协议状态码的一种,表示无法使用请求的特性来响应请求的网页.一般指客户端浏览器不接受所请求页面的MIM ...
- Improving the GPA（hdu4968）dfs
Improving the GPA Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) ...
- Java虚拟机 - Class类文件结构
[深入Java虚拟机]之二:Class类文件结构 平台无关性 Java是与平台无关的语言,这得益于Java源代码编译后生成的存储字节码的文件,即Class文件,以及Java虚拟机的实现.不仅使用Jav ...
- 4+1视图与UML对应关系
4+1视图模型概况 Kruchten 提出了一个"4+1"视图模型,从5个不同的视角包括包括逻辑试图.进程视图.物理视图.开发视图.场景视图来描述软件体系结构.每一个视图只 ...
- django-templates过滤器
常用内置过滤器: 过滤器会更改量或便签参数的值: title过滤器: {{ django|title }} 在下列context中 {'django': 'the web framework for ...
- JS简单验证
1.验证是否全为数字 2.验证邮箱 3验证手机号 4.验证身份证号 5.验证时间格式 下面是代码,可直接用,有注释 <html> <meta charset="utf-8& ...