Category: Form Elements and Buttons

Buttons, like all jQuery Mobile components, will inherit the theme from their parent container. Furthermore, when you need to style buttons with different colors you can apply the theme of your choice to any button with the addition of the data-theme attribute (see Listing 4–9). Listing 4–9. Theming buttons (ch2/action-sheet2.html)<a href=”#home” data-role=”button” data-theme=”b”>YouTube</a><a href=”#home” data-role=”button” data-theme=”b”>Facebook</a><a href=”#home” data-role=”button” data-theme=”b”>Email</a><a href=”#home” data-role=”button” data-theme=”c”>Cancel</a> For…

Thus far, every button example shown had each button segregated from the others. However, if you want to group your buttons together, you can wrap your buttons within a control group. For example, our segmented control examples in Chapter 3 were grouped this way (see Figure 4–8). Figure 4–8. Grouping Buttons To get this effect, wrap a group of…

Remember when we added custom Glyphish icons to our tab bar back in Figure 3-13? We can integrate buttons with custom icons in the same manner (see Figure 4–7). Figure 4–7. Custom icons However, with buttons we can apply a more simplified solution as shown in Listing 4–7. Two steps are necessary to add custom icons to your buttons:…

By default, icons will be left-aligned (see Figure 4–6). However, you may explicitly align icons to any side by adding the data-iconpos attribute to the button with its value corresponding to the side of alignment (see Listing 4–6). Figure 4–6. Icon positioning

Icon-only buttons are commonly used within headers, toolbars, and tab bars because they consume very little real estate (see Figure 4–5). Figure 4–5. Icon-only buttons In the last chapter we saw several examples of icon-only buttons. We initially saw a “plus” icon in Figure 3-4 that allowed users to tap the “add” icon to create a new movie review. We also…

Styling images as buttons requires minimal effort on your part. When wrapping an image with an anchor tag, no modifications are necessary (see Figure 4–3 and its related code in Listing 4–3). However, when attaching an image to an input element you will need to add the data-role=”none” attribute. Figure 4–3. Image buttons Listing 4–3. Image buttons (ch4/image-buttons.html)<!– Image buttons –><input type=”image”…

Form-based buttons (see Listing 4–2) are actually easier to style than link-based buttons because no modifications are required on your part. For simplicity, the framework automatically converts any button or input element into a mobile-styled button for you (see Figure 4–2). Figure 4–2. Form buttons TIP If you want to disable the automatic initialization of form buttons or any other control, you may…

Link buttons are the most commonly used type of button. Whenever you need to style an ordinary link as a button, add the data-role=”button” attribute to the link (see Figure 4–1). Figure 4–1. Link buttons By default, buttons within the content section of a page are styled as block-level elements so they will fill the entire width of their…

Buttons are the most commonly used control within mobile apps because they provide a very efficient user experience. We have already seen buttons used in many examples, including our dialogs, action sheets, segmented controls, and header. jQuery Mobile buttons come in many flavors. We have link buttons, form buttons, image buttons, icon-only buttons, and buttons…