Blogs Hub

by AskGif | Aug 26, 2019 | Category :coding

Tutorial for jQuery Mobile Framework.

Tutorial for jQuery Mobile Framework.

<p>Jquery mobile framework helps you to develop rich web-based mobile applications. In this tutorial, we explained basic things such as theme selection, library usage, design pages, page links, and Transition animations. Its very lightweight code, simple and flexible, it supports all popular smartphone and tablet platforms. Use it and enrich your mobile web applications.</p> <p>&nbsp;</p> <p>Include jQuery Mobile libraries</p> <p>The first step includes jQuery Mobile stylesheet and javascript files in your webpage in the header section.</p> <pre class="language-markup"><code>&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.4.4.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"&gt;&lt;/script&gt;</code></pre> <p>&nbsp;</p> <p>Designing Your webpage</p> <p>jQuery mobile will work with normal HTML tags or HTML5 tags, but you need to add an attribute called data ( data-role, data-theme, etc.,) to your HTML tags.</p> <pre class="language-markup"><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;jQuery Mobile | AskGif&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.4.4.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role="page"&gt; &lt;div data-role="header" data-theme="a"&gt; &lt;h1&gt;AskGif&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;ul data-role="listview" data-theme="b"&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;h2&gt;Google Plus Style Drag and Drop adding Groups&lt;/h2&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;h2&gt;Getting Started with Adobe Flex&lt;/h2&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;h2&gt;Facebook Wall Script 4.0 Release&lt;/h2&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;h2&gt;Login with Google Plus OAuth&lt;/h2&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div data-role="footer"&gt; &lt;h3&gt;www.AskGif.info&lt;/h3&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> <p>&nbsp;</p> <p>Customizing single list item</p> <p>You can customize your article row by adding some description and comment count. See the following code&nbsp;</p> <pre class="language-markup"><code>&lt;li&gt; &lt;a href="http://www.AskGif.info/2011/09/google-plus-style-drag-and-drop-adding.html"&gt; &lt;h2&gt;Google Plus Style Drag and Drop adding Groups&lt;/h2&gt; &lt;/a&gt; &lt;p&gt;Are you looking for Google plus style drag and drop adding friends in groups or circle. Google plus circle implementation so cool, same way I have tried similar user &lt;/p&gt; &lt;span class="ui-li-count"&gt;55&lt;/span&gt; &lt;/li&gt;</code></pre> <p>&nbsp;</p> <p>Selecting theme styles</p> <p>The data-theme attribute is used to select a theme for a particular element. You can use a, b, c, d, e values for date-theme. (According to the jquery mobile doc you can use data-theme will accept values a, b, c ... z, but it is still under development)&nbsp;</p> <p>&nbsp;</p> <p>Linking between pages</p> <p>Linking between pages can be done using simple anchor tags. Give unique id for container and give the same id in anchor href value.</p> <pre class="language-markup"><code>&lt;!-- Home Page --&gt; &lt;div data-role="page" id="home"&gt; &lt;div data-role="header" data-theme="a"&gt; &lt;h1&gt;AskGif&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; Linking between pages. &lt;a href="#about_us" data-role="button" data-inline="true"&gt;About Us&lt;/a&gt; &lt;/div&gt; &lt;div data-role="footer"&gt; &lt;h3&gt;www.AskGif.info&lt;/h3&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- About Us Page --&gt; &lt;div data-role="page" id="about_us"&gt; &lt;div data-role="header" data-theme="a"&gt; &lt;h1&gt;AskGif&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; The page contains About Us&lt;br/&gt; Go back to Home &lt;a href="#home" data-role="button" data-inline="true"&gt;Home&lt;/a&gt; &lt;/div&gt; &lt;div data-role="footer"&gt; &lt;h3&gt;www.AskGif.info&lt;/h3&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>&nbsp;</p> <p>Transition Animation</p> <p>You can give transition animation while switching between pages. data-transition attribute is used to define a transition</p> <pre class="language-markup"><code>&lt;a href="#slide" data-transition="slide"&gt;About Us&lt;/a&gt; </code></pre>

read more...