jQuery Plugin: Easy Accordion

作者：大漠 日期：2011-10-08 点击：273
accordion

学习jQuery有一段时间了，进展甚慢。这段时间反复在学习手风琴的制作，从纯CSS的制作到jQuery的制作，在W3cplus和大家共享了多篇有关于制作手风琴效果的Blog。比如：

  1. 纯CSS制作——《CSS3制作垂直手风琴》
  2. 纯CSS制作——《CSS3制作手风琴——CSS3 :target的应用》
  3. jQuery制作——《jQuery制作水平手风琴》
  4. jQuery制作——《如何使用jQuery制作手风琴效果》
  5. jQuery制作——《如何使用jQuery制作展开和折叠切换面板》

今天在OpenSource上学习有关于Accordion的jQuery的制作方法，发现一个制作Accordion插件——jQuery plugin: Easy Accordion。这个插件是由Andrea Cima Serniotti一手创建的，大家可以点击《jQuery plugin: Easy Accordion》，Andrea Cima Serniotti做出了详细的解说。今天我们主要在这个教程中也是跟随Andrea Cima Serniotti大师的思路一起来学习——jQuery plugin: Easy Accordion应用。

如何工作？

Easy Accordion插件会得到你定义的列表，然后将列表转换为一个平稳的水平手风琴，并且你可以在这个手风琴上定义是否自动播放。具体效果，大家可以点击Andrea Cima Serniotti在《jQuery plugin: Easy Accordion》一文中提供的Demo效果，当然你也可以直接从Andrea Cima Serniotti的《jQuery plugin: Easy Accordion》中下载整个源码。

有什么新特征？

Easy Accordion 插件具有简洁的HTML结构、友好的SEO、完全可访问性，使用CSS的transform中rotate进行标题旋转（此处不需要任何图片），支持所有的主要浏览器，充许自动播放，而且是完全开源，你可以根据你自己的需求进行定制。

特点

  1. 可以轻松制作一个很好的水平手风琴效果；
  2. 可以设置是否充许自动播放手风琴，从而制作出一个slide show效果；
  3. 可以在同一个页面中使用多个手风琴效果；
  4. 可以设置当前幻灯片，当页面加载进来时；
  5. 可以设置是否需要幻灯片的编号；
  6. 无需图片制作了标题的旋转效果；
  7. 手风琴效果完全可以通过CSS样式来定制，你可以通过CSS轻松的改变高度，宽度，设置背景图片、内距、边框等样式；
  8. 友好的可访问性和SEO;
  9. 可以播放任何内容；
  10. 文件小，而且没有任何依赖性。

如何使用？

通过上面的介绍，大家对Easy Accordion 插件有一定的了解了，下面我们一起来学习它如何运用到项目中去。

1、HTML Markup

上面我们说过他有一个简结的HTML结构，下面的代码就是Easy Accordion 插件所需的HTML结构，一个简单的定义列表放在一个<div>容器内：

		<div id="accordion-1" class="accordion">
			<dl>
				<dt>Heading 1</dt>
				<dd>Content for Heading 1</dd>
				<dt>Heading 2</dt>
				<dd>Content for Heading 2</dd>
				<dt>Heading 3</dt>
				<dd>Content for Heading 3</dd>
			</dl>
		</div>

其中<dt>中我们放置的是标题，而在<dd>中放置的是标题对应的主内容，里面可以放置任何的div,图片，或其佗元素内容。

