The UI Dev

    We have been taking a look at several Jquery Mobile examples here and the the Jquery Mobile version that we were using was 1.2.0. The next stable version was 1.3.1 and included a few new features. I will be covering all the features of Jquery Mobile 1.3.1 in the presentation here and also other topics like: Design constraints that we need to consider while developing our next mobile website or application Different ways in which we can effectively debug our mobile website or web application from our desktop or using remote-debugging on the iOS and Android platforms.     Take a look at the presentation below and you can redirect any queries to me here or tweet me @shreerangp or drop me a line on G+  +Shreerang Patwardhan . Hope you enjoy the presentation and also all the code samples that I have included as part of the presentation.     The next stable release for Jquery Mobile would be 1.4.x. Once the Jquery Mobile team makes a re...

    How about organizing your listview items? You can organize your listview items by adding the list dividers to have a well organized listview page. In the example that follows, let us take a look at how we can achieve this.     Like any other Jquery example this too can be achieved in a very simple and easy way. Just add the data-role="list-divider" to any list item that you want to specify as a list divider. Adding data-role="list-divider" will style that list item as a blue bar - blue being the default swatch theme. In the example that follows, we have 3 list divider list items (li) which are - "Interesting Articles", "Google Maps API" and "Jquery Mobile"     Hope you have followed the example above. We still have got a few more listview examples in the pipeline before we take the next step in Jquery Mobile framework. In case you have any doubts or have not followed the example, drop a comment and I will be happy to help! ...

    Jquery Mobile Listview is probably the most popular component used in a lot of mobile web applications. The listview that is generally used is a ul-li structure. But Jquery Mobile allows the usage of the ol-li structure as well. The ol-li HTML structure will give the user a numbered listview. We will take a look at the following example to understand, how the numbered listview works.     As you can see in the result above, every list gets a number before the the list title. The numbered listview is useful when presenting items that are in a sequence like search results or a movie queue.     Hope you have followed this short tutorial and hope it helps you in your web application. In case, you have any doubt, comment or you come across any error, fell free to leave a comment and I will be happy to take a look at it. You can see a full list of Jquery Mobile examples here .

    The Jquery Mobile listview is nothing but a ul-li HTML structure styled to appear as a list on a web browser. The plain ul-li structure can be modified to create the nested listview structure. Take a look at the example below, to understand the nested listview structure of Jquery Mobile.      By nesting child  ul  or  ol  inside list items, you can create nested lists. When a list item with a child list is clicked, the Jquery Mobile framework will show a new page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation.     Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework. Note that the page of each nested listview is created when the parent page loads and for each nested page the ...

    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 pag...

    Jquery Mobile - The next level of "Write Less, Do More" mantra of Jquery. Just recently, I started working on a project using the Jquery Mobile framework and just instantly fell in love with it! Jquery Mobile gives immense power and flexibility to developers and enables truly cross-platform and cross-browser and multi-device development. I have just loved it and have decided to share my knowledge with the readers of Spatial Unlimited .     Jquery Mobile is a touch optimized web framework for smartphones and tablets.  It's a  unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. This is one reason why I love Jquery Mobile. It is easily customizable - no head-ace of themeing; Jquery Mobile does it for you.     Instead of wri...