mass Framework switchable插件
生活随笔
收集整理的這篇文章主要介紹了
mass Framework switchable插件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
最近都忙著寫這個(gè)插件，用它來統(tǒng)合跑馬燈（marquee），輪播（carousel），風(fēng)手琴（accordion）, 切換卡（tabs）, slide（幻燈片）這五種控件。
下面是它們的一些描述：
- 跑馬燈沒有觸發(fā)點(diǎn)(trigger)，而顯示內(nèi)容通常是一行行文字或扁平狀的圖片，自動(dòng)往上往下滾動(dòng)。不過也有從左到右滾動(dòng)的。
- 輪播經(jīng)常出現(xiàn)新聞的首頁，觸發(fā)點(diǎn)與面板個(gè)數(shù)相同，基本上從左到右切換，到了盡頭回到第一張繼續(xù)切換。觸發(fā)點(diǎn)都浮于控件的最上層的右下角。
- 風(fēng)手琴與輪播很相似，不過很少會(huì)自動(dòng)進(jìn)行自動(dòng)切換。其觸發(fā)器與控件同寬或同高，非常顯眼。
- 切換卡的觸發(fā)器會(huì)于控件的上方，也比較少自動(dòng)切換。
- 幻燈片基本會(huì)提供兩個(gè)觸發(fā)點(diǎn)，上一頁與下一頁，還有綁定鍵盤事件進(jìn)行上下翻。
因此，我們要提供一個(gè)API，用于讓用戶切換到指定的面板，同時(shí)讓對應(yīng)的觸發(fā)點(diǎn)處于激活狀態(tài)（高亮狀態(tài)）。
另外此五個(gè)控件就只在HTML結(jié)構(gòu)上存在出入，什么功能只是添多或添少的問題而已。因此我提供了兩種方案來指定控件的主體。一種是像EXT那樣，其HTML與CSS都是動(dòng)態(tài)生成的，另一種是，指定頁面已有的某一HTML片段作為頁面的主體。然后再從這主體中抽取出觸發(fā)點(diǎn)（triggers）與面板（panels），轉(zhuǎn)化為控件實(shí)例的屬性，供其他API調(diào)用。
下面是其API的說明：
$.fn.switchable(settings)
settings的配置參數(shù)：
- data:用于創(chuàng)建控件，必須是一個(gè)對象數(shù)組，每個(gè)對象都擁有trigger(可選)與panel屬性。
- data_expr:頁面現(xiàn)存的具有切換卡，手風(fēng)琴等結(jié)構(gòu)的HTML元素的CSS表達(dá)式。此屬性與data屬性只能二選一。
- trigger_class:觸發(fā)器的類名，它起著類似按鈕的作用，用于切換面板。
- panel_class:面板的類名。
- active_class:處于激活狀態(tài)的面板與觸發(fā)器都會(huì)添加上此類名。
- active_event:用于切換面板的事件，不是click就是mouseover。
- active_callback:切換面板時(shí)的回調(diào)函數(shù)。
- autoplay:是否自動(dòng)進(jìn)行切換，默認(rèn)是false。
- pause_over_panel:當(dāng)鼠標(biāo)移到控件之上是否中止切換，默認(rèn)是false。
- interval:切換面板后要延遲多久才自動(dòng)開始下一個(gè)切換，單位為ms，默認(rèn)是1000。
- switch_out:正在處于激活狀態(tài)的面板在失去激活狀態(tài)時(shí)要進(jìn)行的切換動(dòng)畫，默認(rèn)是$.fn.slideUp。
- switch_out_args:上面動(dòng)畫的參數(shù)， 默認(rèn)為500。
- switch_in:某一面板在變成激活狀態(tài)時(shí)要進(jìn)行的切換動(dòng)畫，默認(rèn)是$.fn.slideDown。
- switch_in_args:上面動(dòng)畫的參數(shù)， 默認(rèn)為500。
切換卡對象默認(rèn)擁有以下方法，都是使用$(expr).tabs(method,args1,args2,args3)的形式進(jìn)行調(diào)用：
- active(index, [callback],[e]): 切換到某一面板，index為面板的序號(hào)，從零開始。callback為回調(diào)函數(shù)，e為事件對象。回調(diào)函數(shù)中的this指向事件源對象或ui.target[0], 參數(shù)為e或ui
- remove(index, [callback]): 移除到某一面板，index為面板的序號(hào)，從零開始。callback為回調(diào)函數(shù)，擁有一個(gè)參數(shù)，就是實(shí)例自身, this指向ui.target[0]。
- add(index, trigger, panel): 在某一切換卡之后添加一個(gè)切換卡，trigger與panel為新切換卡的按鈕與面板。
- destroy(): 銷毀切換卡實(shí)例，移除相關(guān)事件綁定。
- invoke(method, args1, args2): 如果method為實(shí)例的一個(gè)方法，則調(diào)用此方法，將其他參數(shù)傳進(jìn)去，否則則重寫或添加相關(guān)屬性。
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); }) })經(jīng)過我的觀察與研究，無論是切換卡也好，輪播也好，幻燈片也好，它們的結(jié)構(gòu)都是非常相似。其中用于裝載內(nèi)容的面板panel是必不可少， 而在這些控件中，基本上都會(huì)一個(gè)觸發(fā)器（trigger）與之對應(yīng)，另外，在輪播控件中，切換大多數(shù)是整體向左移動(dòng)或整體向上移動(dòng)，這就要求有一個(gè)容器， 其寬等于所有面板的寬或其高等于所有面板的高，因此網(wǎng)上許多輪播控件都采用dl，dt，dd結(jié)構(gòu)，對應(yīng)我的switchable控件，分別中ui.target, ui.triggers, ui.panels，其中ui是可切換對象的實(shí)例，默認(rèn)類名依次是.mass_swichable, .trigger, .panel。那么對非輪播控件，ui.target在外觀的構(gòu)建上也不是沒有用處的， 畢竟多一層元素，我們可以用CSS把控件打扮得更漂亮。
下面是一個(gè)典型可切換對象的HTML結(jié)構(gòu)
<div class="sample"><div class="mass_switchable"><div class="trigger active">標(biāo)題1</div><div class="panel active">面板1</div><div class="trigger">標(biāo)題2</div><div class="panel">面板2</div><div class="trigger">標(biāo)題3</div><div class="panel">面板3</div><div class="trigger">標(biāo)題4</div><div class="panel">面板4</div></div></div>默認(rèn)情況下，控件會(huì)在ui.parent進(jìn)行事件代理（代理trigger元素上的點(diǎn)擊事件或mouseover事件），以實(shí)現(xiàn)面板的切換。 至于這些面板怎么切換，控件提供了三個(gè)入口， switch_in回調(diào)(this指向正要變成激活狀態(tài)的面板), switch_out回調(diào)(this指向正要失去激活狀態(tài)的面板)與 active_callback回調(diào)(this指向可切換對象, 我們可以ui.active_index得知處于激活狀態(tài)的面板的索引值, 同時(shí)也是對應(yīng)觸發(fā)點(diǎn)的索引值)
下面是一些例子, 更詳細(xì)的講解見github上的文檔!暫沒有幻燈片的示例，其實(shí)它是最簡單的，但通常是炫在其幻換時(shí)的特效，大家可以想象一下微軟的PowerPoint，因此這需要一個(gè)強(qiáng)大的切換特效插件才行。這個(gè)以后會(huì)補(bǔ)上的。
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:"標(biāo)題"+ (i+1),panel:"<div>面板"+(i+1)+"</div>"}}),switch_in: function(){this.show();},switch_out: function(){this.hide();}});}) 垂直手風(fēng)琴 .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:"標(biāo)題1",panel:"這是一個(gè)簡單的垂直手風(fēng)琴"},{trigger:"標(biāo)題2",panel:"只有最基本的功能"},{trigger:"標(biāo)題3",panel:"<div class=content>面板3</div>"},{trigger:"標(biāo)題4",panel:"<div class=content>面板4</div>"}],switch_in: $.fn.slideDown,switch_out: $.fn.slideUp});}) 水平手風(fēng)琴 .elephant{width:600px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8;position:relative;overflow:hidden; } /* 這里要足夠?qū)?#xff0c;能裝下四個(gè)trigger與一個(gè)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"});}) 水平輪播鼠標(biāo)移到控件之上會(huì)出現(xiàn)上一頁與下一頁。
.winnower {width:536px;height:265px;position:relative;overflow:hidden;border:2px solid #000; } .winnower .mass_switchable{width:3000px;/*此寬可容納所有面板*/height:270px; } /* 平鋪所有面板，實(shí)現(xiàn)整體往左移或往右移*/ .winnower .panel{float:left;display:block; } /* 設(shè)置觸發(fā)點(diǎn)*/ .winnower .trigger{position:absolute;display: block;width:15px;height:15px;z-index:100;bottom: 20px; } /* 灰色的圓點(diǎn) */ .winnower .trigger a {display:block;width:15px;height:15px;text-decoration:none;outline:none;background: url("winnower_s.png") no-repeat 3px -12px transparent; } /* 橙色的圓點(diǎn) */ .winnower .trigger a:hover,.winnower .trigger.active a{background-position:-15px -12px; } /*上一個(gè)與下一個(gè)*/ .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");/* 調(diào)整觸發(fā)器的位置,向它位于控件的左下角水平排列 */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 )});}) 以縮略圖作為觸發(fā)器的水平輪播 .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; } /* 讓所有觸發(fā)器居中對齊 */ .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);}) 通過淡入淡出進(jìn)行切換的水平輪播 .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)});}); 觸發(fā)器與面板一體化的手風(fēng)琴 .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 );});})總結(jié)
以上是生活随笔為你收集整理的mass Framework switchable插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： switchable图片切换
- 下一篇： 软件性能测试详解