WeMakeSites

Site Sesarch

Ebook Reader HTML5 Web Component

Inspired by this awesome solution, I just released a new HTML5 Web Component, recreating the layout and controls of e-book readers. Enter the X-Reader.

thumb

The Markup

<acidjs-xreader id="book-1" booktitle="A Clockwork Orange" author="Anthony Burgess" source="books/a-clockwork-orange.html"></acidjs-xreader>
<acidjs-xreader id="book-2" booktitle="Nineteen Eighty-Four" author="George Orwell" controls width="800" height="600" source="books/nineteen-eighty-four.html"></acidjs-xreader>
<acidjs-xreader id="book-3" width="320" height="240" defaultpage="1" source="books/lorem.html"></acidjs-xreader>

HTML Attributes

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

  • source – Required. Book source.
  • booktitle – Optional. Book title.
  • author – Optional. Book author.
  • controls – Optional. If set, the paging controls will be displayed by default.
  • width – Optional width in pixels of the component. Default: 640.
  • height – Optional height in pixels of the component. Default: 480.
  • defaultpage – Optional default page. Default: 0.

JavaScript Methods, Getters, Setters and Custom Events

All standard JavaScript methods are supported, plus the component-specific:

  • getData() – Returns the data object, associated with the queried component.

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

I use cookies to ensure you get the best experience.