门户网页分页（pagination Style）

项目需要，写了个网页分页。贴出来show下。

一、css样式

 

/* ------------------------------------------------ */
/* ------------- Pagination: vnet1 Style-----------    */
/* ------------------------------------------------ */

#pagination-vnet1              { font-family:Arial, Helvetica, sans-serif; font-size:12px; border:0; margin:0; padding:0; }
#pagination-vnet1 .point      { padding:3px; vertical-align:baseline}
#pagination-vnet1 .goto          { margin-left:3px;font-size:13px;}
#pagination-vnet1 .goto input { border:solid 1px #DDDDDD; font-family:Arial, Helvetica, sans-serif; width:30px;}
#pagination-vnet1 li          { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-vnet1 a           { border:solid 1px #DDDDDD; margin-right:2px; }
#pagination-vnet1 .point      { padding:5px;vertical-align:baseline}
#pagination-vnet1 .previous-off,
#pagination-vnet1 .next-off   { color:#666666; display:block; float:left; font-weight:bold; padding:3px 4px; }
#pagination-vnet1 .next a,
#pagination-vnet1 .previous a { font-weight:bold; border:solid 1px #FFFFFF; }    
#pagination-vnet1 .active     { color:#ff0084; font-weight:bold; display:block; float:left; padding:4px 6px; }
#pagination-vnet1 a:link, 
#pagination-vnet1 a:visited   { color:#0063e3; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-vnet1 a:hover     { border:solid 1px #666666; }


/* -------------------------------------------- */
/* ------------- Pagination: vnet2 Style -----------    */
/* -------------------------------------------- */
#pagination-vnet2              { font-family:Arial, Helvetica, sans-serif; font-size:12px; border:0; margin:0; padding:0; }
#pagination-vnet2 .point      { padding:3px; vertical-align:baseline}
#pagination-vnet2 .goto          { margin-left:3px;font-size:13px;}
#pagination-vnet2 .goto input { border:solid 1px #DEDEDE; font-family:Arial, Helvetica, sans-serif; width:30px;}
#pagination-vnet2 li          { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-vnet2 a           { border-right:solid 1px #DEDEDE; margin-right:2px; }
#pagination-vnet2 .previous-off,
#pagination-vnet2 .next-off   { color:#888888; display:block; float:left; font-weight:bold; padding:3px 4px; }    
#pagination-vnet2 .next a,
#pagination-vnet2 previous a  { border:none; font-weight:bold; }    
#pagination-vnet2 .active     { color:#000000; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ border-right:solid 1px #DEDEDE; }
#pagination-vnet2 a:link,
#pagination-vnet2 a:visited   { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:underline; }
#pagination-vnet2 a:hover     { text-decoration:none; }


/* -------------------------------------------- */
/* ----------- Pagination: vnet3 Style --------- */
/* -------------------------------------------- */

#pagination-vnet3              { font-family:Arial, Helvetica, sans-serif; font-size:12px; border:0; margin:0; padding:0; }
#pagination-vnet3 .point      { padding:3px; vertical-align:baseline}
#pagination-vnet3 .goto          { margin-left:3px;font-size:13px;}
#pagination-vnet3 .goto input { border:solid 1px #9aafe5; font-family:Arial, Helvetica, sans-serif; width:30px;}
#pagination-vnet3 li          { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-vnet3 a           { border:solid 1px #9aafe5; margin-right:2px; }
#pagination-vnet3 .previous-off,
#pagination-vnet3 .next-off   { border:solid 1px #DEDEDE; color:#888888; display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; }
#pagination-vnet3 .next a,
#pagination-vnet3 .previous a { font-weight:bold; }    
#pagination-vnet3 .active     { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ margin-right:2px; }
#pagination-vnet3 a:link, 
#pagination-vnet3 a:visited   { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-vnet3 a:hover     { border:solid 1px #0e509e; }

 

二、html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="stefanie" />
        <meta name="description" content="http://www.mindpoint.cn/stefanie" />
        <title>vnet paginazione style by stefanie</title>

        
    </head>
    
  <body>
  
  <h2>Pagination Style</h2>
  <div>
  <ul id="pagination-vnet1">
    <li class="previous-off">&laquo; Previous</li>
      <li class="active">1</li>
      <li><a href="?page=2">2</a></li>
      <li><a href="?page=3">3</a></li>
      <li><a href="?page=4">4</a></li>
      <li><a href="?page=5">5</a></li>
      <li><a href="?page=6">6</a></li>
      <li><a href="?page=7">7</a></li>
      <li class="next"><a href="?page=8">Next &raquo;</a></li>
  </ul>
</div>

