mass Framework switchable插件

最近都忙着写这个插件，用它来统合跑马灯（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为实例的一个方法，则调用此方法，将其他参数传进去，否则则重写或添加相关属性。

" } }), switch_in: function(){ this.show(); }, switch_out: function(){ this.hide(); } }); $1(".starfish").switchable({ data:[ {trigger:"标题1",panel:"这是一个简单的垂直手风琴"}, {trigger:"标题2",panel:"只有最基本的功能"}, {trigger:"标题3",panel:"

面板3

"}, {trigger:"标题4",panel:"

面板4

"} ], switch_in: $1.fn.slideDown, switch_out: $1.fn.slideUp }); var dew = $1(".dew").switchable({ data:"012345".split("").map(function(el,d){ return { panel:'

' } }), count:0 }).switchable("getUI"); function switchIt(e){ var index = $1(this).index(); var width = $1(this).width(); dew.panels.each(function(el,i){ $1(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){ $1(el).css("left", i * 83); }).one("mouseover",switchIt); dew.target.mouseleave(function(){ dew.panels.each(function(el, i){ $1(el).fx(500,{ left: i * 83 }); }); }); var winnower = $1(".winnower").switchable({ data: "01234".split("").map(function(el,d){ return { trigger:' ', panel:'

' }; }), active_callback: function(){ var w = -1 * this.panels.innerWidth() * this.active_index; this.target.fx(500, {"margin-left":w } ) } }).switchable("getUI"); var winnowerUI = winnower.parent.append(' ').append(' ') var winnowerArrow = winnowerUI.find(".arrow"); winnower.triggers.each(function(el, i){ $1(el).css( "right", 100 - i * 17) }) winnowerUI.mouseenter(function(){ winnowerArrow.show() }).mouseleave(function(){ winnowerArrow.hide() }); winnowerArrow.click(function(){ var next = $1(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 ) }); var imac = $1(".imac").switchable({ data: "0123456".split("").map(function(el,d){ return { trigger:' ', panel:' ' } }), 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 ); $1(" ").appendTo(".imac").append(imac.triggers); var fade = $1(".fade").switchable({ data: "0123".split("").map(function(el,d){ return { panel:' ', trigger:' '+(d+1)+"" } }), 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"); $1("").appendTo(fade.target); fade.triggers.each(function(el, i){ if( i != 0){ fade.panels.eq(i).css("opacity",0) } $1(el).css("right",90- i * 24) }); var elephant = $1(".elephant").switchable({ data:[ { trigger:" 第一张", panel:'

First mammoth here

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.

' }, { trigger:" 第二张", panel:'

Over the moon!

Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget.

' }, { trigger:" 第三张", panel:'

Another mammoth

Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

' }, { trigger:" 第四张", panel: '

This is my favourite

Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

' } ], 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" }); var news = $1(".news").switchable({ data:[ {panel :' 这是第一条新闻'}, {panel :' 这是第二条新闻'}, {panel :' 这是第三条新闻'}, ], autoplay:true, pause_over_panel: true, interval:2200, active_callback:function(i){ this.panels.fx(2000, { "left": "-=150", after:function(){ if($1(this).hasClass("active")){ $1(this).css("left",300); } } }) } }).switchable("getUI"); news.panels.each(function(el,i){ $1(this).css("left", 150 * i); }) })

经过我的观察与研究，无论是切换卡也好，轮播也好，幻灯片也好，它们的结构都是非常相似。其中用于装载内容的面板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-1var 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 = 0setTimeout(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 );});})