To visually group a set of buttons together to form a single block of buttons that look contained like a navigation component. To get this effect, wrap a set of buttons in a container with the data-role="controlgroup" attribute and the framework will create a vertical button group. This removes all margins and drop shadows between the buttons and only rounds the top and bottom buttons to get the effect that they are group together.
+<div data-role="controlgroup">
+<a href="index.html" data-role="button">Yes</a>
+<a href="index.html" data-role="button">No</a>
+<a href="index.html" data-role="button">Maybe</a>
+</div>
+By default, grouped buttons are presented as a vertical list:
+ -Vertical grouped buttons (default)
-By adding the data-type="horizontal" attribute to the control group container, you can swap this to a horizontal style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. Be aware that these will wrap to multiple lines if the button number of text length is to wide for the screen.
+
+
Horizontal grouped buttons
+ -Horizontal grouped buttons
+Horizontal grouped buttons with icons
Horizontal grouped buttons, icon only
diff --git a/docs/buttons/buttons-icons.html b/docs/buttons/buttons-icons.html index 94ae5488..10bef933 100755 --- a/docs/buttons/buttons-icons.html +++ b/docs/buttons/buttons-icons.html @@ -15,33 +15,74 @@There a core set of standard icons included in the framework. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and black colored sprites and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.
+ + + +No icon
- My button -Left icon (default) - data-iconpos="left"
- My button -Right icon - data-iconpos="right"
- My button -Icon only - data-iconpos="notext"
- My button +Icons can be added to buttons by adding a data-icon attribute on the anchor to specify the icon to display.
+ <a href="index.html" data-role="button" data-icon="delete">Delete</a>
+
+
+ Creates this button with an icon:
+ Delete + +This is a reference for the icon names you can specify in the data-icon attribute.
Left arrow - data-icon="arrow-u"
+ My button +Right arrow - data-icon="arrow-d"
+ My button +Up arrow - data-icon="arrow-u"
+ My button +Down arrow - data-icon="arrow-d"
+ My button +Delete - data-icon="delete"
+ My button +Plus - data-icon="plus"
+ My button +Minus - data-icon="minus"
+ My button -Left arrow - data-icon="arrow-u"
- My button -Right arrow - data-icon="arrow-d"
- My button -Up arrow - data-icon="arrow-u"
- My button -Down arrow - data-icon="arrow-d"
- My button -Delete - data-icon="delete"
- My button -Plus - data-icon="plus"
- My button -Minus - data-icon="minus"
- My button + +
+<a href="index.html" data-role="button" data-icon="delete">Delete</a>
+
+
+Creates this button with an icon:
+Delete + +By default, icons in buttons are added to the left of the text, but the data-iconpos attribute specifies the icon position: left or right of the text.
+<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
+
+
+Creates this button with right-aligned icon:
+Delete + +To create an icon-only button that has an icon but no text, set the data-iconpos attribute to notext and the button plugin will hide the text and add it as a title attribute on the link to provide context for screen readers and devices that support tooltips. In this example, we're adding a plus (+) icon and positioning it to the right of the text with our data- attributes on the link.
+<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
+
+
+Creates this icon-only button:
+Delete + + +To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.
If you have multiple buttons that should sit side-by-side on the same line instead of stacked like the default buttons, wrap the buttons in a container that has a data-inline="true" attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.
+<div data-inline="true">
+ <a href="index.html" data-role="button">Cancel</a>
+ <a href="index.html" data-role="button">Save</a>
+</div>
+Inline buttons
Cancel Save - -Inline toolbar buttons
- +If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the content column grids to put normal full-width buttons into 2- or 3-columns.
+In the main content block of a page, you can style any link as a button by adding the data-role="button" to the link. The framework will add the necessary classes to style the link as a button.
+<a href="index.html" data-role="button">Link button</a>
+
+
+ Link based button example:
+ Link button -Link based button
- Link element - +A button element or an input with a type of submit, reset, button, or image will all be automatically transformed into a custom styled button, no need to add the data-role="button" attribute.
Because it's not possible to consistently form buttons consistently across platforms, the framework actually generates a new link-based button for each form button button and hides the original. When a click event fires on a link button, it triggers a click on the original form button.
+ +Button based button
diff --git a/docs/buttons/docs-buttons.html b/docs/buttons/docs-buttons.html index 6cebf1b9..82146009 100755 --- a/docs/buttons/docs-buttons.html +++ b/docs/buttons/docs-buttons.html @@ -67,10 +67,12 @@If you have multiple buttons that should sit side-by-side on the same line instead of stacked like the default buttons, wrap the buttons in a container that has a data-inline="true" attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.
+<div data-inline="true">
+ <a href="index.html" data-role="button">Cancel</a>
+ <a href="index.html" data-role="button">Save</a>
+</div>
+Buttons are one of the core widgets in jQuery Mobile and are used within a wide range of other plugins.
- - -