Application of Apple Browser (four)

The previous instance is a picture browser that replaces a text page or a two-page display directly from a novel reader. Page small reading is difficult, this article intends to change a few lines of code, with full-screen display, see how the effect.

#pgnumber {position:fixed;font-size:12px;left:200px;height:25px;top:10px;width:200px;z-index:1;} The original top changed to 10px, that is, from the footer to the header, you can dynamically change according to the screen size, in order to be simple, here only static changes.

Image paging with the following code, the previous page file has (onload= "getimages ()")

function GetImages () {
var i,pstr= ""
var imgstr= "for (i=0;i<603;i++) {//See how many pictures the directory has, add this information to a text pstr.
pstr+=imgstr+ (i+1001) + ".jpg><pn>"; The pictures are numbered sequentially (there are no more than 1000 pages in the picture, add 1000 to ensure the system is sorted correctly).
}
Pagestr=pstr.split ("<pn>");//Paging the text (603 pages)
Numberofpages=pagestr.length+1;//tells the reader how many pages there are.

}

function LOADF () {//Load paging
$ (' #book '). Turn ({
Acceleration:true,
Pages:numberofpages,
Elevation:30,
Display: ' single ',//reader default two-page display, one-page display should add this sentence.
Gradients:!$.istouch,
When: {
Turning:function (E, page, view) {
var range = $ (this). Turn (' range ', page);
for (page = range[0]; page<=range[1]; page++)
AddPage (page, $ (this));
},
Turned:function (E, page) {
$ (' #pgnumber ss:eq (1) '). Text (page); Originally in the footer of the page number and section column, the location of the header.
}
}
});
}

There is no limit to the number of theoretical sheets, put in a found folder (Apple Browser does not support the Chinese directory), if more than 1000 pages, will add 10000, because 1 and 0001 in the file system in the order is not the same.

From the Load function LOADF () you can see that each page information is short, the reader loads 6 pages at a time, and then dynamically changes no more than 6 pages according to the browsing situation. So the system consumes little resources, the page turn effect is good.

Operating effect:

Figure One: The menu bar of the header (blue font) is unclear, where the mouse can move.

Figure two: List box top can be added to 30px (here is 10px), mouse click on the menu name "chapter" and the title to be browsed such as "11.1 Regular expression definition"

Figure Three: Put the menu bar in the header, most of the time is visible, without adding code, the Visible menu and toolbar layout flexible (up and down anywhere).

Note: JS in the anchor definition is also very convenient, and the opening to now is not used, because the text menu has the same effect, theoretically can be placed anywhere, and it is easy to locate and dynamic loading.

The actual use of anchor definition and positioning with the drop-down menu (select->option) is similar, the use is very convenient, but the resource cost and dynamic change inconvenience.