基於用戶端的分頁導航

導航|分頁|用戶端

　　思路：用純JS的方法，只能通過判斷當前頁面的檔案名稱，然後算出上下頁地址，首頁和尾頁需要在指令碼中配置好，最後產生導航代碼。用資料繫結的方法則要簡單得多，設定dataPageSize，然後用 firstPage() 、previousPage() 、nextPage() 和 lastPage() 方法翻頁。

　　程式碼範例：

　　1. 純JS的，翻頁導航的依據是檔案名稱 page.js指令檔代碼

 Number.prototype.add0 = function(){    //對數字類型的擴充，主要用於實現當數字小於一定位元時在前面補0，直到倍數達到為止
 return (new Array(len).join("0")+this).slice(-len)  //返回字串，new Array(len).join("0")得到len個相連的"0"，然後和數字相加，再從得到的字串右邊起向左截取len位
 }
 String.prototype.mlink = function(n){    //對字元類型的擴充，主要用於根據檔案名稱中的數字產生連結
 return this.link(prefix+n.add0()+suffix)    //返回一個以字串為連結文字，prefix+n.add0()+subffix為連結地址的HTML代碼
 } var prefix = "page"       //檔案名稱首碼
 var suffix = ".htm"       //檔案名稱尾碼
 var first = 1        //第一頁的檔案名稱中的數字
 var last = 23        //最後一頁的檔案名稱中的數字
 var len = 2         //檔案名稱中的數位位元，從以上四個變數中可知檔案名稱為"page01.htm"和"page23.htm"這種形式
 var cur_page = location.href.match(new RegExp(prefix+"(\\d+)"+suffix,"i"))[1]|0      //從當前頁面地址中尋找匹配的數字
 var previous = cur_page-1      //上一頁的檔案名稱中的數字為當前頁的減1
 var next = cur_page+1      //下一頁的檔案名稱中的數字為當前頁的加1
 if(cur_page == first) previous = first    //如果當前頁為首頁，則上一頁的連結為首頁
 if(cur_page == last) next = last     //如果當前頁為尾頁，則下一頁的連結為尾頁
 navbar.innerHTML = ["首頁".mlink(first),"上一頁".mlink(previous),"下一頁".mlink(next),"尾頁".mlink(last)].join(" ")   //在 id 為 navbar 的對象中產生導航連結

　　然後在各頁中用<div id="navbar"></div><script src="page.js"></script>調用

　　2.對錶格進行資料繫結，然後用對象的翻頁方法實現

