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

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

本文固定链接: http://www.xiaobai8.com/Blog/443.html | web前端,杭州小白的个人博客,小白的个人博客

该日志由 杭州-小白 于2012年04月05日发表在 jQuery 分类下,
原创文章转载请注明: 选项卡和分页整合版【原创】 | web前端,杭州小白的个人博客,小白的个人博客
关键字: , , ,

选项卡和分页整合版【原创】:目前有4 条留言

  1. 板凳
    lovelymify:

    是不是引用了js包的哦

    2012-05-22 17:17
    • 杭州-小白:

      jq的基础包。这个引用了的

      2012-05-23 15:15
  2. 沙发
    lovelymify:

    能给个源码吗?

    2012-05-22 17:20
    • 杭州-小白:

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

      2012-05-23 15:14