Demos | jQuery.Switchable -JS/jQuery代码 -演示与下载 -时代Java

Accordion


First

Content #1

Content #1

Second

Content #2

Content #2

Content #2

Third

Content #3

jQuery Code:

	// 添加 accordion 效果
	$.switchable.addEffect("accordion", function(i, done) {
		var self = this,
			cfg = self.getCfg(),
			items = self.getPanels(),
			thisItem = self.getVisiblePanel(i);
	
		items.slideUp(cfg.speed * 1000);
		thisItem.slideDown(cfg.speed * 1000, done);
	});
	
	$(function(){
		$(".accordion").switchable(".accordion > .panel", {
			triggers: "h3", // 更改触点
			triggerType: "click",
			effect: "accordion", // 加载 accordion 效果
			speed: .3
		});
	});
	

HTML Code:

	<div class="accordion">
		<h3>First</h3>
		<div class="panel">
			<p>Content #1</p>
			<p>Content #1</p>
		</div>
		
		<h3>Second</h3>
		<div class="panel">
			<p>Content #2</p>
			<p>Content #2</p>
			<p>Content #2</p>
		</div>
		
		<h3>Third</h3>
		<div class="panel">
			<p>Content #3</p>
		</div>
	</div>
	
下载代码说明
X关闭

Switchable 基于jQuery 常见网页UI组件

jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。它有简单易用的API、可灵活配置的Configuration,支持自定义Effect,支持自主开发Plugin。 下面是jQuery.Switchable的几个亮点: 在当前 trigger 中 mouseenter/mouseleave, click 不触发 鼠标快速滑过非