Jump to content

How to style buttons with jQuery Mobile

+ 2
  chco's Photo
Posted Jun 28 2011 04:48 AM

The future belongs to mobile web apps that function on a broad range of smartphones and tablets. The excerpt below from jQuery Mobile helps you get started with jQuery Mobile, the touch-optimized web framework for creating apps that look and behave consistently across many devices.
jQuery Mobile will automatically create stylized buttons out of regular form buttons, whether they be created with the input tag or the button tag. jQuery Mobile can also create buttons out of simple anchor links, by applying the data-role="button" to them.

By default, buttons will stretch to fit the width of their containing element. By applying the data-inline="true" attribute to a button, you can create inline buttons that are only as big as their content requires (Example 1, Figure 1).

Example 1. Button, button, who’s got the button?

<section id="page1" data-role="page">
  <header data-role="header"><h1>jQuery Mobile</h1></header>
  <div class="content" data-role="content">
    <h3>Buttons</h3>
    <a href="#" data-role="button">Link-based button</a>
    <input type="submit" value="submit" data-inline="true">
    <input type="reset" value="reset" data-inline="true">
  </div>
  </div>
  <footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>


Figure 1. Button, button, who’s got the button?
Attached Image

Warning: As of this writing, the jQuery Mobile documentation states that by applying the data-inline="true" attribute to a containing element, all buttons contained therein will be rendered inline. This is not working. The data-inline="true" attribute must be applied to each individual button. I expect this bug will be fixed by release 1.0.

Button Control Groups

Buttons can also be grouped together in control groups, creating a group of buttons on one bar. Just wrap the buttons in a containing element and apply the data-role= "controlgroup" to that container.

By default, these control groups form a vertical list, but if you apply the data-type= "horizontal" attribute to the container (as I have done in Example 2), the buttons will be rendered inline (as illustrated in Figure 2).

Example 2. Button control groups

<section id="page1" data-role="page">
  <header data-role="header"><h1>jQuery Mobile</h1></header>
  <div class="content" data-role="content">
    <h3>Control Group Buttons</h3>
    <div data-role="controlgroup">
      <a href="#" data-role="button">Yes</a>
      <a href="#" data-role="button">No</a>
      <a href="#" data-role="button">Cancel</a>
    </div>
    <div data-role="controlgroup" data-type="horizontal">
      <a href="#" data-role="button">Yes</a>
      <a href="#" data-role="button">No</a>
      <a href="#" data-role="button">Cancel</a>
    </div>
  </div>
  </div>
  <footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>


Figure 2. Button control groups
Attached Image

Control group buttons do not have the same functionality as radio buttons. More than one button in a control group can be active at a time.

Button Icons

Often you will need icons in your buttons, and jQuery Mobile comes with a variety of icons. You can also control the position of the icon.

To specify the icon of a button, apply the data-icon attribute. The data-icon attribute has the following valid values.

Valid data-icon values

ValueIcon
alertAttached Image
arrow-dAttached Image
arrow-lAttached Image
arrow-r Attached Image
arrow-u Attached Image
back Attached Image
check Attached Image
delete Attached Image
forward Attached Image
gear Attached Image
grid Attached Image
home Attached Image
info Attached Image
minus Attached Image
plus Attached Image
refresh Attached Image
search Attached Image
star Attached Image


You can specify the position of the icon using the data-iconpos attribute. Valid values are shown in the table below.

Valid data-iconpos values

Value Result
bottom Below the text, centered
left Left side of button
notext Hides the text, displaying only the icon
right Right side of button
top Above text, centered


The example below shows the code for adding some of these button icons, and the result is shown in Figure 3.

Example 3. Button icons

<section id="page1" data-role="page">
  <header data-role="header"><h1>jQuery Mobile</h1></header>
  <div class="content" data-role="content">
    <h3>Button Icons</h3>
    <div data-role="controlgroup" data-type="horizontal" data-inline="true">
      <a href="#" data-role="button" data-icon="home" data-iconpos="left">Home</a>
      <a href="#" data-role="button" data-icon="gear"
         data-iconpos="left">Configure</a>
      <a href="#" data-role="button" data-icon="search"
         data-iconpos="left">Search</a>
    </div>
  </div>
  </div>
  <footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>


Figure 3. Button icons
Attached Image

Custom Icons

