选项卡和分页整合版【原创】

web前端 杭州-小白 选项卡和分页整合版【原创】

之前做一个活动用到的简单效果,在这里分享下,分页和选项卡完全可以分开的。

分页调用参数:

    this.mainProduct=config.mainProduct,//要显示内容的div
    this.productItem=config.productItem,//显示内容div中的一项
    this.mainPage=config.mainPage,//显示内容div中的分页div
    this.Pagesize=config.Pagesize,//分页大小
    this.className=config.className||”on”;//分页的当前样式,默认是on
    this.scrollTop=config.scrollTop||0;    //点击分页要到达的地方 .默认顶部

选项卡调用参数

    this.mainNav=config.mainNav;//选项卡的div
    this.mainContent=config.mainContent;//选项卡内容
    this.Reset=config.Reset||false;//点击选项卡的时候重置分页,不配置就是false
    this.className=config.className||”on”;//选项卡的样式,默认是on

demo中的调用方式

<script type=”text/javascript”>
var Newpage=new mainPage({mainProduct:”.mainProduct”,productItem:”.productItem”,mainPage:”.mainPage”,Pagesize:6,scrollTop:0}),
    NewTab=new tabNab({mainNav:”.subNav li”,mainContent:”.mainProduct”,Reset:Newpage});
    Newpage.GetPage();
    NewTab.showTab();
</script>

效果和css样式都是挂钩的。所以大家要注意下哈。这个只是例子,效果是参照物。能够举一反三你就进步咯!!!嘿嘿

如果不懂可以留言询问哈。如果不对或者改进的地方请大家多多指出奥.

鉴于很多朋友都想要个选项卡效果。我现在把这个剥离。放到了http://jsfiddle.net/xiaobai/hB723/这里可以自行查看

详情见demo

4人评论了“选项卡和分页整合版【原创】”

    1. 杭州-小白

      源码。demo就是源码呀。把demo这个页面的东西下载下来就行啦

评论区已关闭。