<xml id="oXML"> <forums> <forum> <name>[FLASH技術交流]</name> <moderator ><![CDATA[版主：贏點兒 chenye_1976 holybozo laiy.net]]></moderator> <description ><![CDATA[新手請儘管提問，老手儘管來切磋，讓學習和協助都成為一種樂趣。]]> </description> </forum> <forum> <name>[Action Script討論區]</name> <moderator ><![CDATA[版主：hnyashiro crazydevil horidream]]></moderator> <description ><![CDATA[Action Script應用，包含flash MX討論]]> </description> </forum> <forum> <name>[Macromedia Studio MX 2004討論學習區]</name> <moderator ><![CDATA[版主：AOL kissall 我佛山人]]></moderator> <description ><![CDATA[交流學習Macromedia Studio MX 2004心得與經驗,歡迎提供系統教程和資料翻譯.新]]> </description> </forum> <forum> <name>[Flash動畫技術區]</name> <moderator ><![CDATA[版主：歪馬秀 拾荒 林℃]]></moderator> <description ><![CDATA[中級動畫愛好者進級技術版塊,在這裡我們討論怎樣製作動畫造型,動作,背景等製作技術. ]]> </description> </forum> <forum> <name>[Flash遊戲技術區]</name> <moderator ><![CDATA[版主：AOL windson2002]]></moderator> <description ><![CDATA[這裡只討論Flash遊戲技術. ]]> </description> </forum> <forum> <name>[圖形處理與視覺傳達]</name> <moderator ><![CDATA[版主：顏志 保鏢豆豆 wxb_snowwolf 風過無痕]]></moderator> <description ><![CDATA[一切創作的基礎來源於圖形處理的基本功，Flash也不例外。喜歡這個的朋友不妨在這裡交流，探討。]]> </description> </forum> <forum> <name>[手繪藝術與角色設計]</name> <moderator ><![CDATA[版主：顏志 緋水]]></moderator> <description ><![CDATA[手繪藝術與角色設計]]> </description> </forum> <forum> <name>[Flash資源共用]</name> <moderator ><![CDATA[版主：kissall 木頭 CRAZYNO1]]></moderator> <description ><![CDATA[Flash相關資源和軟體的交流.]]> </description> </forum> <forum> <name>[Flash 3d 技術專版]</name> <moderator ><![CDATA[版主：白雪飄揚]]></moderator> <description ><![CDATA[討論怎樣讓flash裡面的物體三維運動起來]]> </description> </forum> <forum> <name>[網頁設計與編程]</name> <moderator ><![CDATA[版主：海光 我佛山人 erik168]]></moderator> <description ><![CDATA[我們討論所有和網頁設計有關的東西]]> </description> </forum> <forum> <name>[精品WEB-SITE]</name> <moderator ><![CDATA[版主：梵天 chenglei4u]]></moderator> <description ><![CDATA[精品WEB-SITE和FLASH動畫的展示專版]]> </description> </forum> <forum> <name>[閃吧電腦學校]</name> <moderator ><![CDATA[版主：Xray 藍.蝸牛]]></moderator> <description ><![CDATA[電腦的世界，由你我來探討。你遇到的各類問題，我們會協助你。（軟硬兼施＋網路）]]> </description> </forum> </forums> </xml> <style> table{border-collapse: collapse;width:600px;font:normal 12px Tahoma;background:#EEEEEE} button{border:1px solid #666666;background:#EEEEEE} </style> <center> <table bordercolor="#333333" border="1" cellspacing="0" cellpadding="3" datasrc="#oXML" dataPageSize="2" id="dTable"> <tr> <td width="25%" rowspan="2" align="center" valign="top"><span datafld="name" /></td> <td width="75%" height="20"><span datafld="moderator" /></td> </tr> <tr> <td><span datafld="description" /></td> </tr> </table> <table border="0" cellspacing="0" cellpadding="3" > <tr> <td align="right" colspan="2"><button >首頁</button><button >上一頁</button><button >下一頁</button><button >尾頁</button></td> </tr> </table>

    [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

　　注意：必須設定表格的dataPageSize屬性，並且資料來源跟 XML 對象的 id 相對應，翻頁時的對象必須跟綁定資料的表格對象相對應

　　提示：
　　dataPageSize 設定或擷取綁定到資料來源的表格中顯示的記錄數
　　dataSrc 設定或擷取用於資料繫結的資料來源
　　dataFld 設定或擷取由 dataSrc 屬性指定的綁定到指定對象的給定資料來源的欄位
　　firstPage 顯示綁定表格的資料集的第一頁記錄
　　previousPage 顯示綁定表格的資料集的上一頁記錄
　　nextPage 顯示綁定表格的資料集的下一頁記錄
　　lastPage 顯示綁定表格的資料集的最後一頁記錄
　　技巧：如果每次只顯示一條記錄，還可以用記錄集移動的方法：

 <xml id="oXML">
 <forums>  <forum>
  <name>[FLASH技術交流]</name>
  <moderator ><![CDATA[版主：贏點兒  chenye_1976 holybozo  laiy.net]]></moderator>
  <description ><![CDATA[新手請儘管提問，老手儘管來切磋，讓學習和協助都成為一種樂趣。]]> </description>
  </forum>  <forum>
  <name>[Action Script討論區]</name>
  <moderator ><![CDATA[版主：hnyashiro crazydevil horidream]]></moderator>
  <description ><![CDATA[Action Script應用，包含flash MX討論]]> </description>
  </forum>  <forum>
  <name>[Macromedia Studio MX 2004討論學習區]</name>
  <moderator ><![CDATA[版主：AOL kissall 我佛山人]]></moderator>
  <description ><![CDATA[交流學習Macromedia Studio MX 2004心得與經驗,歡迎提供系統教程和資料翻譯.新]]> </description>
  </forum>  <forum>
  <name>[Flash動畫技術區]</name>
  <moderator ><![CDATA[版主：歪馬秀 拾荒 林℃]]></moderator>
  <description ><![CDATA[中級動畫愛好者進級技術版塊,在這裡我們討論怎樣製作動畫造型,動作,背景等製作技術. ]]> </description>
  </forum>  <forum>
  <name>[Flash遊戲技術區]</name>
  <moderator ><![CDATA[版主：AOL windson2002]]></moderator>
  <description ><![CDATA[這裡只討論Flash遊戲技術. ]]> </description>
  </forum>  <forum>
  <name>[圖形處理與視覺傳達]</name>
  <moderator ><![CDATA[版主：顏志 保鏢豆豆 wxb_snowwolf 風過無痕]]></moderator>
  <description ><![CDATA[一切創作的基礎來源於圖形處理的基本功，Flash也不例外。喜歡這個的朋友不妨在這裡交流，探討。]]> </description>
  </forum>  <forum>
  <name>[手繪藝術與角色設計]</name>
  <moderator ><![CDATA[版主：顏志 緋水]]></moderator>
  <description ><![CDATA[手繪藝術與角色設計]]> </description>
  </forum>  <forum>
  <name>[Flash資源共用]</name>
  <moderator ><![CDATA[版主：kissall 木頭 CRAZYNO1]]></moderator>
  <description ><![CDATA[Flash相關資源和軟體的交流.]]> </description>
  </forum>  <forum>
  <name>[Flash 3d 技術專版]</name>
  <moderator ><![CDATA[版主：白雪飄揚]]></moderator>
  <description ><![CDATA[討論怎樣讓flash裡面的物體三維運動起來]]> </description>
  </forum>  <forum>
  <name>[網頁設計與編程]</name>
  <moderator ><![CDATA[版主：海光 我佛山人 erik168]]></moderator>
  <description ><![CDATA[我們討論所有和網頁設計有關的東西]]> </description>
  </forum>  <forum>
  <name>[精品WEB-SITE]</name>
  <moderator ><![CDATA[版主：梵天 chenglei4u]]></moderator>
  <description ><![CDATA[精品WEB-SITE和FLASH動畫的展示專版]]> </description>
  </forum>  <forum>
  <name>[閃吧電腦學校]</name>
  <moderator ><![CDATA[版主：Xray 藍.蝸牛]]></moderator>
  <description ><![CDATA[電腦的世界，由你我來探討。你遇到的各類問題，我們會協助你。（軟硬兼施＋網路）]]> </description>
  </forum> </forums>
 </xml>
 <style>
 table{border-collapse: collapse;width:600px;font:normal 12px Tahoma;background:#EEEEEE}
 button{border:1px solid #666666;background:#EEEEEE}
 </style>
 <center>
 <table bordercolor="#333333" border="1" cellspacing="0"
 cellpadding="3">
        <tr>
            <td width="25%" rowspan="2" align="center" valign="top"><span datasrc="#oXML" datafld="name" /></td>
            <td width="75%" height="20"><span datasrc="#oXML" datafld="moderator" /></td>
        </tr>
        <tr>
            <td><span datasrc="#oXML" datafld="description" /></td>
        </tr>
 </table>
 <table border="0" cellspacing="0"
 cellpadding="3" >
        <tr>
            <td align="right" colspan="2"><button >首頁</button><button >上一頁</button><button >下一頁</button><button >尾頁</button></td>
        </tr>
 </table>