基於用戶端的分頁導航

來源:互聯網
上載者:User
導航|分頁|用戶端

  思路:用純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>



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。