• 中国新一代百亿亿次超级计算机“天河三号”原型机首次亮相[组图] 2018-08-17
  • “动静”结合丨带你感受不一样的实爆训练场 2018-08-17
  • 侠客岛:拿什么拯救你,不学普通话的香港年轻人 2018-08-17
  • 机构改革是一场政治考验 2018-08-17
  • 简讯:韩国前总统朴槿惠一审被判24年有期徒刑 2018-08-16
  • 人民网评:走向大洋,呼唤现代化的中国海军 2018-08-16
  • 北京成立学生申诉处理委员会-地方新闻-时政频道-中工网 2018-08-16
  • 虽胜不足喜!鲁能一隐忧不治愈,恐高开低走 2018-08-16
  • 小鱼儿戴胡可帽子似贵妇 临睡之前表白妈妈嘴超甜 2018-08-16
  • “北京8分钟”融入人工智能 通过互联网与国人互动 2018-08-16
  • 四部门调整完善新能源汽车推广应用财政补贴政策 2018-08-15
  • 两男子在吉大美食城“百元找零”诈骗? 2018-08-12
  • 突破!郑鹏创中国队冬残奥会个人项目最好成绩 2018-08-12
  • 今年铜陵市将治理水土流失面积36平方公里 2018-08-11
  • 篮球投注技巧 2018-08-11
  • 【jquery教程】jQuery Accordion

    栏目: jquery 发布于: 2014-11-28 18:15:51

    jQuery Accordion

    jQuery Accordion 插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。

    该插件现在是 jQuery UI 的一部分,独立的版本不会再更新了。目前版本是 1.6。

    访问 jQuery Accordion 官网,下载 jQuery Accordion 插件。

    如需了解更多有关 Accordion 的细节,请查看 API 文档 折叠面板部件(Accordion Widget)。

    实例演示

    jQuery Accordion 插件演示。

    <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>jQuery Accordion 插件</title>
    	
    	<link rel="stylesheet" rel="nofollow"  />
    	
    	<script type="text/javascript" src="http://www.rocksun.cn/accordion/lib/jquery.js"></script>
    	<script type="text/javascript" src="http://www.rocksun.cn/accordion/lib/chili-1.7.pack.js"></script>
    	
    	<script type="text/javascript" src="http://www.rocksun.cn/accordion/lib/jquery.easing.js"></script>
    	<script type="text/javascript" src="http://www.rocksun.cn/accordion/lib/jquery.dimensions.js"></script>
    	<script type="text/javascript" src="http://www.rocksun.cn/accordion/jquery.accordion.js"></script>
    
    	<script type="text/javascript">
    	jQuery().ready(function(){
    		// 简单的 accordion
    		jQuery('#list1a').accordion();
    		jQuery('#list1b').accordion({
    			autoHeight: false
    		});
    		
    		// 第二个简单的 accordion,带有特殊标记
    		jQuery('#navigation').accordion({
    			active: false,
    			header: '.head',
    			navigation: true,
    			event: 'mouseover',
    			fillSpace: true,
    			animated: 'easeslide'
    		});
    		
    		// 定制 accordion
    		jQuery('#list2').accordion({
    			event: 'mouseover',
    			active: '.selected',
    			selectedClass: 'active',
    			animated: "bounceslide",
    			header: "dt"
    		}).bind("changeaccordion", function(event, ui) {
    			jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');
    		});
    		
    		// 第一个简单的 accordion,带有特殊标记
    		jQuery('#list3').accordion({
    			header: 'div.title',
    			active: false,
    			alwaysOpen: false,
    			animated: false,
    			autoHeight: false
    		});
    		
    		var wizard = $("#wizard").accordion({
    			header: '.title',
    			event: false
    		});
    		
    		var wizardButtons = $([]);
    		$("div.title", wizard).each(function(index) {
    			wizardButtons = wizardButtons.add($(this)
    			.next()
    			.children(":button")
    			.filter(".next, .previous")
    			.click(function() {
    				wizard.accordion("activate", index + ($(this).is(".next") ? 1 : -1))
    			}));
    		});
    		
    		// 绑定到 select 的 change 事件,控制第一个和第二个 accordion
    		// 与标签(tab)插件的 triggerTab() 类似,不带有额外的方法
    		var accordions = jQuery('#list1a, #list1b, #list2, #list3, #navigation, #wizard');
    		
    		jQuery('#switch select').change(function() {
    			accordions.accordion("activate", this.selectedIndex-1 );
    		});
    		jQuery('#close').click(function() {
    			accordions.accordion("activate", -1);
    		});
    		jQuery('#switch2').change(function() {
    			accordions.accordion("activate", this.value);
    		});
    		jQuery('#enable').click(function() {
    			accordions.accordion("enable");
    		});
    		jQuery('#disable').click(function() {
    			accordions.accordion("disable");
    		});
    		jQuery('#remove').click(function() {
    			accordions.accordion("destroy");
    			wizardButtons.unbind("click");
    		});
    	});
    	</script>
    
    </head>
    <body>
    
    <h1 id="banner">jQuery Accordion 插件演示</h1>
    <div id="main">
    
    	<fieldset>
    		<legend>标准的,容器是一个 div,标题是 h3,内容是 div 和嵌套的 p。</legend>	
    
    		<h3>代码</h3>
    		<code class="mix">jQuery('#list1a').accordion();
    jQuery('#list1b').accordion({
    	autoHeight: false
    });</code>
    
    		<div class="basic" style="float:left;"  id="list1a">
    			<a>There is one obvious advantage:</a>
    			<div>
    				<p>
    					You've seen it coming!<br/>
    					Buy now and get nothing for free!<br/>
    					Well, at least no free beer. Perhaps a bear,<br/>
    					if you can afford it.
    				</p>
    			</div>
    			<a>Now that you've got...</a>
    			<div>
    				<p>
    					your bear, you have to admit it!<br/>
    					No, we aren't selling bears.
    				</p>
    			</div>
    			<a>Rent one bear, ...</a>
    			<div>
    				<p>
    					get two for three beer.
    				</p>
    				<p>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					Period.
    				</p>
    			</div>
    		</div>
    			
    		<div class="basic" style="float:left; margin-left: 2em;" id="list1b">
    			<a>There is one obvious advantage:</a>
    			<div>
    				<p>
    					You've seen it coming!<br/>
    					Buy now and get nothing for free!<br/>
    					Well, at least no free beer. Perhaps a bear,<br/>
    					if you can afford it.
    				</p>
    			</div>
    			<a>Now that you've got...</a>
    			<div>
    				<p>
    					your bear, you have to admit it!<br/>
    					No, we aren't selling bears.
    				</p>
    			</div>
    			<a>Rent one bear, ...</a>
    			<div>
    				<p>
    					get two for three beer.
    				</p>
    				<p>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					And now, for something completely different.<br/>
    					Period.
    				</p>
    			</div>
    		</div>
    		
    	</fieldset>
    		
    	<fieldset>
    		<legend>导航 - 带有锚和嵌套列表的无序列表。</legend>
    		<p>基于位置的保存状态:激活的元素是基于 location.hash 被选中的:点击其中一个链接,重新载入页面。</p>
    
    		<h3>代码</h3>
    		<code class="mix">jQuery('#navigation').accordion({
    	active: false,
    	header: '.head',
    	navigation: true,
    	event: 'mouseover',
    	fillSpace: true,
    	animated: 'easeslide'
    });</code>
    		<div  style="height:250px;margin-bottom:1em;">
    			<ul id="navigation">
    				<li>
    					<a class="head" rel="nofollow" href="?p=1.1.1">Guitar</a>
    					<ul>
    						<li><a rel="nofollow" href="?p=1.1.1.1">Electric</a></li>
    						<li><a rel="nofollow" href="?p=1.1.1.2">Acoustic</a></li>
    						<li><a rel="nofollow" href="?p=1.1.1.3">Amps</a></li>
    						<li><a rel="nofollow" href="?p=1.1.1.4.1">Effects A</a></li>
    						<li><a rel="nofollow" href="?p=1.1.1.4.2">Effects B</a></li>
    						<li><a rel="nofollow" href="?p=1.1.1.4.3">Effects C</a></li>
    						<li><a rel="nofollow" href="?p=1.1.1.4.4">Effects D</a></li>
    						<li><a rel="nofollow" href="?p=1.1.1.5">Accessories</a></li>
    					</ul> 
    				</li>
    				<li>
    					<a class="head" rel="nofollow" href="?p=1.1.2">Bass</a>
    					<ul>
    						<li><a rel="nofollow" href="?p=1.1.2.1">Electric</a></li>
    						<li><a rel="nofollow" href="?p=1.1.2.2">Acoustic</a></li>
    						<li><a rel="nofollow" href="?p=1.1.2.3">Amps</a></li>
    						<li><a rel="nofollow" href="?p=1.1.2.4">Effects</a></li>
    						<li><a rel="nofollow" href="?p=1.1.2.5">Accessories</a></li>
    					</ul> 
    				</li>
    				<li>
    					<a class="head" rel="nofollow" href="?p=1.1.3">Drums</a>
    					<ul>
    						<li><a rel="nofollow" href="?p=1.1.3.2">Acoustic Drums</a></li>
    						<li><a rel="nofollow" href="?p=1.1.3.3">Electronic Drums</a></li>
    						<li><a rel="nofollow" href="?p=1.1.3.4">Cymbals</a></li>
    						<li><a rel="nofollow" href="?p=1.1.3.5">Hardware</a></li>
    						<li><a rel="nofollow" href="?p=1.1.3.6">Accessories</a></li>
    					</ul> 
    				</li>
    			</ul>
    		</div>
    		
    	</fieldset>
    
    	<fieldset>
    		<legend>带有选项的,容器是一个定义列表,标题是 dt,内容是 dd。</legend>
    		
    		<h3>代码</h3>
    		<code class="mix">jQuery('#list2').accordion({
    	event: 'mouseover',
    	active: '.selected',
    	selectedClass: 'active',
    	animated: "bounceslide",
    	header: "dt"
    }).bind("change.ui-accordion", function(event, ui) {
    	jQuery('&lt;div&gt;' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown&lt;/div&gt;').appendTo('#log');
    });</code>
    
    		<dl id="list2">
    			<dt class="red">Red</dt>
    			<dd>
    				Fancy stuff about red thingies.
    			</dd>
    			<dt class="green selected">Green</dt>
    			<dd>
    				Green! Green! Green!
    			</dd>
    			<dt class="blue">Blue</dt>
    			<dd>
    				Cool kids are blue.
    			</dd>
    		</dl>
    		
    	</fieldset>
    
    	<fieldset>
    		<legend>Divitus 结构,div 容器,div 标题(class="title"),div 内容,开始状态时没有打开的面板,面板可被完全关闭。</legend>
    		
    		<h3>代码</h3>
    		<code class="mix">jQuery('#list3').accordion({
    	header: 'div.title',
    	active: false,
    	alwaysOpen: false,
    	animated: false,
    	autoHeight: false
    });</code>
    
    		<div id="list3">
    			<div>
    				<div class="title">Tennis</div>
    				<div>
    					One ball, two players. Lots of fun.
    				</div>
    			</div>
    			<div>
    				<div class="title">Soccer</div>
    				<div>
    					One ball, 22 players. Lots of fun. <a rel="nofollow" >Go to google?</a>
    				</div>
    			</div>
    			<div>
    				<div class="title">Baseball</div>
    				<div>
    					<p>
    						Well, one ball, some guys running around, some guys hitting others with a stick.<br/>
    						Sounds like fun, doesn't it?
    					</p>
    					<p>
    						Well, apart from the running part.
    						<a rel="nofollow" href="#navigation">Navigation example</a>
    					</p>
    				</div>
    			</div>
    		</div>
    		
    	</fieldset>
    	
    	<fieldset>
    		<legend>accordion 向导</legend>
    		
    		<h3>代码</h3>
    		<code class="mix">var wizard = $("#wizard").accordion({
    	header: '.title',
    	event: false
    });
    
    $("div.title", wizard).each(function(index) {
    	$(this)
    	.next()
    	.children(":button")
    	.filter(".next, .previous")
    	.click(function() {
    		wizard.changeAccordion("activate", index + ($(this).is(".next") ? 1 : -1))
    	});
    });</code>
    	
    		<div id="wizard">
    			<div>
    				<div class="title">标题 1</div>
    				<div>
    					内容 1<br/>
    					<input type="button" class="next" value="下一个" />
    				</div>
    			</div>
    			<div>
    		
    				<div class="title">标题 2</div>
    				<div>
    					内容 2<br/>
    					<input type="button" class="previous" value="上一个"/>
    					<input type="button" class="next" value="下一个"/>
    				</div>
    			</div>
    			<div>
    				<div class="title">标题 3</div>
    		
    				<div>
    					内容 3<br/>
    					<input type="button" class="previous" value="上一个"/>
    				</div>
    			</div>
    		
    		
    		</div>
    		<br /><br /><br /><br /><br />
    	</fieldset>
    	
    	<div id="switch" style="background-color:grey;padding:10px;">
    		<select>
    			<option>切换到...</option>
    			<option value="1">1</option>
    			<option value="2">2</option>
    			<option value="3">3</option>
    		</select>
    		<button id="close">关闭全部</button>
    		<button id="enable">启用全部</button>
    		<button id="disable">禁用全部</button>
    		<button id="remove">移除全部</button>
    		<br />通过选择器激活,例如 ':first' 或 ':eq(1)': <input id="switch2" />
    	</div>
    
    	<div id="log" style="background-color:grey;padding:10px;"><div><strong>Log</strong></div></div>
    </div>
    
    </body>
    </html>
    


    本文转载自:w3cschool
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:【jquery教程】jQuery Accordion
    IT技术书籍推荐:
    PHP从入门到精通(第3版)
    PHP从入门到精通(第3版)
    明日科技 (作者)
    《PHP从入门到精通(第3版)》从初学者角度出发,通过通俗易懂的语言、丰富多彩的实例,详细介绍了使用PHP进行网络开发应该掌握的各方面技术。全书共分4篇25章,包括初识PHP、PHP环境搭建和开发工具、PHP语言基础、流程控制语句、字符串操作、正则表达式、PHP数组、PHP与Web页面交互、PHP与JavaScript交互、日期和时间、Cookie与Session、图形图像处理技术、文件系统、面向对象、PHP加密技术、MySQL数据库基础、phpMyAdmin图形化管理工具、PHP操作MySQL数据库、PDO数据库抽象层、ThinkPHP框架、Smarty模板技术、PHP与XML技术、PHP与Ajax技术、应用Smarty模板开发电子商务网站、应用ThinkPHP框架开发明日导航网等内容。书中所有知识都结合具体实例进行介绍,涉及的程序代码均附以详细的注释,可以使读者轻松领会PHP程序开发的精髓,快速提高开发技能。