March 13, 2014
Do you need to develop web applications that can be used anywhere, any time, on a wide assortment of mobile devices? If you want to be a rock-star developer, you’ll need to begin by downloading jQuery mobile.
jQuery mobile is a powerful user interface (UI) framework that lets you quickly develop robust browser applications for use on mobile devices.It’s also quick and easy to get started as a developer. Just include jQuery mobile in your web application by copying and pasting the following lines of code into the <head></head> of your HTML file
jQuery mobile is a powerful user interface (UI) framework that lets you quickly develop robust browser applications for use on mobile devices.It’s also quick and easy to get started as a developer. Just include jQuery mobile in your web application by copying and pasting the following lines of code into the <head></head> of your HTML file
:<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
Once included, you’ll have access to the full jQuery mobile library. Widgets can easily be integrated into pages by including data elements in your HTML tags.
But what can you do with it? Here are 15 tips to help you make the most of jQuery mobile — for assistance, most titles link to a jQuery mobile information page.
1. Accordions: These are collapsible sections for organizing content in jQuery mobile. Accordions get their name from the fact that just one section can be open at any one time, so they resemble an accordion
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
Once included, you’ll have access to the full jQuery mobile library. Widgets can easily be integrated into pages by including data elements in your HTML tags.
But what can you do with it? Here are 15 tips to help you make the most of jQuery mobile — for assistance, most titles link to a jQuery mobile information page.
1. Accordions: These are collapsible sections for organizing content in jQuery mobile. Accordions get their name from the fact that just one section can be open at any one time, so they resemble an accordion
.<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
2. App your site: Automatically scroll when a page loads so the search bar hides. This makes the site perform more like an app.
2. App your site: Automatically scroll when a page loads so the search bar hides. This makes the site perform more like an app.
$('body').scrollTop(1);
3. Auto scroll: This can be done through the jQuery.mobile.silentScroll() method. This allows you to create a link that takes the user back to the top of the page.
3. Auto scroll: This can be done through the jQuery.mobile.silentScroll() method. This allows you to create a link that takes the user back to the top of the page.
<a href="#" onclick="$.mobile.silentScroll(0)">Back to Top</a>
4. Autocomplete: This widget automatically populates a list view as the user types a search command. A data-filtertext function allows the user to manually enter keywords and phrases for custom searches.
4. Autocomplete: This widget automatically populates a list view as the user types a search command. A data-filtertext function allows the user to manually enter keywords and phrases for custom searches.
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
<li><a href="#">Acura</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Chrysler</a></li>
<li><a href="#">Ferrari</a></li>
<li><a href="#">GMC</a></li>
<li><a href="#">Hyundai</a></li>
<li><a href="#">Jeep</a></li>
<li><a href="#">Lexus</a></li>
<li><a href="#">Nissan</a></li>
<li><a href="#">Porsche</a></li>
<li><a href="#">Toyota</a></li>
<li><a href="#">Volvo</a></li>
</ul>
5. Buttons: With this widget, you can easily format links to look like buttons in a variety of sizes, colors and shapes. For example, if you are building a site that will handle sales transactions, you can create a “checkout” or “place order” button.
5. Buttons: With this widget, you can easily format links to look like buttons in a variety of sizes, colors and shapes. For example, if you are building a site that will handle sales transactions, you can create a “checkout” or “place order” button.
<a href="#" data-role="button">Anchor</a>
6. Dialog boxes: The dialog widget opens content in an interactive overlay. You can stylize a dialog box — for example, by adding a color, a particular font or rounded edges. You can similarly design a pop-up page and stylize it in the same way you can a dialog box.
6. Dialog boxes: The dialog widget opens content in an interactive overlay. You can stylize a dialog box — for example, by adding a color, a particular font or rounded edges. You can similarly design a pop-up page and stylize it in the same way you can a dialog box.
<a href="sample.html" data-rel="dialog">Open dialog</a>
7. Fast switch: jQuery mobile allows users to switch to full website view on responsive sites by manipulating the viewport, as shown here:
7. Fast switch: jQuery mobile allows users to switch to full website view on responsive sites by manipulating the viewport, as shown here:
viewport = $('meta[name="viewport"]');
viewport.attr('content', 'width=1000');
You can then switch back with the following code
You can then switch back with the following code
string:viewport.attr('content', 'width=device-width');
8. Go native: You can make a web page resemble a native app by removing the user’s ability to zoom. This is accomplished by adding user-scalable=no to the view port content.
8. Go native: You can make a web page resemble a native app by removing the user’s ability to zoom. This is accomplished by adding user-scalable=no to the view port content.
<meta name="viewport" content="width=device-width, user-scalable=no"/>
9. Go small: A media query-specific JavaScript allows you to run different JavaScript code snippets for different screen sizes. This is especially useful for small mobile devices.
9. Go small: A media query-specific JavaScript allows you to run different JavaScript code snippets for different screen sizes. This is especially useful for small mobile devices.
if (matchMedia('only screen and (min-width: 980px)').matches) {
do something
}
10. Plug-ins: jQuery mobile offers a great library of plug-ins that simplify coding your site and allow you to easily add a number of useful features — such as tables of contents, mapping features and animation.
11. Pop-ups for tooltips: In this sample, clicking on the link will display the help text.
10. Plug-ins: jQuery mobile offers a great library of plug-ins that simplify coding your site and allow you to easily add a number of useful features — such as tables of contents, mapping features and animation.
11. Pop-ups for tooltips: In this sample, clicking on the link will display the help text.
<a href="#popupBasic" data-rel="popup" data-role="button"
data-inline="true" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>
12. Responsive: Build mobile responsive apps with the jQuery Grid and jQuery Responsive Grid. The code example below creates a grid with three columns of equal width:
12. Responsive: Build mobile responsive apps with the jQuery Grid and jQuery Responsive Grid. The code example below creates a grid with three columns of equal width:
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->
13. Theme match: jQuery mobile comes with its own Themeroller. With this widget, you can easily build a custom stylesheet that matches the rest of your site. Just download and start building, then replace the CSS in <head>></head>.
14. Transition loading: jQuery mobile offers 34 different types of events that can be used by developers to control when transitions load on a page. For example, you can run code as a user begins to scroll. This would be useful if you wanted to adjust a header as the individual scrolls down the page. Here’s a code sample from the events
13. Theme match: jQuery mobile comes with its own Themeroller. With this widget, you can easily build a custom stylesheet that matches the rest of your site. Just download and start building, then replace the CSS in <head>></head>.
14. Transition loading: jQuery mobile offers 34 different types of events that can be used by developers to control when transitions load on a page. For example, you can run code as a user begins to scroll. This would be useful if you wanted to adjust a header as the individual scrolls down the page. Here’s a code sample from the events
widget:jQuery( ".selector" ).on( "scrollstart", function( event ) { ... } )
15. Transitions: Control the transition type for any moving item by using the data-transition widget. This can be used for opening popups and dialog boxes. Options include fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown and none.
Here’s an example:
15. Transitions: Control the transition type for any moving item by using the data-transition widget. This can be used for opening popups and dialog boxes. Options include fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown and none.
Here’s an example:
<a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a>
The steps above will help you to best utilize jQuery mobile, so you can develop web applications that can be used on the go, in real time and on an assortment of mobile devices — in other words, you’ll be well on your way to developer rock stardom.
Use the comments section to share your tips and tricks for using jQuery mobile.
— Robert Half Technology
With more than 100 locations worldwide, Robert Half Technology is a leading provider of technology professionals for initiatives ranging from web development and multiplatform systems integration to network security and technical support. Visit our website at www.rht.com.
The steps above will help you to best utilize jQuery mobile, so you can develop web applications that can be used on the go, in real time and on an assortment of mobile devices — in other words, you’ll be well on your way to developer rock stardom.
Use the comments section to share your tips and tricks for using jQuery mobile.
— Robert Half Technology
With more than 100 locations worldwide, Robert Half Technology is a leading provider of technology professionals for initiatives ranging from web development and multiplatform systems integration to network security and technical support. Visit our website at www.rht.com.
No comments:
Post a Comment