2、CSS Code

		/*============基本样式=========*/
		html{font-size:62.5%}
		body{font-size:1.2em;color:#294f88}
		.sample{margin:30px;border:1px solid #92cdec;background:#d7e7ff;padding:30px}
		h1{margin:0 0 20px 0;padding:0;font-size:2em;}
		h2{margin:40px 0 20px 0;padding:0;font-size:1.6em;}
		.easy-accordion h2{margin:0px 0 20px 0;padding:0;font-size:1.6em;}
		p{font-size:1.2em;line-height:170%;margin-bottom:20px}

		/* =========不要随意改动这部分样式，除非你清楚你自己在做什么======== */
		.easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0}
		.easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
		.easy-accordion dt,.easy-accordion dd{position:absolute}
		.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
		.easy-accordion dd{z-index:1;opacity:0;overflow:hidden}
		.easy-accordion dd.active{opacity:1;}
		.easy-accordion dd.no-more-active{z-index:2;opacity:1}
		.easy-accordion dd.active{z-index:3}
		.easy-accordion dd.plus{z-index:4}
		.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
		
		/*================end easy-accordion style====================*/
		
		/*==========自定义accordion样式============*/
		dd p{line-height:120%}
		.accordion {width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8}
		.accordion dl{width:800px;height:245px}
		.accordion dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c}
		.accordion dt.active{cursor:pointer;color:#fff;background:#fff url(slide-title-active-1.jpg) 0 0 no-repeat}
		.accordion dt.hover{color:#68889b;}
		.accordion dt.active.hover{color:#fff}
		.accordion dd{padding:25px;background:url(slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
		.accordion .slide-number{color:#68889b;left:10px;font-weight:bold}
		.accordion .active .slide-number{color:#fff;}
		.accordion a{color:#68889b}
		.accordion dd img{float:right;margin:0 0 0 30px;}
		.accordion h2{font-size:2.5em;margin-top:10px}
		.accordion .more{padding-top:10px;display:block}

上面是手风琴的样式，其中有一部分样式是Ease Accordion插件所需的样式，如果你不清楚你自己在做什么？请不要随意更改这部分样式：

		/* =========不要随意改动这部分样式，除非你清楚你自己在做什么======== */
		.easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0}
		.easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
		.easy-accordion dt,.easy-accordion dd{position:absolute}
		.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
		.easy-accordion dd{z-index:1;opacity:0;overflow:hidden}
		.easy-accordion dd.active{opacity:1;}
		.easy-accordion dd.no-more-active{z-index:2;opacity:1}
		.easy-accordion dd.active{z-index:3}
		.easy-accordion dd.plus{z-index:4}
		.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
		
		/*================end easy-accordion style====================*/

3、jQuery Code

		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="jquery.easyAccordion.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#accordion-1').easyAccordion();			
			});
		</script>

我们需要在<head></head>之间或者</body>前任何位置加载上面的jQuery代码。主要包含了jQuery的版本库和Easy Accordion plugin以用调用插牛的脚本。

这样我们通过Easy Accordion plugin简单的制作了一个手风琴的效果。大家可以点击DEMO查看效果。

参数的设置

首先确保你的定义列表<dl>放在一个<div>容器内，这样你就可以通过这个<div>容器来调用Easy Accordion plugin，而不是直接通过<dl>定义列表来调用Easy Accordion plugin。如下所示：

		$(document).ready(function(){
			$('#accordion-1').easyAccordion();//其中'#accordion-1'就是<dl>的容器的ＩＤ名			
		});

上面的调用方法是不传递任何参数的插件，它将产生一个简单的幻灯片编号和默认情况下没有自动播放手风琴效果。具体为什么为这样？大家可以看看Easy Accordion plugin中的一段源码

		var defaults = {			
			slideNum: true,
			autoStart: false,
			slideInterval: 3000
		};

在Easy Accordion plugin设置了三个默认参数

  1. slideNum：这个表示的是幻灯片编号，默认值是“true”表示载入页在就会有幻灯片编号，你也可以取值为“false”，此时页面载入时不会显示幻灯片编号；
  2. autoStart：这个是用来设置幻灯片是否播放，默认值为“false”，表示载入时不自动播放手风琴；如果你锵其值设置为“true”则表示页面载入时就会自动播放手风琴；
  3. slideInterval：其值表示的是播放手风琴的时间间隔，其默认值为“3000”表示每隔“3秒”播放下一张，其值只能是数字，不带任何单位。

当你了解Easy Accordion plugin参数的具体含义后，你就可以根据你自己的需求进行参数的设置，比如下面的代码：

		$(document).ready(function(){
			//载入自动播放，并且带有编号，播放速度为3秒钟
			$('#accordion-2').easyAccordion({
				autoStart: true
			});
			
			//载入不自动播放，并且没有编号设置，只有点击才能显示下一张幻灯片
			$('#accordion-3').easyAccordion({
				slideNum: false
			});
			
			//载入自动播放，并且带有编号，以3秒的速度播放
			$('#accordion-4').easyAccordion({
				autoStart:true,
				slideInterval:3000
			});
			//载入不能自动播放，带有编号
			$('#accordion-5').easyAccordion({
				autoStart:false
			});
			//载入时自动播放，不带有编号，并以5秒的间隔播放
			$('#accordion-6').easyAccordion({
				autoStart: true,
				slideInterval: 5000,
				slideNum:false
			});
		});

浏览器的兼容性

使用jQuery和Easy Accordion plugin制作的水平手风琴效果可以支持：Firefox3.5+,IE6+,Safari5+和Google Chrome等浏览器。

上面就是有关于Easy Accordion plugin制作水平手风琴效果的全部过程，如果你喜欢的话你可以自己动手一试，或者直接点击Demo查看效果，你也可以下载源码到你的电脑中仔细对比，如果你还没有得到Easy Accordion plugin，你也可以狠狠的点击这理下载需要的Easy Accordion plugin。

如果你有更好的制作方法或者更好的相关教程，麻烦在评论中留言，或者写上你的体会与代码，我们一起分享您的经验。最后我们一起感谢Andrea Cima Serniotti给我们带来这么好的教程——《jQuery plugin: Easy Accordion》。

如需转载烦请注明出处：W3CPLUS

返回顶部