How to write jquery for mobile view?
- Custom Download − Click this button to download a customized version of library.
- Latest Stable − Click this button to get the stable and latest version of jQuery mobile library.
To get started, you can simply paste the template below in your favorite text editor, save, and open the document in a browser.
In the
of this template, a meta viewport tag sets the screen width to the pixel width of the device. References to jQuery, jQuery Mobile, and the mobile theme stylesheet from the CDN add all the styles and scripts. jQuery Mobile 1.4 works with versions of jQuery core 1.8 and newer.In the
, a div with a data-role of page is the wrapper used to delineate a page. A header bar (data-role="header"), a content region (role="main" class="ui-content") and a footer bar (data-role="footer") are added inside to create a basic page (all three are optional). These data- attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.The next step is to add content inside the content container. Any standard HTML elements – headings, lists, paragraphs, etc. can be added. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the
after the jQuery Mobile stylesheet.jQuery Mobile includes a diverse set of common listviews that are coded as lists with a data-role="listview" added. Here is a simple linked list that has a role of listview. The data-inset="true" attribute makes the listview look like an inset module, while data-filter="true" adds a dynamic search filter.
The framework contains a full set of form elements that are automatically enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no data-role needed. All form elements must always be properly associated with a
There are a few ways to make buttons. A common one is to turn a link into a button so it's easy to click. Just start with a link and add a data-role="button" attribute to it. You can add an icon with the data-icon attribute and optionally set its position with the data-iconpos attribute.
jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content, and button colors, called a "swatch". You can add a data-theme="b" attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it a dark shade of grey. Different swatch letters from a-b in the default theme can be used to mix and match swatches.
If you add the theme swatch to the page, all the widgets inside the content will automatically inherit the theme.
If you would like to create a custom theme, you can use ThemeRoller that allows users to create their own theme through an easy to use drag and drop interface. You will then be able to download and use your newly created theme.
This guide has provided you with a basic structure for a jQuery Mobile page and a few enhanced elements. You can explore the full jQuery Mobile API Documentation and jQuery Mobile Demo Center to learn about linking pages, adding animated page transitions, and creating dialogs and popups.
In this chapter, we will discuss how to install and set up jQuery Mobile.
When you open the link jquerymobile.com/, you will see there are two options to download jQuery mobile library.
Using Download Builder, you can create a custom build including only the portions of the library that you need. When you download this new customized version of jQuery Mobile, you will see the following screen.
You can select the libraries according to your need and click the Build My Download button.
Click the Stable button, which leads directly to a ZIP file containing the CSS and JQuery files, for the latest version of jQuery mobile library. Extract the ZIP file contents to a jQuery mobile directory.
This version contains all files including all dependencies, a large collection of demos, and even the library's unit test suite. This version is helpful to getting started.
A CDN (Content Delivery Network) is a network of servers designed to serve files to the users. If you use a CDN link in your webpage, it moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if a visitor to your webpage has already downloaded a copy of jQuery mobile from the same CDN, it won't have to be re-downloaded. You can include the following CDN files into the HTML document.
Following is a simple example of jQuery Mobile.
Details of the above code are −
Let's carry out the following steps to see how the above code works −
