Posts

Showing posts from April, 2013

Jquery Mobile Form - Text inputs

Image
In this post on "form text input's" styling and usage using Jquery Mobile we will cover various input types and textarea styling using JQM. We will also cover the various attributes that can be used with the input types. Text inputs and textareas are coded with standard HTML elements, then enhanced by Jquery Mobile to make them more attractive and useable on a mobile device.

    The text input elements are available in 2 flavors/sizes - regular and mini. Following is a standard HTML syntax for an input element.


    Adding a data attribute data-mini="true" to the input tag renders a smaller sized input element. Let's take a look at the code sample below to understand the working in a better way.

    Apart from the regular input type, to accept multi-line input, use the textarea element. The advantage of using textarea in Jquery Mobile is that, the framework auto grows the height of the textarea, avoiding the need for the content in the textarea to be sc…

Default keyboards for HTML5 input types

Image
Following is the list of default keyboards that are displayed for the various HTML5 input types. These screenshots have been taken on the Android and iOs devices.

Input type="color"







Input type="date"





Input type="datetime"




Input type="datetime-local"






Input type="email"







Input type="month"







Input type="number"







Input type="number+pattern"



Input type="password"



Input type="tel"



Input type="time"



Input type="url"



Input type="week"




Jquery Mobile - Introduction to form elements

Image
Jquery Mobile framework provides a complete set of finger-friendly form elements that are based on native HTML form elements. In the posts that will follow, we will take a look at the various form elements and the various properties that we can apply to these form elements.


   We will be taking a look at all the form elements like input types, textareas, slider control, toggle switch, radio buttons, checkboxes and select menus. We will also be covering how to use the mini versions of each of these input elements, how to disable them, how to initialize them and how to use the refresh method on the form elements.

    Hope you all enjoy the series on form elements like you loved the series on Jquery Mobile listview. Do drop a comment to let me know what you would want from this series and I would be happy to include those points. Share the word! Happy coding!



Jquery Mobile Listview enhancements and customization

In this post today, we will take a look at the various enhancements and customization that we can do to the standard listviews. All these enhancements or customization are questions asked by various people on the Jquery Mobile forum. I have tried to put together a solution to some of them.

    Let's take a look at a few of them. Some questions are really amazing like "When i have 3 nested listview structure and moved to 3rd nested, how to move back to second nested listview?" Now this is a really good question and a nice valid requirement too. When we had see an example on nested listviews you must have wondered how we would navigate to the previous levels from the current level. Well here is a solution that I had put together.

    Another really nice question was "Listview with collapsable listview inside". This is really a good example to try out. Take a look at the solution that was proposed and also taken from other jsfiddles. There is this another enh…

Jquery Mobile accordions - Collapsible listviews

"How do I add a collapsible list to my Jquery Mobile application?" If this is the question that's bothering you, then JQM has a solution to this and a pretty simple one. You can style the listviews as collapsibles very easily and you can have individual collapsible lists or a set of collapsible lists (accordions). We will take a look at how we can achieve both of these.
    Let us begin with the individual collapsible listviews. You can achieve a collapsible by merely adding a div with data-attribute data-role="collapsible". This will style the div as a collapsible block with a default "plus" icon positioned to the left end of the list. To add a heading to the collapsible list add a heading tag (h1-h6) and you will have a left-aligned title for your collapsible header. After you have added the header, you can now have any content that you wish to include in the collapsible.
    Let's take a look at the example below to better understand the c…

Jquery Mobile listview with custom icon

This is the last post in the series of Jquery Mobile listviews before we move on to Jquery Mobile accordions (collapsibles) and then a series on form elements in Jquery Mobile. Today we will see how to add a custom made, third-party icon in listview instead of the standard icons provided by Jquery mobile.

    Wondering how to customize a list view, or adding a custom icon to a listview. Well there are 2 ways in which you can do this and we will see both.

    The easy way #1:
    Jquery Mobile provides the developers with creating a custom icon class something like a .ui-icon-custom and then adding data attribute data-icon="custom" to the list item. Let us take a look at the example that follows. This example would make things all the more clear.



The difficult way #2 (My personal favourite):
    Now adding a custom icon to listview done in this way would help you explore how Jquery Mobile works or resolve some issues like "How to change the default "X" icon …

Jquery Mobile - Theming listview icons

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 find any errors with thi…

Jquery Mobile - Listview with thumbnail images

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 look at the example that follows.

    Check out the CSS as it is th…

Jquery Mobile - Listview with icon images

We have seen a number of examples on Jquery Mobile's listview and in continuation to the series of these examples, we will take a look at how we can add an icon to a listview. This icon will be positioned to the extreme left of the listview as we have the regular right arrow icon on the right of the listview.

    Adding an icon to the left of the text in a list item is pretty simple. Just add an image tag inside of the list item as the first child and add class ui-li-icon to this image element. The image would scale to a 16x16 pixel icon and positioned to the left of the list item text.

    Let's take a look at the example below to understand how this is actually implemented.



    Hope you have followed the example above. Drop a line in case you need further explanation on this or have any doubts. I would be more than happy to help!

Jquery Mobile - Text formatted listview

"The regular listview looks plain. I want to add a few other details in my list item." Have you also faced this requirement from your client? Well, for those who have and also for those who haven't yet, you can keep in mind that you can create a text formatted listview using JQM and design accordingly for your next project.

    Let's take a look at the following example to understand how text-formatting can be achieved seamlessly.



    As you can see in the HTML code above, to add text hierarchy, you need to use headings to increase font emphasis and use paragraphs to reduce the font emphasis.Supplemental information like "Last update: April 9, 2013" can be added to the right of each list item by wrapping content in an element like 'div' or 'p' with a of class ui-li-aside.

    Now let's take a look at the CSS part. You will notice that I have included some CSS on id "no-ellipsis". If you have noticed, in the first list item,…

Jquery Mobile - Listview with count bubbles

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.


Jquery Mobile - Filtering the Listview

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 attribute "data-filter-placeh…

Jquery Mobile - List dividers

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!

Captain Kidd's treasure unveiled on Google Maps

Image
Another April Fools prank by our very own Google Maps Team. Unlike last time, when they created a 8-bit nintendo version of the Google Map, this time it was a visit to the history with a treasure map overlayed on the Google Maps. Google posted on it's Google Lat Long blog that the Google Street View team that was on an expedition in the Indian Ocean, recovered one of history's long lost relic - the treasure map of the infamous pirate Captain "William" Kidd.


Captain Kidd was rumored to have buried his treasure around the world, and tales of a long-lost treasure map have lingered for generations. Google further blogged that, since the map was confirmed to be authentic and since it contained a lot of encrypted symbols, they had digitized the and made it accessible to everyone, so that all can help in finding the long lost treasure.

The treasure mode - accessible in the top right-hand corner of the Google Maps window - includes a telescope-style Street View function, …

Jquery Mobile - Split button listview

Today we will be taking a look at a listview example where we can include 2 clickable items instead of the usual 1 clickable item. In all the listview examples that we have seen till date, we have had only 1 clickable item per list, i.e. only 1 anchor tag included within the li tag. We will now take a look at an example where we will see, how to add 2 clickable items in the same list.

    In case where there are more than 1 possible action per list item, a split button can be used to offer two independently clickable items - the list item and a small icon in the far right. To make a split list item, we simple need to include a second link inside the li tag and JQM framework will do the rest for you. It will add a vertical divider line, style the link as an icon-only button and set the title attribute of the link to the text of the link for accessibility as you can see in the result section in the jsFiddle below.



    You can set the icon on the extreme right by specifying the data…