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

Simple Demos

Tabs

First Second Third

Tab Panel 1 Open third tab

Tab Panel 2

Tab Panel 3 Open second tab

	$(function(){
		$(".tabs-trigger").switchable(".tabs-panel > p");
	});
	

Slide

	$(function(){
		$(".slide-trigger").switchable(".slide-panel > img", { effect: "fade", speed: .3 });
	});
	

Scrollable

	$(function(){
		window.api = $(".scrollable-trigger").switchable(".scrollable-panel > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3,
			api: true
		});
		$(".next").click(function(){
			api.next();
		});
		$(".prev").click(function(){
			api.prev();
		});
	});
	

More demos

Tabs

  1. Loading contents with AJAX
  2. Accordion
  3. Horizontal Accordion
  4. Multiple Tabs
  5. Using callback function
  6. Plugins in action

Slide

  1. Horizontal/Vertical Scrolling
  2. Plugins in action
  3. Without triggers

Scrollable

  1. Plugins in action
  2. Custom animation
  3. Custom widget

Live Demo

  1. taobao.com
下载代码说明
X关闭

Switchable 基于jQuery 常见网页UI组件

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