CHAPTER 11 - Interesting Custom-made Components

We have introduced the 14 standard Polymer components included in EZoApp. Amazingly, there is yet another website (http://customelements.io/) that allows developers to upload their own components to share with everyone around the world. It is not hard to see, from the introduction of EZoApp earlier, that EZoApp also has as its goal to link to these hundreds of web components. Although there are only three so far, they are still worth looking forward to!

EZoApp currently includes these interesting custom-made components:

1. x-gif

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=5711942643613696 )

This is a very interesting component. It mainly allows you to control the playback speed of a gif. What? The speed of a gif? That's right! It plays a gif like fast-forwarding or rewinding a video. The fill in the property panel will let the animated image fill the width of the display area; after all, not every image has the same exact size. n-times indicates the number of times to repeatedly play the gif; the default is unlimited. ping-pong plays the gif in a ping-pong ball style (forward-reverse); the default is not to play reverse; 1 means play reverse. speed is the play speed; normal speed is 1; a larger number represents a faster speed. Its code is shown below:

<x-gif src="http://i.imgur.com/gOyCBNa.gif" speed="0.1"></x-gif>

If you are interested in learning more about x-gif, you can refer to this article: http://www.dotblogs.com.tw/jqmdesigner/archive/2014/06/27/145729.aspx.

You can create an app that is capable of manually adjusting gifs using the slider bar function; in addition, on the second page, you can even display the gif frame-by-frame. This is really interesting!

2. x-meme

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=4820289716224000 )

x-meme has actually been a popular component in other countries for quite some time. In Taiwan, it is like the hot RV Comic Creator (瑞凡產生器). In a word, it uses some images from videos or cartoons, together with your own lines of text, to create funny comics.

If you want to add a picture yourself, you just need to add its URL in the src field in the property panel. You can also decide whether you want to add text at the top or at the bottom; just enter the text directly in the top or bottom field in the property panel.

<x-meme bottom="我回不去了" type="yuno" scaletofit="width" style="width: 100%;" src="http://i.ytimg.com/vi/6SMm3rk48ek/hqdefault.jpg"></x-meme>
<x-meme top bottom="WTF!!!!" type="thatwouldbegreat" scaletofit="width" style="width: 100%;" src="http://i.imgur.com/XZmrRkB.jpg"></x-meme>
<x-meme top="" bottom="bye" type="thatwouldbegreat" scaletofit="width" style="width: 100%;" src="http://i.imgur.com/h7zG9Mk.gif"></x-meme>

3. voice-player

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=4795207375650816 )

voice-player is a component that can play text out as voices. Enter the text to be read out in the text field; select a country in the accent field. It is now ready to read out the text.

<a class="ui-btn" id="gk-1027KeAW" onclick="document.querySelector('#gk-1027KeAW_voice').speak()">
  <voice-player id="gk-1027KeAW_voice" text="Welcome" accent="en">Welcome</voice-player>
</a>

Continue reading CHAPTER 12 - jQuery Mobile Tutorial (Basic)
Or Return to Table of Contents