最近都忙着写这个插件，用它来统合跑马灯（marquee），轮播（carousel），风手琴（accordion）, 切换卡（tabs）, slide（幻灯片）这五种控件。
下面是它们的一些描述：
跑马灯 没有触发点(trigger)，而显示内容通常是一行行文字或扁平状的图片，自动往上往下滚动。不过也有从左到右滚动的。轮播 经常出现新闻的首页，触发点与面板个数相同，基本上从左到右切换，到了尽头回到第一张继续切换。触发点都浮于控件的最上层的右下角。风手琴 与轮播很相似，不过很少会自动进行自动切换。其触发器与控件同宽或同高，非常显眼。切换卡 的触发器会于控件的上方，也比较少自动切换。幻灯片 基本会提供两个触发点，上一页与下一页，还有绑定键盘事件进行上下翻。
因此，我们要提供一个API，用于让用户切换到指定的面板，同时让对应的触发点处于激活状态（高亮状态）。
另外此五个控件就只在HTML结构上存在出入，什么功能只是添多或添少的问题而已。因此我提供了两种方案来指定控件的主体。一种是像EXT那样，其HTML与CSS都是动态生成的，另一种是，指定页面已有的某一HTML片段作为页面的主体。然后再从这主体中抽取出触发点（triggers）与面板（panels），转化为控件实例的属性，供其他API调用。
下面是其API的说明：
$.fn.switchable(settings)
settings的配置参数：
data:用于创建控件，必须是一个对象数组，每个对象都拥有trigger(可选)与panel属性。
data_expr:页面现存的具有切换卡，手风琴等结构的HTML元素的CSS表达式。此属性与data属性只能二选一。
trigger_class:触发器的类名，它起着类似按钮的作用，用于切换面板。
panel_class:面板的类名。
active_class:处于激活状态的面板与触发器都会添加上此类名。
active_event:用于切换面板的事件，不是click就是mouseover。
active_callback:切换面板时的回调函数。
autoplay:是否自动进行切换，默认是false。
pause_over_panel:当鼠标移到控件之上是否中止切换，默认是false。
interval:切换面板后要延迟多久才自动开始下一个切换，单位为ms，默认是1000。
switch_out:正在处于激活状态的面板在失去激活状态时要进行的切换动画，默认是$.fn.slideUp。
switch_out_args:上面动画的参数， 默认为500。
switch_in:某一面板在变成激活状态时要进行的切换动画，默认是$.fn.slideDown。
switch_in_args:上面动画的参数， 默认为500。
切换卡对象默认拥有以下方法，都是使用$(expr).tabs(method,args1,args2,args3)的形式进行调用：
active(index, [callback],[e]): 切换到某一面板，index为面板的序号，从零开始。callback为回调函数，e为事件对象。回调函数中的this指向事件源对象或ui.target[0], 参数为e或ui
remove(index, [callback]): 移除到某一面板，index为面板的序号，从零开始。callback为回调函数，拥有一个参数，就是实例自身, this指向ui.target[0]。
add(index, trigger, panel): 在某一切换卡之后添加一个切换卡，trigger与panel为新切换卡的按钮与面板。
destroy(): 销毁切换卡实例，移除相关事件绑定。
invoke(method, args1, args2): 如果method为实例的一个方法，则调用此方法，将其他参数传进去，否则则重写或添加相关属性。
经过我的观察与研究，无论是切换卡也好，轮播也好，幻灯片也好，它们的结构都是非常相似。其中用于装载内容的面板panel是必不可少， 而在这些控件中，基本上都会一个触发器（trigger）与之对应，另外，在轮播控件中，切换大多数是整体向左移动或整体向上移动，这就要求有一个容器， 其宽等于所有面板的宽或其高等于所有面板的高，因此网上许多轮播控件都采用dl，dt，dd结构，对应我的switchable控件，分别中ui.target, ui.triggers, ui.panels，其中ui是可切换对象的实例，默认类名依次是.mass_swichable, .trigger, .panel。那么对非轮播控件，ui.target在外观的构建上也不是没有用处的， 毕竟多一层元素，我们可以用CSS把控件打扮得更漂亮。
下面是一个典型可切换对象的HTML结构
<div class="sample">
<div class="mass_switchable">
<div class="trigger active">标题1</div>
<div class="panel active">面板1</div>
<div class="trigger">标题2</div>
<div class="panel">面板2</div>
<div class="trigger">标题3</div>
<div class="panel">面板3</div>
<div class="trigger">标题4</div>
<div class="panel">面板4</div>
</div>
</div>
默认情况下，控件会在ui.parent进行事件代理（代理trigger元素上的点击事件或mouseover事件），以实现面板的切换。 至于这些面板怎么切换，控件提供了三个入口， switch_in回调(this指向正要变成激活状态的面板), switch_out回调(this指向正要失去激活状态的面板)与 active_callback回调(this指向可切换对象, 我们可以ui.active_index得知处于激活状态的面板的索引值, 同时也是对应触发点的索引值)
下面是一些例子, 更详细的讲解见github上的文档!暂没有幻灯片的示例，其实它是最简单的，但通常是炫在其幻换时的特效，大家可以想象一下微软的PowerPoint，因此这需要一个强大的切换特效插件才行。这个以后会补上的。
http://detail.tmall.com/item.htm?spm=1103qB9o.2-v9_S.s-3vAY2l&id=12473871046 http://www.madeincima.it/download/samples/jquery/easyAccordion/
切换卡
.tabs {
border:20px solid #E9EDF1;
position:relative;
width:400px;
height:200px;
background:#fff url(tabs_header.jpg) left top no-repeat;
overflow:hidden;
}
.tabs .trigger{
float:left;
height:40px;
line-height:40px;
margin-left:30px;
width:50px;
text-align:center;
cursor: pointer;
color:#fff;
font-weight:700;
}
.tabs .trigger.active{
color:yellow;
}
.tabs .panel{
position:absolute;
display:none;
top:40px;
left:0px;
width:398px;
height:150px;
background:#fff;
color: #000;
border:1px solid #595A5A;
border-radius: 4px 4px 4px 4px;
box-shadow: 5px 1px 3px #8493A6;
}
.tabs .panel.active{
display:block;
}
.tabs .panel div{
margin:20px;
}
$.require("ready,more/switchable",function(){
$(".tabs").switchable({
data: "1234".split("").map(function(el, i){
return {
trigger:"标题"+ (i+1),
panel:"<div>面板"+(i+1)+"</div>"
}
}),
switch_in: function(){
this.show();
},
switch_out: function(){
this.hide();
}
});
})
垂直手风琴
.starfish {
background:#DCDCDC;
width: 620px;
height:245px;
overflow:hidden;
}
.starfish .trigger{
height: 30px;
width: 600px;
background: url(mass_accordion_trigger.jpg) no-repeat top right #a9d06a;
padding: 0 10px 0 10px;
line-height: 30px;
color: #fff;
font-size: 12px;
color: #000;
border-bottom: 1px solid #cde99f;
cursor: pointer;
}
.starfish .trigger.active{
background: url(mass_accordion_trigger_active.jpg) no-repeat top right #e0542f;
color: #fff;
border-bottom: 1px solid #f68263;
}
.starfish .panel {
width: 600px;
height: 100px;
padding: 5px 10px 15px 10px;
color: #444;
display:none;
overflow: hidden;
}
$.require("ready,more/switchable",function(){
$(".starfish").switchable({
data:[
{trigger:"标题1",panel:"这是一个简单的垂直手风琴"},
{trigger:"标题2",panel:"只有最基本的功能"},
{trigger:"标题3",panel:"<div class=content>面板3</div>"},
{trigger:"标题4",panel:"<div class=content>面板4</div>"}
],
switch_in: $.fn.slideDown,
switch_out: $.fn.slideUp
});
})
水平手风琴
.elephant{
width:600px;
height:195px;
padding:30px;
background:#fff;
border:1px solid #b5c9e8;
position:relative;
overflow:hidden;
}
/* 这里要足够宽，能装下四个trigger与一个panel!*/
.elephant .mass_switchable{
width:900px;
height:180px;
}
.elephant .trigger{
float:left;
width:56px;
height:180px;
font-size:14px;
font-weight:bold;
background:#fff url(elephant_trigger.jpg) 0 0 no-repeat;
color:#26526c;
cursor:pointer;
}
/* 让字体垂直显示*/
.elephant .trigger span{
margin-left:20px;
margin-top:20px;
width:14px;
display:block;
height:140px;
color:#000;
letter-spacing:1px;
word-spacing:0;
text-align:right;
}
.elephant .trigger.active{
cursor:pointer;
background:#fff url(elephant_active.jpg) 0 0 no-repeat
}
.elephant .trigger.active span{
color:#fff;
}
.elephant .panel{
float:left;
padding:25px;
width:320px;
height:130px;
border:1px solid #dbe9ea;
border-left:0;
margin-right:3px;
}
.elephant .panel h2{
font-size:25px;
margin-top:10px;
margin-bottom:10px;
font-family:serif;
color:#294F88;
}
.elephant .panel p{
font-family:serif;
font-size:14px;
line-height:17px;
color:#294F88;
}
/* 装饰用*/
.elephant .panel img{
float:right;
margin:0 0 0 20px;
position:relative;
top:-20px
}
$.require("ready,more/switchable",function(){
var elephant = $(".elephant").switchable({
data:[
{
trigger:"<span>第一张</span>",
panel:'<h2>First mammoth here</h2><p><img src="elephant0.png" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p>'
},
{
trigger:"<span>第二张</span>",
panel:'<h2>Over the moon!</h2><p><img src="elephant1.png" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p>'
},
{
trigger:"<span>第三张</span>",
panel:'<h2>Another mammoth</h2><p><img src="elephant2.png" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p>'
},
{
trigger:"<span>第四张</span>",
panel: '<h2>This is my favourite</h2><p><img src="elephant3.png" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>'
}
],
switch_in: function(){
this.fx(600,{
width:"show",
paddigLeft:"show",
paddingRight:"show"})
},
switch_out: function(){
this.fx(600,{
width:"hide",
paddigLeft:"hide",
paddingRight:"hide"})
}
}).switchable("getUI")
elephant.target.width( elephant.panels.innerWidth()+ elephant.triggers.innerWidth() * 5 );
elephant.panels.not(".active").fx(10,{
width:"hide",
paddigLeft:"hide",
paddingRight:"hide"
});
})
水平轮播
鼠标移到控件之上会出现上一页与下一页。
.winnower {
width:536px;
height:265px;
position:relative;
overflow:hidden;
border:2px solid #000;
}
.winnower .mass_switchable{
width:3000px;/*此宽可容纳所有面板*/
height:270px;
}
/* 平铺所有面板，实现整体往左移或往右移*/
.winnower .panel{
float:left;
display:block;
}
/* 设置触发点*/
.winnower .trigger{
position:absolute;
display: block;
width:15px;
height:15px;
z-index:100;
bottom: 20px;
}
/* 灰色的圆点 */
.winnower .trigger a {
display:block;
width:15px;
height:15px;
text-decoration:none;
outline:none;
background: url("winnower_s.png") no-repeat 3px -12px transparent;
}
/* 橙色的圆点 */
.winnower .trigger a:hover,.winnower .trigger.active a{
background-position:-15px -12px;
}
/*上一个与下一个*/
.winnower .arrow{
position:absolute;
display:none;
z-index:100;
width:25px;
height:40px;
top:125px;
background: url("winnower_s.png") no-repeat scroll -40px 0px transparent;
}
.winnower .prev{
left:5px;
}
.winnower .next{
background: url("winnower_s.png") no-repeat scroll -90px 0px transparent;
right:5px;
}
$.require("ready,more/switchable",function(){
var winnower = $(".winnower").switchable({
data: "01234".split("").map(function(el,d){
return {
trigger:'<a href="javascript:void(0)"></a>',
panel:'<div><img src="winnower'+d+'.jpg" /></div>'
};
}),
active_callback: function(){
var w = -1 * this.panels.innerWidth() * this.active_index;
this.target.fx(500, {"margin-left":w } )
}
}).switchable("getUI");
/* 调整触发器的位置,向它位于控件的左下角水平排列 */
winnower.triggers.each(function(el, i){
$(el).css( "right", 100 - i * 17);
});
/* 生成上一页与下一页按钮 */
var winnowerUI = winnower.parent.append('<div class="next arrow" ></div>').append('<div class="prev arrow"></div>')
var winnowerArrow = winnowerUI.find(".arrow");
winnowerUI.mouseenter(function(){
winnowerArrow.show()
}).mouseleave(function(){
winnowerArrow.hide()
});
winnowerArrow.click(function(){
var next = $(this).hasClass("next");
var length = winnower.triggers.length-1
var i = winnower.active_index ;
if(next){
var index = i+1 > length ? 0 : i+1;
}else{
index = i-1 < 0 ? length : i-1;
}
winnower.active( index, winnower.active_callback )
});
})
以缩略图作为触发器的水平轮播
.imac{
width:640px;
height:545px;
overflow:hidden;
border:2px solid #5296c7;
}
.imac .panel{
float:left;
width:640px;
height:480px;
display:block;
}
.imac .trigger{
display:inline-block;
margin-top:10px;
margin-right:10px;
}
.imac .trigger img{
display:inline-block;
border:1px solid #9cf;
}
.imac .trigger.active img, .imac .trigger img:hover{
border: 1px solid #369;
}
/* 让所有触发器居中对齐 */
.imac center {
width:640px;
}
$.require("ready,more/switchable",function(){
var imac = $(".imac").switchable({
data: "0123456".split("").map(function(el,d){
return {
trigger:'<img src="imac'+d+'.jpg" width=50 height=46 />',
panel:'<img src="imac'+d+'.jpg" />'
}
}),
active_callback: function(){
var w = -1 * this.panels.innerWidth() * this.active_index;
this.target.fx(500, {"margin-left":w } )
}
}).switchable("getUI");
imac.target.width(imac.panels.innerWidth() * 7 );
$("<center></center>").appendTo(".imac").append(imac.triggers);
})
通过淡入淡出进行切换的水平轮播
.fade{
position:relative;
width:478px;
height:286px;
border:1px solid #666;
overflow:hidden;
}
.fade .panel{
position:absolute;
}
.fade .triggers{
position:absolute;
bottom:0;
background:#000;
height:30px;
width:478px;
filter: Alpha(Opacity=30);
opacity:0.3;
z-index:10;
cursor:pointer;
}
.fade .trigger {
position:absolute;
width:20px;
height:20px;
bottom: 5px;
z-index:100;
}
.fade .trigger a{
width:20px;
height:20px;
text-align:center;
line-height:20px;
display:inline-block;
color:#FFF;
border:#e5eaff 1px solid;
background:#6f4f67;
filter: Alpha(Opacity=80);
opacity:0.8;
text-decoration:none;
cursor:pointer
}
.fade .trigger a:hover, .fade .trigger.active a{
background:#900;
}
$.require("ready,more/switchable",function(){
var fade = $(".fade").switchable({
data: "0123".split("").map(function(el,d){
return {
panel:'<img src="fade'+d+'.jpg" />',
trigger:'<a href="javascript:void(0)">'+(d+1)+"</a>"
}
}),
switch_in: function(){
this.fx(600,{o:1})
},
switch_out: function(){
this.fx(600,{o:0})
},
interval:2000,
autoplay: true,
pause_over_panel:true
}).switchable("getUI");
$("<div class=triggers></div>").appendTo(fade.target);
fade.triggers.each(function(el, i){
if( i != 0){
fade.panels.eq(i).css("opacity",0)
}
$(el).css("right",90- i * 24)
});
});
触发器与面板一体化的手风琴
.dew {
position:relative;
width:500px;
height:200px;
overflow:hidden;
}
.dew .panel{
position:absolute;
}
$.require("ready,more/switchable",function(){
var dew = $(".dew").switchable({
data:"012345".split("").map(function(el,d){
return {
panel:'<div><img src="../public/styles/switchable/dew'+d+'.jpg" /></div>'
}
}),
count:0
}).switchable("getUI");
function switchIt(e){
var index = $(this).index();
var width = $(this).width();
dew.panels.each(function(el,i){
$(el).fx(500,{
left:i * 36+( i > index ? width - 36: 0),
after:function(){
dew.count += 1;
if(dew.count == 6){
dew.count = 0
setTimeout(function(){
dew.panels.one("mouseover",switchIt);
},300);
}
}
})
});
}
dew.panels.each(function(el, i){
$(el).css("left", i * 83);
}).one("mouseover",switchIt);
dew.target.mouseleave(function(){
dew.panels.each(function(el, i){
$(el).fx(500,{
left: i * 83
});
});
});
});
水平跑马灯
.news{
width:200px;
height:24px;
border:1px solid black;
position:relative;
overflow:hidden;
}
.news .panel{
position:absolute;
top: 5px;
width:150px;
}
$.require("ready,more/switchable",function( ){
var news = $(".news").switchable({
data:[
{panel :'<span style="color:red">这是第一条新闻</span>'},
{panel :'<span style="color:blue">这是第二条新闻</span>'},
{panel :'<span style="color:#9932CC">这是第三条新闻</span>'},
],
autoplay:true,
pause_over_panel: true,
interval:2200,
active_callback:function(i){
this.panels.fx(2000, {
"left": "-=150",
after:function(){
if($(this).hasClass("active")){
$(this).css("left",300);
}
}
})
}
}).switchable("getUI");
news.panels.each(function(el,i){
$(this).css( "left", 150 * i );
});
})