<br><br><br><br>
<div>
    <ul id="pagination-vnet2">
    <li class="previous-off">&laquo; Previous</li>
      <li class="active">1</li>
      <li><a href="?page=2">2</a></li>
      <li><a href="?page=3">3</a></li>
      <li><a href="?page=4">4</a></li>
      <li><a href="?page=5">5</a></li>
      <li><a href="?page=6">6</a></li>
      <li><a href="?page=7">7</a></li>
      <li class="next"><a href="?page=8">Next &raquo;</a></li>
  </ul>
</div>


<br><br><br><br>
<div>

    <script type="text/javascript" >
    
        // 
        var _vnetPagination_TotalPageCount = 10;            // 
        var _vnetPageination_CurrentPageIndex = 2;            // 
        var _vnetPageination_Url = "http://www.vnet.cn";    // 
        // http://news.vnet.cn/news/ent/huandengpian/youye/200905/0513_2317_205821.htm
        var _vnetPageination_IsShowNextSection = true;
        var _vnetPageination_NextSectionUrl = "http://www.vnet.cn";
        var _vnetPageination_ShowCount = 5;
        var _vnetPageination_IsNeedGoto = true;
        var _vnetPageination_Style = "pagination-vnet3";


        window.onload = function(){
            var styleLink = document.createElement("link");
            styleLink.setAttribute("rel","stylesheet");
            styleLink.setAttribute("href","style.css");
            styleLink.setAttribute("type","text/css");
            document.body.appendChild(styleLink);

            var PageCount = _vnetPagination_TotalPageCount;
            var CurrentIndex = _vnetPageination_CurrentPageIndex;
            var Url = _vnetPageination_Url;
            var NextSectionUrl = _vnetPageination_NextSectionUrl;
            var showCount = _vnetPageination_ShowCount;
            var isNeedGoto = _vnetPageination_IsNeedGoto;
            var styleName = _vnetPageination_Style;

            //var previousText = "&laquo; Previous";
            //var nextText = "Next &raquo;";

            var previousText = "&laquo;上一页";
            var nextText = "下一页&raquo;";
            
            // create DIV
            var uDiv = document.createElement("div");
            
            var uul = document.createElement("ul");
            uul.id= styleName;
            
            // previsus Style
            var uli = document.createElement("li");
            uli.className = "previous-off";
            uli.innerHTML = previousText; 
            uul.appendChild(uli);

            // 1.2.3.4.5
            for(var i = 1; i <= showCount; i++)
            {
                var uli_num = document.createElement("li");
                if(i == _vnetPageination_CurrentPageIndex)
                {
                    uli_num.className = "active";
                    uli_num.innerHTML = i;
                }
                else
                {
                    var _ua = document.createElement("a");
                    _ua.href = "?page="+i;
                    _ua.innerHTML  = i;
                    uli_num.appendChild(_ua);
                }
                
                uul.appendChild(uli_num);
            }
            
            if( PageCount > showCount )
            {
                var uli_spoint = document.createElement("li");
                uli_spoint.innerHTML = "  ";
                uli_spoint.className = "point";
                uul.appendChild(uli_spoint);

                var uli_Max = document.createElement("li");
                var _uaMax = document.createElement("a");
                _uaMax.href = "?page="+ PageCount;
                _uaMax.innerHTML  = PageCount;
                uul.appendChild(_uaMax);
            }

            var uli_next = document.createElement("li");
            uli_next.className = "next";
            var ua_next = document.createElement("a");
            ua_next.href = "?page="+i+1;
            ua_next.innerHTML = nextText;
            uli_next.appendChild(ua_next);
            uul.appendChild(uli_next);

            // go to 
            if(isNeedGoto)
            {
                var uli_goto = document.createElement("li");
                uli_goto.className = "goto";
                var text1 = document.createTextNode("到第");
                uli_goto.appendChild(text1);
                //uli_goto.innerHTML = "到第";
                
                var uli_goto_input = document.createElement("input");
                uli_goto_input.setAttribute("type","text");
                uli_goto_input.id="vnetPageination_toPageIndex";
                uli_goto_input.setAttribute("width","30");
                uli_goto.appendChild(uli_goto_input);
                
                var text2 = document.createTextNode("页");
                uli_goto.appendChild(text2);

                var uli_goto_button = document.createElement("button");
                
                uli_goto_button.setAttribute("onclick","new function(){var pageIndex = document.getElementById(\"vnetPageination_toPageIndex\").value; if(isNaN(pageIndex)){alert('不是数字!');return;} if(pageIndex <= _vnetPagination_TotalPageCount){alert(pageIndex);};}");

                //uli_goto_button.setAttribute("onclick","new function(){alert(document.getElementById('vnetPageination_toPageIndex').value);}");

                var text3 = document.createTextNode("确定");
                uli_goto_button.appendChild(text3);
                uli_goto.appendChild(uli_goto_button);
                
                uul.appendChild(uli_goto);
            }

            uDiv.appendChild(uul);
            
            document.body.appendChild(uDiv);
    }
    
    </script>
    </div>
    
    </body>
</html>