简单的电子书demo

348131342

简单做了一个电子书的demo，和大家分享一下。。用的是开源的rexsee，很容易。。
先上图，截了两张，一个是启动画面，一个是翻页画面。。
详细的代码不说了，重点只是贴一下翻页的效果代码。这个效果在原生开发看来会是异常复杂的，不过有了Rexsee那就变得很简单了，而且还可以很快的实现各种各样很炫的样式。。菜单布局方面的代码在网上找吧，有很多关于Rexsee布局类的代码。。好像最新版的Rexsee也能够支持原生UI布局了。


代码段一：

//初始化本地书库
rexseePreference.clear('books');
var FileUrls= rexseeFile.dir(rexseeStorage.getRoot()+'/download') ;
var FileUrlArray= new Array;
FileUrlArray=eval('('+FileUrls+')');
var i=0 ;
for(i=0;i<FileUrlArray.length;i++) {
var FileType="txt";
var FileUrl=FileUrlArray;
//获得文件的后缀名
FileTypeName=FileUrl.substring(FileUrl.lastIndexOf('.')+1,FileUrl.length).toLowerCase();
//获得文件的名字(不带后缀名)
FileName=FileUrl.substring(FileUrl.lastIndexOf('/')+1,FileUrl.length-4).toLowerCase();
if(FileType==FileTypeName){
//存入快存器
//alert(FileUrl)
rexseePreference.set(FileName,FileUrl,'books');
}

代码段二：

        function to11(){
        var image=document.getElementById("div1")
        var H=screen.availHeight+50;
        rexseeApplication.setDefaultEncoding('GB2312');
        var bookdatabase=new Array;
        bookdatabase=eval('('+rexseePreference.getKeys('books')+')');
        var value=parseInt(rexseePreference.get('xunhuanview','view'));
        //alert(value)
        if(rexseePreference.get('view').Length==0){
        //alert('if')
        image.innerHTML="<img src='http://www.****.com/readerDemo/bookimage/book.png' >"
        rexseePageFlip.show('testFlipBook',rexseePreference.get(bookdatabase[0],'books'),'background-color:http://www.****.com/readerDemo/bookimage/background2.jpg;label-background-color:http://www.****.com/readerDemo/bookimage/background2.jpg;label-padding:40 20 35 20;font-size:24px;color:#000000;text-align:left;line-height:120%;border-width:0px;border-color:#0000FF;window-align:center;window-vertical-align:top;width:'+document.body.clientWidth+';height:'+H+';window-modeless:true;',1,'');
        rexseePreference.set('xunhuanview','0','view');
        }else{
        //alert('else')
        //alert(bookdatabase.length )
        //alert(rexseePreference.get(bookdatabase[value],'books'))
        if(value>=0&&value<bookdatabase.length){
        //alert('ifif')
        rexseePageFlip.show('testFlipBook',rexseePreference.get(bookdatabase[value],'books'),'background-color:http://www.****.com/readerDemo/bookimage/background2.jpg;label-background-color:http://www.****.com/readerDemo/bookimage/background2.jpg;label-padding:40 20 35 20;font-size:24px;color:#000000;text-align:left;line-height:120%;border-width:0px;border-color:#0000FF;window-align:center;window-vertical-align:top;width:'+document.body.clientWidth+';height:'+H+';window-modeless:true;',1,'');
        switch(value){
                 case 0:
                 image.innerHTML="<img src='http://www.****.com/readerDemo/bookimage/book.png' >"
                 break
                 case 1:
                 image.innerHTML="<img src='http://www.****.com/readerDemo/bookimage/book5.png' >"
                 break
                 case 2:
                 image.innerHTML="<img src='http://www.****.com/readerDemo/bookimage/book3.png' >"
                 break
                 case 3:
                 image.innerHTML="<img src='http://www.****.com/readerDemo/bookimage/book4.png' >"
                 break
                 case 4:
                 image.innerHTML="<img src='http://www.****.com/readerDemo/bookimage/book1.png' >"
                 break
                 case 5:
                 image.innerHTML="<img src='http://www.****.com/readerDemo/bookimage/book2.png' >"
                 break        
        }
       
        value=value+1;
        rexseePreference.set('xunhuanview',value,'view');
        }else{
        //alert('elseelse')
         rexseePageFlip.show('testFlipBook',rexseePreference.get(bookdatabase[0],'books'),'background-color:http://www.****.com/readerDemo/bookimage/background2.jpg;label-background-color:http://www.****.com/readerDemo/bookimage/background2.jpg;label-padding:40 20 35 20;font-size:24px;color:#000000;text-align:left;line-height:120%;border-width:0px;border-color:#0000FF;window-align:center;window-vertical-align:top;width:'+document.body.clientWidth+';height:'+H+';window-modeless:true;',1,'');
         image.innerHTML="<img src='http://www.****.com/readerDemo/bookimage/book.png' >"
         rexseePreference.set('xunhuanview','0','view');
        }
        }
        }

j8900610

关于Rexsee对原生布局那个，谁能再介绍一下啊？

j8900610

最好能把代码分开，分成一段段，然后加以说明。我也有去研究，电子书貌似Rexsee有个在线开发框架呢，只是没开放出来，共享的源码里有提及