Skip to main content

Jquery Mobile Buttons

    Buttons - an integral part of a form is styled really well and consistently using the Jquery Mobile framework. We will discuss and take a look at the different buttons, their styling and usage in today's post. Buttons are coded with standard HTML anchor and input elements, then enhanced by Jquery Mobile to make them more attractive and touch friendly for mobile usage. Let's discuss this and more in the example that follows.



    You must have already observed that the styling for the first 5 buttons is the same, even though the HTML markup for each is different. The first one is created using an anchor tag. The next one using a button element and further using input elements of type button, submit and reset. To create a button out of the anchor element, you need to include a data attribute data-role="button" with the anchor element. The framework now styles the anchor element as a button. Now the question arises as to when to use a anchor based button and when to use the input element based button. The answer is pretty simple here - if you are using a button for navigation purpose, use an anchor link based button and if you want one for form submission use the input elements. Adding data-mini="true" will render a smaller sized button as seen in the example by the black colored button.

    In several scenarios we require the buttons to be inline or basically on the same line and not stretched to the full width of the device. This can be achieved very easily with the help of Jquery Mobile framework. Just add data-inline="true" attribute to the buttons that you want to be displayed inline and you will have the buttons on the same line.

    The Jquery Mobile framework includes a selected set of icons most often needed for mobile applications. An icon can be added to a button by adding data-icon attribute on the anchor specifying the icon to display. You can view a full list of icons that can be used here. You can also position the icon by adding data-iconpos attribute to the anchor element. By adding data-iconpos="notext" you can even create an icon-only button as seen in the example above.

    To create a group of images clubbed vertically or horizontally is also possible by wrapping the buttons with in a div with data-role="controlgroup". This will group the buttons vertically. In case you want to group the buttons horizontally, you just need to add data-type="horizontal" attribute to the div along with data-role="controlgroup". Just add the "disabled" HTML keyword to disable a button. A disabled button would be styled with grey color for the background and will not be clickable.

    This ends our discussion on button styles using Jquery Mobile. Drop a line to let me know if you have any queries or suggestions on this post. Check out a comprehensive list of examples that is now available here. Till next time keep enjoying JQM coding.

Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

Playing with the markers and info window bubbles...

    In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase!     So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life!     The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .
3 comments
Read more

Jugnu: India's first Nano Satellite

          IIT-Kanpur with its nano satellite 'Jugnu' has set new highs in the field of space research. A team of students, working under Dr NS Vyas (the visionary man behind the making of the nano-satellite) and other faculty members of the institute, have successfully made the country's first nano-satellite to be developed for the first time by any educational institute.           The development of the Jugnu started in the year 2008 with a team of 3 students. With time, the team has grown to the size of more than 50 students ranging from 1st year undergraduates to final year postgraduates and 14 professors from different disciplines to complete this challenging mission.            The satellite has been handed over to two ISRO scientists, DVA Raghav Murthy (Project Director, Small Satellite Projects) and Dr SK Shiv Kumar (Director, ISRO sat...
4 comments
Read more

Blue census, Water census...

          The Uttar Pradesh State Water and Sanitation Mission (SWSM) will soon be documenting the drinking water resources across six zones of the state. These zones are Allahabad, Ghaziabad, Gorakhpur, Lucknow, Varanasi and Moradabad. The documentation - to be done through Geographical Information System (GIS) and Global Positioning System (GPS) mapping - will take note of ponds (manmade and natural), wells and handpumps. This exercise which is a part of the National Rural Drinking Water Programme (NRDWP) will help the officials to create a proper database of these resources, which will be used for their management.          Through the mapping, all the details of all the resources will be compiled, complete with their longitude and latitude dimensions. The department plans to start off the exercise by April 1, 2011 and should end by March 31, 2012. The focus will initially be on villages where the ...
1 comment
Read more

Reverse Geocoding

    The term geocoding generally refers to translating a human-readable address into a location on the map. The process of doing the converse, translating a location on the map into a human-readable address, is known as reverse geocoding. You can read more about geocoding here .     The Geocoder in Google Maps API v3, supports reverse geocoding directly. While geocoding, we supply a textual address and that gets mapped as a location on the map. However, in reverse geocoding, instead of supplying the textual address, we will supply a comma- separated latitude- longitude pair and get a textual address as the result. You can have a look at the geocoding example here , before proceeding to the reverse geocoding example.     The reverse geocoder often returns more than one result. Geocoding "addresses" are not just postal addresses, but any way to geographically name a location. For example, when geocoding a point in the city of Agra, India,...
Post a Comment
Read more

Playing with the map controls

    "All work and no play, makes Jack a dull boy!". I also decided to play around with the Google Map APIs, so that we don't become dull! The following is a simple code which will show you how to control the map controls or basically the Google Map UI. So here goes the fun code...     I don't think the above code needs much of an explanation. I will tell you what happens as a result of this code! When you move your mouse over the map, the map controls will become visible, as seen in the result above!     When you will move your mouse out of the map, the Map Controls will disappear. The controls will reappear again once you move your mouse over the map and disappear again when you move your mouse out of the map! Keep going on, have fun...     Hope you enjoy the code. Feel free to drop your comments, doubts, queries, suggestions!
4 comments
Read more