Continuing with the Jquery Mobile Examples, today we will take a look at the listviews in Jquery Mobile. Listviews are popularly used in websites and web-applications that are built on the Jquery Mobile platform and hence we will look at the various list patterns available with Jquery Mobile. Lists are used for a various purposes like data display, navigation, result lists and data entry. We will start with the most basic listview example and look through several examples over a number of posts.
A listview is simply an unordered list containing linked list items with a
Let's take a look at the example that follows:
The jQuery Mobile listview appears as seen in the result section in the example above. As you can see in the result, the list stretches to 100% width with straight corners and sharp edges. If you need to get the rounded corners to your lists you need to include the
Hope you have followed the post and do let me know in case you need to know anything more on this article. Your critics and suggestions are always welcome. Just drop a comment!
UPDATE: The following example makes use of the next stable version of Jquery Mobile 1.3.1
A listview is simply an unordered list containing linked list items with a
data-role="listview" attribute. jQuery Mobile will apply all the necessary styles to transform the list
into a mobile-friendly listview with right arrow indicator that fills
the full width of the browser window. When you tap on the list item, the
framework will trigger a click on the first link inside the list item,
issue an Ajax request for the URL in the link, create the new page in
the DOM, then kick off a page transition.Let's take a look at the example that follows:
The jQuery Mobile listview appears as seen in the result section in the example above. As you can see in the result, the list stretches to 100% width with straight corners and sharp edges. If you need to get the rounded corners to your lists you need to include the
data-inset="true" property on the unordered-list. We will take a look at this in the post here which discusses the jQuery Mobile list view with data-inset property.Hope you have followed the post and do let me know in case you need to know anything more on this article. Your critics and suggestions are always welcome. Just drop a comment!
UPDATE: The following example makes use of the next stable version of Jquery Mobile 1.3.1
Comments
Post a Comment
Please leave your comments here...