Based on the client's page navigation

Posted by john
7/14/2007
Related Tags:
css navigation  css css navigation of the book 

  Thinking: JS of pure, it can only be judged through the pages of the document, and then calculated upper and lower page address, Home and End need scripts configuration, and the final code generation navigation.    Bundled with the data will have a much simpler method of setting dataPageSize, and then use firstPage (), previousPage (), nextPage () and lastPage () method to turn the pages. 

  Code examples: 

  1. Pure JS, page-navigation is based on the file name page.js script file 

  Number.prototype.add0 = function () (/ / the expansion of the digital type, mainly used to achieve certain when less than the median figure at the front-0, until multiples achieved so far 
  Return (new Array (len). Join ( "0") this). Slice (-len) / / string, new Array (len). Join ( "0") len be linked to a "0", and then and figures together, get a string from the left from the right-interception len 
  ) 
  String.prototype.mlink = function (n) (/ / characters on the type of expansion, according to the file name for the main figures in the formation of links 
  Return this.link (prefix n.add0 () suffix) / / string for a return link text, prefix n.add0 () subffix link address for the html code 
  ) Var prefix = "page" / / filename prefix 
  = Var suffix. "Htm" / / File Name Suffix 
  Var first = 1 / / the first page of the paper in the figures 
  Var last = 23 / / last page of the paper in the figures 
  Var len = 2 / / File Name of the median figures, more than four variables from the details of document, entitled "page01.htm" and "page23.htm" This form 
  Var cur_page = location.href.match (new RegExp (prefix "(\ \ d)" suffix, "i")) [1] | 0 / / address from the current page to find matching figures 
  Var previous = cur_page-1 / / Back in the file name of the figures for the current page by 1 
  Var next cur_page = 1 / / Next page of the paper in the figures for the current page plus 1 
  If (cur_page == first) first previous = / / If current page for the Home, Back Home for the link 
  If (cur_page == last) last next = / / If current page for the last page, next page links to Last 
  Navbar.innerHTML = [ "Home." Mlink (first), "Back." Mlink (previous), "Next." Mlink (next), "Last." Mlink (last)]. Join ( "") / / id as the object of navbar generated navigation links 

  And then used the pages <div id = "navbar"> </ div> <script src="page.js"> </ script> Call 

  2. Forms for data binding, and then use the page-object method 

  Note: You must set up tables dataPageSize attributes, and with the XML data source object corresponding to the id, turning the pages with the object must be bundled data object relative to the form 

  Note: 
  DataPageSize settings or access to bind to data sources in the form of the record shows that the number dataSrc settings or access to data binding data sources dataFld set up or acquire properties designated by the dataSrc bind to a specific target of a given data source field firstPage show that bind form data sets previousPage record of the first page of the form shows that bundled data sets nextPage Previous records show that bind form data sets Next lastPage records show that the binding forms the final data set Page recorded TIP: If each show only one record can also use the mobile sets record: 

  <xml Id="oXML"> 
  <forums> <forum> 
  <name> [FLASH technology exchange] </ name> 
  <moderator> <! [CDATA [Moderator: win little chenye_1976 holybozo laiy.net ]]></ moderator> 
  <description> <! [CDATA [Please Although a novice, despite the veteran to learn from, to learn and to help have become a kind of enjoyment.    ]]> </ Description> 
  </ Forum> <forum> 
  <name> [Action Script discussion board] </ name> 
  <moderator> <! [CDATA [Moderator: hnyashiro crazydevil horidream ]]></ moderator> 
  <description> <! [CDATA [Action Script applications, including flash MX discussion]]> </ description> 
  </ Forum> <forum> 
  <name> [Macromedia Studio MX 2004 study and discussion areas] </ name> 
  <moderator> <! [CDATA [Moderator: AOL kissall I Foshan people ]]></ moderator> 
  <description> <! [CDATA [exchange study Macromedia Studio MX 2004 views and experiences, tutorials and welcome the translation system. New]]> </ description> 
  </ Forum> <forum> 
  <name> [Flash animation technology areas] </ name> 
  <moderator> <! [CDATA [Moderator: distortion Ma Lin scavengers ℃ ]]></ moderator> 
  <description> <! [CDATA [middle-class animation technology enthusiasts into view, and here we are discussing how to produce animation modeling, movement, background production technology.]]> </ Description> 
  </ Forum> <forum> 
  <name> [Flash gaming technology areas] </ name> 
  <moderator> <! [CDATA [Moderator: AOL windson2002 ]]></ moderator> 
  <description> <! [CDATA [discussion here only Flash gaming technology.]]> </ Description> 
  </ Forum> <forum> 
  <name> [Graphics and visual communication] </ name> 
  <moderator> <! [CDATA [Moderator: Yan bodyguards Doudou wxb_snowwolf Fengguomogen ]]></ moderator> 
  <description> <! [CDATA [the basis of all creativity comes from the skills graphics, Flash is no exception.    Like this friend here in the exchange may explore.    ]]> </ Description> 
  </ Forum> <forum> 
  <name> [Hand-painted art and the role of design] </ name> 
  <moderator> <! [CDATA [Moderator: Yan Fei water ]]></ moderator> 
  <description> <! [CDATA [hand-painted art and the role of design]]> </ description> 
  </ Forum> <forum> 
  <name> [Flash resource sharing] </ name> 
  <moderator> <! [CDATA [Moderator: kissall wood CRAZYNO1 ]]></ moderator> 
  <description> <! [CDATA [Flash related resources and the exchange of software.]]> </ Description> 
  </ Forum> <forum> 
  <name> [Flash 3d technology Edition] </ name> 
  <moderator> <! [CDATA [Moderator: snow fluttered ]]></ moderator> 
  <description> <! [CDATA [discuss how to flash inside the three-dimensional objects up campaign]]> </ description> 
  </ Forum> <forum> 
  <name> [Web design and programming] </ name> 
  <moderator> <! [CDATA [Moderator: Hoi-I Foshan people erik168 ]]></ moderator> 
  <description> <! [CDATA [and we discussed all things related to web page design]]> </ description> 
  </ Forum> <forum> 
  <name> [Quality WEB-SITE] </ name> 
  <moderator> <! [CDATA [Moderator: Fantian chenglei4u ]]></ moderator> 
  <description> <! [CDATA [quality WEB-SITE FLASH animation and feature pages of the display]]> </ description> 
  </ Forum> <forum> 
  <name> [Shanba computer schools] </ name> 
  <moderator> <! [CDATA [Moderator: Xray Blue. Snail ]]></ moderator> 
  <description> <! [CDATA [computer world, and you and me to explore.    You encountered various problems, we will help you.    (Stick + Network)]]> </ 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 onClick="oXML.recordset.movefirst()"> Home </ button> <button onClick = "oXML.recordset.moveprevious (); if (oXML. recordset.bof) oXML.recordset.movenext () "> Previous </ button> <button onClick="oXML.recordset.movenext();if(oXML.recordset.eof)oXML.recordset.moveprevious()"> Next </ button> <button onClick="oXML.recordset.movelast()"> Last </ button> </ td> 
  </ Tr> 
  </ Table> 

