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.

The Markup

[sourcecode language=”html”]
<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>
[/sourcecode]

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.