注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

YUI2 Paginator + Tabview 实现Tab翻页效果  

2011-03-23 20:22:30|  分类: Yui |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


  YUI2  Paginator + Tabview 实现Tab翻页效果 - zhenghaoju700 - zhenghaoju700 的博客

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding Tabs</title>
<style type="text/css">
body {
    margin:0;
    padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/skins/sam/tabview.css" />
<link rel="stylesheet" type="text/css" href="../../build/paginator/assets/skins/sam/paginator.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="../../build/paginator/paginator-min.js"></script>

<style type="text/css">
.yui-navset button {
    position:absolute;
    top:0;
    right:0;
}
</style>

</head>
<body >
<h1>Paginator + Tabview</h1>
<div id="demo" >
    <div id="container" style="float:right;height:20px;margin-right:80px;line-height:65%;"></div>
    <ul id="list" >
        <li ><a href="#tab1"><em>Tab 1 </em></a></li>
        <li><a href="#tab2"><em>Tab 2 </em></a></li>
        <li><a href="#tab3"><em>Tab 3 </em></a></li>
        <li><a href="#tab4"><em>Tab 4 </em></a></li>
        <li><a href="#tab5"><em>Tab 5 </em></a></li>
        <li><a href="#tab6"><em>Tab 6 </em></a></li>
        <li><a href="#tab7"><em>Tab 7 </em></a></li>
        <li><a href="#tab8"><em>Tab 8 </em></a></li>
        <li><a href="#tab9"><em>Tab 9 </em></a></li>
        <li><a href="#tab10"><em>Tab 10 </em></a></li>
        <li><a href="#tab11"><em>Tab 11 </em></a></li>
        <li><a href="#tab12"><em>Tab 12 </em></a></li>
        <li><a href="#tab13"><em>Tab 13 </em></a></li>
    </ul>            
    <div >
        <div id="tab1"><p>Tab 1 Content</p></div>
        <div id="tab2"><p>Tab 2 Content</p></div>
        <div id="tab3"><p>Tab 3 Content</p></div>
        <div id="tab4"><p>Tab 4 Content</p></div>
        <div id="tab5"><p>Tab 5 Content</p></div>
        <div id="tab6"><p>Tab 6 Content</p></div>
        <div id="tab7"><p>Tab 7 Content</p></div>
        <div id="tab8"><p>Tab 8 Content</p></div>
        <div id="tab9"><p>Tab 9 Content</p></div>
        <div id="tab10"><p>Tab 10 Content</p></div>
        <div id="tab11"><p>Tab 11 Content</p></div>
        <div id="tab12"><p>Tab 12 Content</p></div>
        <div id="tab13"><p>Tab 13 Content</p></div>
    </div>
</div>
<script>
(function() {
    var tabView = new YAHOO.widget.TabView('demo');
    
    var addTab = function() {
        var labelText = window.prompt('enter the tab label');
        var content = window.prompt('enter the tab content');
        if (labelText && content) {
            tabView.addTab( new YAHOO.widget.Tab({ label: labelText, content: content }) );
            showPages(tabView);
        }
    };

    var button = document.createElement('button');
    button.innerHTML = 'add tab';

    YAHOO.util.Event.on(button, 'click', addTab);
    tabView.appendChild(button);
    
    var showPages = function(tab){
        var list = YAHOO.util.Dom.get('list');
        var lis = YAHOO.util.Dom.getChildren(list);
        var handlePagination = function (state) {
            YAHOO.util.Dom.setStyle(lis,"display","none");
            var startIndex = state.recordOffset;
            var recs = lis.slice(startIndex, startIndex + state.rowsPerPage);
            tab.selectTab(startIndex);
            YAHOO.util.Dom.setStyle(recs,"display","inline");
            paginator.setState(state);
        };
        if( typeof(paginator) != 'undefined') paginator.destroy();
        var paginator = new YAHOO.widget.Paginator({
            rowsPerPage : 8,
            totalRecords : lis.length,
            containers : ['container'],
            template : "{PreviousPageLink}{CurrentPageReport}{NextPageLink}",
            previousPageLinkLabel : "&larr;",
            nextPageLinkLabel : "&rarr;",
            pageReportTemplate : "{startRecord} - {endRecord} of the Top {totalRecords}"
        });

        paginator.subscribe('changeRequest',handlePagination);
        paginator.render();
        handlePagination(paginator.getState());
   }
   showPages(tabView);
})();
</script>
</body>
</html>

代码下载地址 http://download.csdn.net/source/3120638


  评论这张
 
阅读(422)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017