11:29 a.m.
[
https://issues.jboss.org/browse/JBIDE-13778?page=com.atlassian.jira.plugi...
]
Daniel Azarov updated JBIDE-13778:
----------------------------------
Description:
We need to have palette elements descriptions and we need to show them in tooltips.
1. JS/CSS
Add references to *jQuery*, *jQuery Mobile* JS and CSS to <head>
*Syntax:*
{code}
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.cs... />
<script
src="http://code.jquery.com/jquery-1.9.1.min.js"></script...
<script
src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js&...
</head>
{code}
2. Page
The *page* is the primary unit of interaction in *jQuery Mobile* and is used to group
content into logical views that can be animated in and out of view with page transitions.
A *HTML* document may start with a single "page" and the *AJAX* navigation
system will load additional pages on demand into the *DOM* as users navigate around.
Alternatively, a *HTML* document can be built with multiple "pages" inside it
and the framework will transition between these local views with no need to request
content from the server.
*Syntax:*
{code}
<div data-role="page" id="page-1">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
{code}
3. Dialog
Any *page* can be presented as a modal dialog that appears to be suspended above the page
by adding an attribute to the link that leads to the dialog page.
*Syntax:*
{code}
<div data-role="dialog" id="dialog-1">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h6>Dialog content.</h6>
<a href="#dialog-1" data-role="button"
data-rel="back">OK</a>
</div>
</div>
{code}
4. Popup
To create a *popup*, add the *data-role="popup"* attribute to a div with the
popup contents. Then create a link with the href set to the id of the popup div, and add
the attribute *data-rel="popup"* to tell the framework to open the popup when
the link is tapped. A popup div has to be nested inside the same page as the link.
*Syntax:*
{code}
<a href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
{code}
5. Grid
*Grids* are 100% width, completely invisible (no borders or backgrounds) and don't
have padding or margins, so they shouldn't interfere with the styles of elements
placed inside them. Within the grid container, child elements are assigned
ui-block-a/b/c/d/e in a sequential manner which makes each "block" element float
side-by-side, forming the grid.
*Syntax:*
{code}
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
</div>
{code}
6. Field Container
To improve the styling of labels and form elements on wider screens, wrap a div or
fieldset with the *data-role="fieldcontain"* attribute around each label/form
element. This framework aligns the input and associated label side-by-side, and breaks to
stacked block-level elements below ~480px. The framework will also add a thin bottom
border to act as a field separator.
*Syntax:*
{code}
<div data-role="fieldcontain">
</div>
{code}
7. Panel
Flexible by design, *panels* can be used for navigation, forms, inspectors and more.
*Syntax:*
{code}
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->
{code}
8. Table
The *reflow table* mode works by collapsing the table columns into a stacked presentation
that looks like blocks of label/data pairs for each row.
*Syntax:*
{code}
<table data-role="table" id="my-table"
data-mode="reflow">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Item 1</td>
<td>Item 2</td>
</tr>
</tbody>
</table>
{code}
9. Collapsible
*Collapsibles* are simple widgets that allow you to expand or collapse content when tapped
and are useful in mobile to provide a compact presentation of content.
*Syntax:*
{code}
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
{code}
10. Collapsible Set
*Syntax:*
{code}
<div data-role="collapsible-set">
</div>
{code}
11. Header Bar
The *header* is a toolbar at the top of the page that usually contains the page title text
and optional buttons positioned to the left and/or right of the title for navigation or
actions.
*Syntax:*
{code}
<div data-role="header">
<a href="#" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="#" data-icon="check">Save</a>
</div>
{code}
12. Footer Bar
The *footer* is a toolbar at the bottom of the page that can contain a wide range of
content, from for elements to *navbars*.
*Syntax:*
{code}
<div data-role="footer" class="ui-bar">
<a href="#" data-icon="plus">Add</a>
<a href="#" data-icon="arrow-u">Up</a>
<a href="#" data-icon="arrow-d">Down</a>
</div>
{code}
13. Navbar
*jQuery Mobile* has a very basic *navbar* widget that is useful for providing up to 5
buttons with optional icons in a bar.
*Syntax:*
{code}
<div data-role="navbar">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</div>
{code}
14. Select
The *select menu* is based on a native select element, which is hidden from view and
replaced with a custom-styled select button. Tapping it opens the native menu.
*Syntax:*
{code}
<label for="select-choice-0" class="select">Shipping
method:</label>
<select name="select-choice-0" id="select-choice-0">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
{code}
15. Listview
A *listview* is coded as a simple *unordered list (ul)* or *ordered list (ol)* with a
*data-role="listview"* attribute and has a wide range of features.
*Syntax:*
{code}
<ul data-role="listview">
<li><a href="item1.html">Item 1</a></li>
<li><a href="item2.html">Item 2</a></li>
</ul>
{code}
16. Button
*Buttons* are core widgets in *jQuery Mobile* and are used within a wide range of other
plugins. The *button* markup is flexible and can be created from links or form buttons.
*Syntax:*
{code}
<a href="" data-role="button">Link button</a>
{code}
17. Buttons
*Controlgroups* are used to visually group a set of buttons to form a single block that
looks contained like a navigation component.
*Syntax:*
{code}
<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>
{code}
18. Link
*jQuery Mobile* is designed to work with standard page link conventions and layers the
AJAX navigation on top for maximum compatibility.
*Syntax:*
{code}
<a href="">Link</a>
{code}
19. Toggle
*Flip switches* are used for boolean style inputs like true/false or on/off in a compact
UI element.
*Syntax:*
{code}
<div data-role="fieldcontain">
<label for="flip-1">Switch:</label>
<select name="flip-1" id="flip-1"
data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
{code}
20. Radio
*Radio buttons* are used to provide a list of options where only a single option can be
selected.
*Syntax:*
{code}
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice"
id="radio-choice-1" value="choice-1" checked="checked"
/>
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice"
id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice"
id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
</fieldset>
{code}
21. Checkbox
*Checkboxes* are used to provide a list of options where more than one can be selected.
*Syntax:*
{code}
<label><input type="checkbox" name="checkbox-1"/>I
agree</label>
{code}
22. Checkboxes
To improve the styling of labels and form elements on wider screens, wrap a div or
fieldset with the *data-role="fieldcontain"* attribute around each label/form
element. This framework aligns the input and associated label side-by-side, and breaks to
stacked block-level elements below ~480px. The framework will also add a thin bottom
border to act as a field separator.
*Syntax:*
{code}
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a"
id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a"
id="checkbox-2a" class="custom" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a"
id="checkbox-3a" class="custom" />
<label for="checkbox-3a">Fritos</label>
</fieldset>
</div>
{code}
23. Slider
*Sliders* are used to enter numeric values along a continuum and can also be dual *handle
range sliders* or *flip switches*.
*Syntax:*
{code}
<label for="range-1">Slider:</label>
<input name="range-1" id="range-1" data-highlight="true"
min="0" max="100" value="40" type="range"/>
{code}
24. Text Input
*Text inputs* and *textareas* are coded with standard HTML elements, then enhanced by
*jQuery Mobile* to make them more attractive and useable on a mobile device.
*Syntax:*
{code}
<div data-role="fieldcontain">
<label for="text-1">Input:</label>
<input name="text-1" id="text-1" data-clear-btn="true"
value="" type="text"/>
</div>
{code}
was:
We need to have palette elements descriptions and we need to show them in tooltips.
1. JS/CSS
Add references to *jQuery*, *jQuery Mobile* JS and CSS to
<code><head></code>
*Syntax:*
{code}
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.cs... />
<script
src="http://code.jquery.com/jquery-1.9.1.min.js"></script...
<script
src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js&...
</head>
{code}
2. Page
The page is the primary unit of interaction in *jQuery Mobile* and is used to group
content into logical views that can be animated in and out of view with page transitions.
A *HTML* document may start with a single "page" and the AJAX navigation system
will load additional pages on demand into the DOM as users navigate around. Alternatively,
a HTML document can be built with multiple "pages" inside it and the framework
will transition between these local views with no need to request content from the
server.
*Syntax:*
{code}
<div data-role="page" id="page-1">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
{code}
3. Dialog
Any page can be presented as a modal dialog that appears to be suspended above the page by
adding an attribute to the link that leads to the dialog page.
*Syntax:*
{code}
<div data-role="dialog" id="dialog-1">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h6>Dialog content.</h6>
<a href="#dialog-1" data-role="button"
data-rel="back">OK</a>
</div>
</div>
{code}
4. Popup
To create a popup, add the *data-role="popup"* attribute to a div with the popup
contents. Then create a link with the href set to the id of the popup div, and add the
attribute *data-rel="popup"* to tell the framework to open the popup when the
link is tapped. A popup div has to be nested inside the same page as the link.
*Syntax:*
{code}
<a href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
{code}
5. Grid
Grids are 100% width, completely invisible (no borders or backgrounds) and don't have
padding or margins, so they shouldn't interfere with the styles of elements placed
inside them. Within the grid container, child elements are assigned ui-block-a/b/c/d/e in
a sequential manner which makes each "block" element float side-by-side, forming
the grid.
*Syntax:*
{code}
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
</div>
{code}
6. Field Container
To improve the styling of labels and form elements on wider screens, wrap a div or
fieldset with the *data-role="fieldcontain"* attribute around each label/form
element. This framework aligns the input and associated label side-by-side, and breaks to
stacked block-level elements below ~480px. The framework will also add a thin bottom
border to act as a field separator.
*Syntax:*
{code}
<div data-role="fieldcontain">
</div>
{code}
7. Panel
Flexible by design, panels can be used for navigation, forms, inspectors and more.
*Syntax:*
{code}
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->
{code}
8. Table
The reflow table mode works by collapsing the table columns into a stacked presentation
that looks like blocks of label/data pairs for each row.
*Syntax:*
{code}
<table data-role="table" id="my-table"
data-mode="reflow">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Item 1</td>
<td>Item 2</td>
</tr>
</tbody>
</table>
{code}
9. Collapsible
Collapsibles are simple widgets that allow you to expand or collapse content when tapped
and are useful in mobile to provide a compact presentation of content.
*Syntax:*
{code}
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
{code}
10. Collapsible Set
*Syntax:*
{code}
<div data-role="collapsible-set">
</div>
{code}
11. Header Bar
The *header* is a toolbar at the top of the page that usually contains the page title text
and optional buttons positioned to the left and/or right of the title for navigation or
actions.
*Syntax:*
{code}
<div data-role="header">
<a href="#" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="#" data-icon="check">Save</a>
</div>
{code}
12. Footer Bar
The *footer* is a toolbar at the bottom of the page that can contain a wide range of
content, from for elements to *navbars*.
*Syntax:*
{code}
<div data-role="footer" class="ui-bar">
<a href="#" data-icon="plus">Add</a>
<a href="#" data-icon="arrow-u">Up</a>
<a href="#" data-icon="arrow-d">Down</a>
</div>
{code}
13. Navbar
*jQuery Mobile* has a very basic *navbar* widget that is useful for providing up to 5
buttons with optional icons in a bar.
*Syntax:*
{code}
<div data-role="navbar">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</div>
{code}
14. Select
The *select menu* is based on a native select element, which is hidden from view and
replaced with a custom-styled select button. Tapping it opens the native menu.
*Syntax:*
{code}
<label for="select-choice-0" class="select">Shipping
method:</label>
<select name="select-choice-0" id="select-choice-0">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
{code}
15. Listview
A *listview* is coded as a simple *unordered list (ul)* or *ordered list (ol)* with a
*data-role="listview"* attribute and has a wide range of features.
*Syntax:*
{code}
<ul data-role="listview">
<li><a href="item1.html">Item 1</a></li>
<li><a href="item2.html">Item 2</a></li>
</ul>
{code}
16. Button
*Buttons* are core widgets in *jQuery Mobile* and are used within a wide range of other
plugins. The *button* markup is flexible and can be created from links or form buttons.
*Syntax:*
{code}
<a href="" data-role="button">Link button</a>
{code}
17. Buttons
*Controlgroups* are used to visually group a set of buttons to form a single block that
looks contained like a navigation component.
*Syntax:*
{code}
<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>
{code}
18. Link
*jQuery Mobile* is designed to work with standard page link conventions and layers the
AJAX navigation on top for maximum compatibility.
*Syntax:*
{code}
<a href="">Link</a>
{code}
19. Toggle
*Flip switches* are used for boolean style inputs like true/false or on/off in a compact
UI element.
*Syntax:*
{code}
<div data-role="fieldcontain">
<label for="flip-1">Switch:</label>
<select name="flip-1" id="flip-1"
data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
{code}
20. Radio
*Radio buttons* are used to provide a list of options where only a single option can be
selected.
*Syntax:*
{code}
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice"
id="radio-choice-1" value="choice-1" checked="checked"
/>
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice"
id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice"
id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
</fieldset>
{code}
21. Checkbox
*Checkboxes* are used to provide a list of options where more than one can be selected.
*Syntax:*
{code}
<label><input type="checkbox" name="checkbox-1"/>I
agree</label>
{code}
22. Checkboxes
To improve the styling of labels and form elements on wider screens, wrap a div or
fieldset with the *data-role="fieldcontain"* attribute around each label/form
element. This framework aligns the input and associated label side-by-side, and breaks to
stacked block-level elements below ~480px. The framework will also add a thin bottom
border to act as a field separator.
*Syntax:*
{code}
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a"
id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a"
id="checkbox-2a" class="custom" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a"
id="checkbox-3a" class="custom" />
<label for="checkbox-3a">Fritos</label>
</fieldset>
</div>
{code}
23. Slider
*Sliders* are used to enter numeric values along a continuum and can also be dual *handle
range sliders* or *flip switches*.
*Syntax:*
{code}
<label for="range-1">Slider:</label>
<input name="range-1" id="range-1" data-highlight="true"
min="0" max="100" value="40" type="range"/>
{code}
24. Text Input
*Text inputs* and *textareas* are coded with standard HTML elements, then enhanced by
*jQuery Mobile* to make them more attractive and useable on a mobile device.
*Syntax:*
{code}
<div data-role="fieldcontain">
<label for="text-1">Input:</label>
<input name="text-1" id="text-1" data-clear-btn="true"
value="" type="text"/>
</div>
{code}
Descriptions for jQuery Widget Palette elements
-----------------------------------------------
Key: JBIDE-13778
URL: https://issues.jboss.org/browse/JBIDE-13778
Project: Tools (JBoss Tools)
Issue Type: Sub-task
Components: jsp/jsf/xml/html source editing
Reporter: Daniel Azarov
Assignee: Daniel Azarov
Fix For: 4.1.0.Alpha2
We need to have palette elements descriptions and we need to show them in tooltips.
1. JS/CSS
Add references to *jQuery*, *jQuery Mobile* JS and CSS to <head>
*Syntax:*
{code}
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.cs... />
<script
src="http://code.jquery.com/jquery-1.9.1.min.js"></script...
<script
src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js&...
</head>
{code}
2. Page
The *page* is the primary unit of interaction in *jQuery Mobile* and is used to group
content into logical views that can be animated in and out of view with page transitions.
A *HTML* document may start with a single "page" and the *AJAX* navigation
system will load additional pages on demand into the *DOM* as users navigate around.
Alternatively, a *HTML* document can be built with multiple "pages" inside it
and the framework will transition between these local views with no need to request
content from the server.
*Syntax:*
{code}
<div data-role="page" id="page-1">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
{code}
3. Dialog
Any *page* can be presented as a modal dialog that appears to be suspended above the page
by adding an attribute to the link that leads to the dialog page.
*Syntax:*
{code}
<div data-role="dialog" id="dialog-1">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h6>Dialog content.</h6>
<a href="#dialog-1" data-role="button"
data-rel="back">OK</a>
</div>
</div>
{code}
4. Popup
To create a *popup*, add the *data-role="popup"* attribute to a div with the
popup contents. Then create a link with the href set to the id of the popup div, and add
the attribute *data-rel="popup"* to tell the framework to open the popup when
the link is tapped. A popup div has to be nested inside the same page as the link.
*Syntax:*
{code}
<a href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
{code}
5. Grid
*Grids* are 100% width, completely invisible (no borders or backgrounds) and don't
have padding or margins, so they shouldn't interfere with the styles of elements
placed inside them. Within the grid container, child elements are assigned
ui-block-a/b/c/d/e in a sequential manner which makes each "block" element float
side-by-side, forming the grid.
*Syntax:*
{code}
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
</div>
{code}
6. Field Container
To improve the styling of labels and form elements on wider screens, wrap a div or
fieldset with the *data-role="fieldcontain"* attribute around each label/form
element. This framework aligns the input and associated label side-by-side, and breaks to
stacked block-level elements below ~480px. The framework will also add a thin bottom
border to act as a field separator.
*Syntax:*
{code}
<div data-role="fieldcontain">
</div>
{code}
7. Panel
Flexible by design, *panels* can be used for navigation, forms, inspectors and more.
*Syntax:*
{code}
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->
{code}
8. Table
The *reflow table* mode works by collapsing the table columns into a stacked presentation
that looks like blocks of label/data pairs for each row.
*Syntax:*
{code}
<table data-role="table" id="my-table"
data-mode="reflow">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Item 1</td>
<td>Item 2</td>
</tr>
</tbody>
</table>
{code}
9. Collapsible
*Collapsibles* are simple widgets that allow you to expand or collapse content when
tapped and are useful in mobile to provide a compact presentation of content.
*Syntax:*
{code}
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
{code}
10. Collapsible Set
*Syntax:*
{code}
<div data-role="collapsible-set">
</div>
{code}
11. Header Bar
The *header* is a toolbar at the top of the page that usually contains the page title
text and optional buttons positioned to the left and/or right of the title for navigation
or actions.
*Syntax:*
{code}
<div data-role="header">
<a href="#" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="#" data-icon="check">Save</a>
</div>
{code}
12. Footer Bar
The *footer* is a toolbar at the bottom of the page that can contain a wide range of
content, from for elements to *navbars*.
*Syntax:*
{code}
<div data-role="footer" class="ui-bar">
<a href="#" data-icon="plus">Add</a>
<a href="#" data-icon="arrow-u">Up</a>
<a href="#" data-icon="arrow-d">Down</a>
</div>
{code}
13. Navbar
*jQuery Mobile* has a very basic *navbar* widget that is useful for providing up to 5
buttons with optional icons in a bar.
*Syntax:*
{code}
<div data-role="navbar">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</div>
{code}
14. Select
The *select menu* is based on a native select element, which is hidden from view and
replaced with a custom-styled select button. Tapping it opens the native menu.
*Syntax:*
{code}
<label for="select-choice-0" class="select">Shipping
method:</label>
<select name="select-choice-0" id="select-choice-0">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
{code}
15. Listview
A *listview* is coded as a simple *unordered list (ul)* or *ordered list (ol)* with a
*data-role="listview"* attribute and has a wide range of features.
*Syntax:*
{code}
<ul data-role="listview">
<li><a href="item1.html">Item 1</a></li>
<li><a href="item2.html">Item 2</a></li>
</ul>
{code}
16. Button
*Buttons* are core widgets in *jQuery Mobile* and are used within a wide range of other
plugins. The *button* markup is flexible and can be created from links or form buttons.
*Syntax:*
{code}
<a href="" data-role="button">Link button</a>
{code}
17. Buttons
*Controlgroups* are used to visually group a set of buttons to form a single block that
looks contained like a navigation component.
*Syntax:*
{code}
<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>
{code}
18. Link
*jQuery Mobile* is designed to work with standard page link conventions and layers the
AJAX navigation on top for maximum compatibility.
*Syntax:*
{code}
<a href="">Link</a>
{code}
19. Toggle
*Flip switches* are used for boolean style inputs like true/false or on/off in a compact
UI element.
*Syntax:*
{code}
<div data-role="fieldcontain">
<label for="flip-1">Switch:</label>
<select name="flip-1" id="flip-1"
data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
{code}
20. Radio
*Radio buttons* are used to provide a list of options where only a single option can be
selected.
*Syntax:*
{code}
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice"
id="radio-choice-1" value="choice-1" checked="checked"
/>
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice"
id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice"
id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
</fieldset>
{code}
21. Checkbox
*Checkboxes* are used to provide a list of options where more than one can be selected.
*Syntax:*
{code}
<label><input type="checkbox" name="checkbox-1"/>I
agree</label>
{code}
22. Checkboxes
To improve the styling of labels and form elements on wider screens, wrap a div or
fieldset with the *data-role="fieldcontain"* attribute around each label/form
element. This framework aligns the input and associated label side-by-side, and breaks to
stacked block-level elements below ~480px. The framework will also add a thin bottom
border to act as a field separator.
*Syntax:*
{code}
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a"
id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a"
id="checkbox-2a" class="custom" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a"
id="checkbox-3a" class="custom" />
<label for="checkbox-3a">Fritos</label>
</fieldset>
</div>
{code}
23. Slider
*Sliders* are used to enter numeric values along a continuum and can also be dual *handle
range sliders* or *flip switches*.
*Syntax:*
{code}
<label for="range-1">Slider:</label>
<input name="range-1" id="range-1" data-highlight="true"
min="0" max="100" value="40" type="range"/>
{code}
24. Text Input
*Text inputs* and *textareas* are coded with standard HTML elements, then enhanced by
*jQuery Mobile* to make them more attractive and useable on a mobile device.
*Syntax:*
{code}
<div data-role="fieldcontain">
<label for="text-1">Input:</label>
<input name="text-1" id="text-1" data-clear-btn="true"
value="" type="text"/>
</div>
{code}
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira