ebook template

  • I am an author/publisher knowledgeable in HTML and CSS (but not JavaScript) who desires to publish my books in apps rather than ebooks. I need an Onsen template for an ebook that I can just plug in my HTML pages and have a finished product. Does such a template exist? Would it be easy for me to create one?

  • @sinc Are you wanting to do chapters and such? Should each chapter be just one long scrolling page?

    If so, the easiest way would be to use Monaca Cloud IDE, create a new project and use the sliding menu example. Then each chapter just needs to be its own html page and you link it, very much like <a> hyperlinks, to the menu. No javascript needed (kind of) as it is generated automagically by Onsen. All you would do is open menu.html and add/modify these lines to match your chapters.

         modifier="tappable" class="list__item__line-height"
         onclick="app.slidingMenu.setMainPage('chapter1.html', {closeMenu: true})">
         Chapter 1

    From there, just duplicate the page1.html and name them as your chapters. These pages accept any standard html and doesn’t require any additional modifications other than to fit the device screens, font size, etc.

  • Chaperts and one long scrolling page for each chaper would work. Makes sense. Thanks.

    I would rather have paged chapters, however, with a page changed by swipe much like a normal ebook. And it would be nice to have a search function too.

  • @sinc You can do the swipeable chapters and it works very much the same way. On the chapterX.html page, you would add the ons-carousel and then create pageX.html. This is a down and dirty way avoiding as much JS as possible. If you want to get into a bit of JS, you could easily do one main page that might be your cover graphic with a carousel then you would just add the pageX.html files. Then in your menu.html page, you would just call the page that corresponds to the page that is the start of the chapter.

    Now, search is a different beast altogether. You will have to get into JS, but it is actually pretty easy. Reference this document for an example: http://www.w3schools.com/jsref/jsref_search.asp

    Additionally, I would think a really good eBook would remember where you left off. That is also not as complex as you would think to implement. You would use localStorage to remember what page the user is on. In this thread, https://community.onsen.io/topic/246/walktrough I discuss how to do this exact feature.

    I would still recommend using the cloud IDE and you could have all of this setup and running fairly quickly. I think you would be surprised at how simple the JS would be.

  • Sounds good. Thanks.

  • @sinc I have created a template that has multiple styles of chapters, search function, and remembers where the user left off, if you are still interested.

Log in to reply