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

    After exploring all the standard listview types in the series of examples on listview, you must have observed that for a linked list, Jquery Mobile displays a standard "arrow-r" icon to the extreme right of the list. However, you don't want the standard "arrow-r" icon and you need some custom icon there.     Jquery Mobile provides a set of icons that can be used along with listviews in place of the standard "arrow-r" icon. To override the standard icon, set the data-icon attribute on the desired list item to the name of a standard icon. We will see a complete list of icons in the following example.     However, before proceeding to the example, let us also consider a case where we do not wish to have any icon on the list item. This too can be achieved by setting the value of data-icon attribute to false. We will also include this in our example that follows.     Hope you have followed this post. Do drop a line in case you fi...

    In the earlier post we took a look at how we can add an icon to the listview. In the example that follows, we will be taking a look at how to add a thumbnail to the list item. The process of adding a thumbnail is pretty much similar to adding an icon to a list item.      Just add an image tag inside of the list item as the first child. The image would scale to a 80x80 pixel square image and positioned to the left of the list item text.     Lets take a look at the example below to understand exactly how this is done.     The above example is how Jquery Mobile displays thumbnails. But clients or the web designers never design what can be developed easily and so even I thought of having a variation for this example. How about adding responsive images as thumbnails? Images that will scale with the increase in width of a mobile device. I have set up a fiddle that we help us understand how this can be achieved. Let's take a loo...

    Today we will take a look at how to add count bubble for a list item. Jquery Mobile includes text formatting conventions for a list item with count bubble. The count bubble appears at the right end of the list item just before the right arrow icon, if it is a linked list item.     Like any other feature in JQM, adding the count bubble is a pretty simple task. Wrap the value that you want to display in the count bubble, in an HTML element like div and add the class ui-li-count to it. Doing this will add a count bubble to your list item. Take a look at the example below which will help you understand the implementation better.     Hope you have followed this example and have grasped the implementation. Drop a comment in case you have any doubt and need something to be explained better in this post. In case you want to check more jquery mobile examples you can find a complete list of code samples here .

    So you have a very long list of items and you want to provide the users with a searching facility. There is nothing to worry here. Jquery Mobile provides a very simple solution to a very difficult and time-comsuming looking problem.   jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the  data-filter="true"  attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...".     Now again, this is not going to satisfy the client. The client will not like the default search and will ask for  customization . No problem again. We can do it very easily again by virtue of the Jquery Mobile framework.   To configure the placeholder text in the search input,  use the data ...

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

    The Jquery Mobile Listview that is used generally used to link each list item to a new page in the application or to link that list item to another list. However, it is not always necessary to have a linked list. Sometime we need to display a list that does not have to be linked to anything else.     Using Jquery Mobile, we can have non-interactive, read-only listviews in our web pages. This list can be generated using the ordered or un-ordered lists that don't have any linked items, i.e. we basically do not include any anchor tags within our list item tags. This will render the listview as a non-interactive, read-only listview.     Take a look at the JsFiddle below. The code and the actual result will give you a better picture of how you can implement the non-interactive, read-only listviews.     Hope you find this example useful. Please drop a comment if you face any problems or have any queries. I would be happy to help and learn m...

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

    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; }   ...

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