Related articles:

Flash MTV "New Year Concert" Case Analysis of the production
  Today, we use flash Elvis will be invited to all performances, open a New Year concert!    We can learn from some flash animation techniques.    We performed prior to the beginning of the first rehearsal, you as a guide to stage concerts will be audited to see whether to ...
Learning a web standard labels
  In the web standards study, we have today to study under a label.    We should open in a new window links usual practice is behind the increase in the link target = "_blank", we have adopted the DOCTYPE transition (xhtml1-transitional. dtd), no problem, but when we use s...
Flash MX 2004 create lifelike lighters
  Life of the lighter is seen everywhere, but in the Flash animation how to achieve realistic lighters effect?    Do not worry, after learning this case, we knew how to produce a lifelike simulation of the lighters.    In the results used in the production of a lot of pract...
CSS layout entry [css]
  CSS layout entry [css]    CSS layout and the traditional form (table) the biggest difference is the layout: the original location forms are used by the spacing or use forms colorless, transparent GIF picture of the layout view to control the spacing, and now use Layer (div ) positi...
Dreamweaver MX 2004 Video Collection Guide (101)
  Section 101 sets: onselect, onload / onunload incident    Curriculum objectives: master onselect, onload / onunload incident and the role of use.    Course elements: the user onselect incident occurred in the selection of texts.    Onload incident when pages or...