Though jQuery Mobile comes with its own icons, you can easily implement your own icons using CSS and a custom data-icon attribute. If you specify a value for data-icon that is not one of the valid values, jQuery Mobile will still create the button but will apply to it a custom CSS class that will consist of the value for data-icon prepended by ui-icon-. For example, if you specified data-icon="flagicons-french" then jQuery Mobile would generate the button and create within it a span tag with the CSS class ui-icon-flagicons-french.

jQuery Mobile’s button icon classes are all designed around icons that are 18 × 18 pixels square. If you will be using jQuery Mobile’s theming system, you should probably save your icons in PNG format with alpha transparency.

jQuery Mobile

Learn more about this topic from jQuery Mobile.

The future belongs to mobile web apps that function on a broad range of smartphones and tablets. Get started with jQuery Mobile, the touch-optimized web framework for creating apps that look and behave consistently across many devices. This concise book provides HTML5, CSS3, and Javascript code examples, screen shots, and step-by-step guidance to help you build a complete working app with jQuery Mobile.

See what you'll learn


Tags:
1 Subscribe


3 Replies

0
  appcropolis's Photo
Posted Jul 21 2012 09:26 PM

Basic customization of the jQuery Mobile buttons can be easily accomplished using the Themeroller. Amongst other settings, this WYSIWYG online helps you control colors, shadows, and fonts. If you are new to jQuery Mobile this is probably the best place to start customizing your mobile application.


Posted Image


Depending on what you are trying to accomplish you may have to do more advanced customization and perhaps alter CSS class directly.


Modifying the icon

You can add a custom icon by specifying the attribute data-icon="name-of-your-icon". The framework will automatically add a CSS class to the span tag that renders the icon images. If your icon is called "email", your HTML code should contain the attribute data-icon="email" and you should expect the framework to add a CSS class called ui-icon-email which you can use to target the span tag responsible for rendering the icon:

HTML code:
<a data-role="button" data-icon="email">Email</a>


CSS code:
.ui-icon-mail {
    background-image: url('email.png');
}


One thing to keep in mind is that the default size of the icon is 18x18 pixels. If you wish to use a different size you will have to reset other CSS rules:

/* email icon 24x24 pixels */
.ui-icon-email {
    background-image: url('email.png');
    background-color: none;
    border: none;
    box-shadow: none;
    width: 24px;
    height: 24px;
    margin-top: -11px !important; /* adjust vertical position (top value is set to 50%) */
}



Adding a Custom Theme

Another good way to customize a jQuery Mobile button is adding a custom theme.

<a data-role="button" data-theme="my-site">Button</a>


That will give you more control over the different elements and states of the button. For instance, you can target different states of the button in CSS by writing the code for the class associated with your custom theme name (they are automatically added to the button):

.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }


Keep in mind that the default buttons are made out of borders, shadows, and of course the background gradient. In addition to this, there are other HTML elements inside the button that are automatically generated by the framework. Depending on what exactly you want to customize you might need to target other classes within the button (i.e. ui-icon, ui-btn-text, ui-btn-inner, etc).

Here is a tutorial that explains how to do advanced customization of the jQuery Mobile buttons. The articles shows how to do some basic customization, how to reset the jQuery Mobile theme, and how to turn the default button into anything you want:

Advanced Customization of the jQuery Mobile Buttons

The article covers subjects such as:

  • The structure of the jQuery Mobile Button
  • Simple customization
  • Adding a custom theme
  • Reset the button theme
  • Advanced element targeting
  • Adding elements using CSS
  • Adding elements using Javascript
  • Icon-only buttons
  • Targeting buttons by context



Resources


0
  David_Bergman's Photo
Posted Feb 20 2014 09:05 AM

Buttons are coded with HTML tags and input elements, then enhanced by jQuery Mobile, so that they can e looked attractive.

Styling links as buttons:
In the main content block of a page, you can style any anchor link as a button by adding the data-role="button" attribute. like:
<a href="index.html" data-role="button">Link button</a>
0
  JiriSri's Photo
Posted Mar 30 2014 07:16 AM

Press these buttons Very helpful I applied to my website. Made to use up a lot. I do not know about jQuery, but it can be done thanks.

External links :
http://www.ballpromotion.com/bodog/
http://www.ballpromotion.com/sbobet/
and
http://www.ballpromotion.com/188bet/