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

Where does Google get it's live traffic data from?

Referring to a post that I wrote earlier, Google’s - Live traffic Layer , ever wondered how Google collected this data? I was wondering the other day, how Google received live data to display it on their maps as a layer! I looked up the web and found something very interesting and am sharing the same with you all. As we all know, the traffic layer is available most accurately in several states in USA. Most major metro areas in the US have sensors embedded in their highways. These sensors track real time traffic data. Easy to miss at high speeds (hopefully anyway, traffic permitting), more commonly noticed may be the similar sensors that often exist at many busy intersections that help the traffic lights most efficiently let the most amount of people through. The information from these tracking sensors is reported back to the Department of Transportation (DOT). The DOT uses this data to update some of the digital signs that report traffic conditions in many metro areas. They als...
17 comments
Read more

Google Map's Real-Time Traffic Layer...

    You can now check the traffic condition on the road before you leave for work, or a party or to your friend's place. Google's Traffic layer shows the traffic conditions in your area - LIVE!!! Live traffic data is available in major cities in the United States, France, Britain, Canada and Australia, with new cities and countries frequently added. The Google Maps API allows you to add real-time traffic information (where supported) to your maps using the TrafficLayer object. Traffic information is provided for the time at which the request is made. Consult this spreadsheet to determine traffic coverage support.     Let us now have a look at the Google Maps API - Trafiic Layer example. Copy the following code in a simple text file and save it as html. Click on this html file and it will open in your default browser. You will then see the traffic conditions in your area - LIVE...     The output of the above code looks as seen in the r...
4 comments
Read more

Why this difference?

       Several of you must have observed this like I did, that the Google geocoder returns different results on the Google Maps website and Google Maps API v3 for the same address string. To understand why this difference exists, I dug deeper into the web and came up with the following.        The first and foremost place to look for an answer was the Google Maps API FAQ section. The FAQ section did not let me down of course! The FAQ section says: The API geocoder and Google Maps geocoder sometimes use different data sets (depending on the country). The API geocoder occasionally gets updated with new data, so you can expect to see results changing or improving over time.         What I concluded from the above is that, in a lot of cases Google licenses data from other companies like DigitalGlobe, Infoterra Ltd & Bluesky, GeoEye, Getmapping plc, Tele Atlas, etc. When negotiat...
3 comments
Read more

Web based GIS for polling booths in West Bengal...

         The election commission of India will install web-based GIS in West Bengal's polling booths to help the State Chief Electoral Officer track them on their web site. The system will provide a map showing the exact spatial location of all 51919 polling booths and nearby landmarks, with their latitudinal and longitudinal coordinates. Boundaries of the parliamentary and assembly constituencies of the booths, along with all the administrative boundaries will also be provided in the GIS-based map.          The software will give a 360-degree view of the entire area falling within the 200-meter radius of each polling booth, including approach roads and nearby installations. It will show every detail of the polling station, such as the number of voters, number of polling and security personnel deployed, details about the current law and order situation and reports of past violence or disturbance in the are...
Post a 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