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为实例的一个方法，则调用此方法，将其他参数传进去，否则则重写或添加相关属性。

经过我的观察与研究，无论是切换卡也好，轮播也好，幻灯片也好，它们的结构都是非常相似。其中用于装载内容的面板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，因此这需要一个强大的切换特效插件才行。这个以后会补上的。

切换卡

            .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 );
                });
            })

posted on 2012-03-11 11:12 司徒正美阅读(2735) 评论(2) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Ruby's Louvre

导航

公告

mass Framework switchable插件