Posts

Showing posts from February, 2013

Jquery Mobile - Customizing the listview

In the examples on Basic Listviews that we have seen in the previous posts, you must have observed that the listview is sticking to the top of the screen. You will probably not have only the listview in your web application, but anyways you will have some divs before the listview and the listview will stick to the bottom of the div above it. Many a times, you would like to have some blank space between the div before the listview and the actual listview and this is the time when you would start over-riding the default Jquery Mobile CSS.

    The example that we will be seeing today is a very basic example of using custom CSS to override the default JQuery Mobile CSS to suite our own web application or website.



    As you can see in the result above, the listview has some margins around it. If you take a look at the CSS for this example, you will notice the following CSS.

.ui-listview{
    margin: 30px 70px 0 !important;
}

    As you can see, we have used !important to override the…

Jquery Mobile - Listview with data-inset property

In the previous post we looked at a basic example of the jQuery Mobile listview. The listview in jQuery Mobile stretches 100% of the width with sharp edges and straight corners. If you wish to have rounded corners for your lists you need to make use of the data-inset="true" property.

    Lets take a look at the example below. The lists as seen in the result below have rounded corners as opposed to the straight edges in the example in the previous post, where we had not made use of the data-inset property. When we say that we did not use the data-inset property, we mean that the value of data-inset property is "false".



UPDATE: The following example makes use of the next stable version of Jquery Mobile 1.3.1



    Hope you have followed the post. Do let me know your feedback on the same and drop your commenets below.

Jquery Mobile - Basic Listview

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 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, t…