[JBoss JIRA] (JBIDE-12245) Document Maven How-Tos
by Michelle Murray (JIRA)
[ https://issues.jboss.org/browse/JBIDE-12245?page=com.atlassian.jira.plugi... ]
Michelle Murray updated JBIDE-12245:
------------------------------------
Assignee: Michelle Murray (was: Burr Sutter)
> Document Maven How-Tos
> ----------------------
>
> Key: JBIDE-12245
> URL: https://issues.jboss.org/browse/JBIDE-12245
> Project: Tools (JBoss Tools)
> Issue Type: Task
> Components: maven
> Affects Versions: 3.3.0.Final
> Reporter: Burr Sutter
> Assignee: Michelle Murray
> Fix For: 4.0.x, 4.1.x
>
>
> Maven is "black magic" to the average developer and this task intends to capture the key scenarios that should be documented and/or tooling improved:
> 1) Why is THIS dependency needed? What specific component is using it?
> 2) Where did THIS dependency come from? What repository?
> 3) How can I work offline, off the net? How do I know an artifact that I am reaching for is not on my local machine? Not on my local network?
> 4) Since a property, determines the BOM and the BOM determines the versions of each included dependency, how can I trace those versions, see what is being used?
> 5) Often my local .m2/repository collects a "bad" artifact, how can I detect that and clean it up?
--
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
13 years
- 1
- 0
[JBoss JIRA] (JBIDE-13635) remove references to struts in documentation
by Michelle Murray (JIRA)
[ https://issues.jboss.org/browse/JBIDE-13635?page=com.atlassian.jira.plugi... ]
Michelle Murray updated JBIDE-13635:
------------------------------------
Assignee: Alexey Kazakov (was: Michelle Murray)
> remove references to struts in documentation
> --------------------------------------------
>
> Key: JBIDE-13635
> URL: https://issues.jboss.org/browse/JBIDE-13635
> Project: Tools (JBoss Tools)
> Issue Type: Sub-task
> Components: struts/shale
> Reporter: Max Rydahl Andersen
> Assignee: Alexey Kazakov
> Fix For: 4.1.0.Alpha2
>
>
--
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
13 years
- 1
- 0
[JBoss JIRA] (JBIDE-13635) remove references to struts in documentation
by Michelle Murray (JIRA)
[ https://issues.jboss.org/browse/JBIDE-13635?page=com.atlassian.jira.plugi... ]
Michelle Murray commented on JBIDE-13635:
-----------------------------------------
Assigning to Alexey to apply PR.
> remove references to struts in documentation
> --------------------------------------------
>
> Key: JBIDE-13635
> URL: https://issues.jboss.org/browse/JBIDE-13635
> Project: Tools (JBoss Tools)
> Issue Type: Sub-task
> Components: struts/shale
> Reporter: Max Rydahl Andersen
> Assignee: Alexey Kazakov
> Fix For: 4.1.0.Alpha2
>
>
--
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
13 years
- 1
- 0
[JBoss JIRA] (JBIDE-13635) remove references to struts in documentation
by Michelle Murray (JIRA)
[ https://issues.jboss.org/browse/JBIDE-13635?page=com.atlassian.jira.plugi... ]
Michelle Murray commented on JBIDE-13635:
-----------------------------------------
Changes look good now. This can be applied to master branch.
> remove references to struts in documentation
> --------------------------------------------
>
> Key: JBIDE-13635
> URL: https://issues.jboss.org/browse/JBIDE-13635
> Project: Tools (JBoss Tools)
> Issue Type: Sub-task
> Components: struts/shale
> Reporter: Max Rydahl Andersen
> Assignee: Michelle Murray
> Fix For: 4.1.0.Alpha2
>
>
--
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
13 years
- 1
- 0
[JBoss JIRA] (JBIDE-13830) document reasons for using Eclipse Juno SR2 instead of earlier version on www.jboss.org install page for JBT 4.0.1
by Nick Boldt (JIRA)
Nick Boldt created JBIDE-13830:
----------------------------------
Summary: document reasons for using Eclipse Juno SR2 instead of earlier version on www.jboss.org install page for JBT 4.0.1
Key: JBIDE-13830
URL: https://issues.jboss.org/browse/JBIDE-13830
Project: Tools (JBoss Tools)
Issue Type: Bug
Components: updatesite, website
Affects Versions: 4.0.1.Final
Reporter: Nick Boldt
Assignee: Nick Boldt
Priority: Blocker
Fix For: 4.0.1.Final
When we release JBT 4.0.1, we should update https://www.jboss.org/tools/download/installation/update_4_0#installon420421 to include a blurb about why we encourage users to use Juno SR2 instead of R or SR1.
Reasons include:
a) performance patch, JBIDE-13326 / JBIDE-13335
b) WTP bug / behaviour change between WTP 3.3.0 & 3.3.1: JBIDE-13821
--
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
13 years
- 1
- 0
[JBoss JIRA] (JBIDE-13821) CI runs tests against minimum instead of maximum
by Nick Boldt (JIRA)
[ https://issues.jboss.org/browse/JBIDE-13821?page=com.atlassian.jira.plugi... ]
Nick Boldt updated JBIDE-13821:
-------------------------------
Fix Version/s: 4.0.1.Final
(was: 4.0.2.Final)
> CI runs tests against minimum instead of maximum
> ------------------------------------------------
>
> Key: JBIDE-13821
> URL: https://issues.jboss.org/browse/JBIDE-13821
> Project: Tools (JBoss Tools)
> Issue Type: Bug
> Components: Build/Releng
> Affects Versions: 4.0.x, 4.1.0.Alpha2
> Reporter: Mickael Istria
> Assignee: Nick Boldt
> Priority: Critical
> Fix For: 4.0.1.Final, 4.1.0.Alpha2
>
>
> As Maven executions set a value for the TARGET_PLATFORM_VERSION value, this property is not overriden by the maximum profile.
> Maven order to set properties is
> # look a -D... to set property, if not found
> # look at active profiles to set property, if not found
> # look at default value of property to set it
> This makes that in mvn execution for tests, the TARGET_PLATFORM_VERSION is set to minimal is CI jobs, whereas with using the -Pmaximun profile, we expect maximum.
> This is a critical issue since it caused hours of confusions to debug on 4.0.x branch.
--
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
13 years
- 1
- 0
[JBoss JIRA] (JBIDE-13829) Seam runtime pref page has not-useful title / desc
by Rob Stryker (JIRA)
Rob Stryker created JBIDE-13829:
-----------------------------------
Summary: Seam runtime pref page has not-useful title / desc
Key: JBIDE-13829
URL: https://issues.jboss.org/browse/JBIDE-13829
Project: Tools (JBoss Tools)
Issue Type: Bug
Components: Seam 2
Affects Versions: 4.1.0.Alpha1
Reporter: Rob Stryker
Assignee: Denis Golovin
Fix For: 4.1.0.Alpha2
The "Seam Runtime" preference page has a title that just says "Seam". It doesn't say anything else, and it has no description at all.
--
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
13 years
- 1
- 0
[JBoss JIRA] (JBIDE-13778) Descriptions for jQuery Widget Palette elements
by Daniel Azarov (JIRA)
[ 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>
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.
3. Dialog
Any *page* can be presented as a *modal dialog* by adding the *data-rel="dialog"* attribute to the page anchor link.
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.
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.
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.
7. Panel
Flexible by design, *panels* can be used for navigation, forms, inspectors and more.
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.
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.
10. Collapsible Set
*Collapsible sets* start with the exact same markup as individual *collapsibles*. By adding a parent wrapper with a *data-role="collapsible-set"* attribute around a number of *collapsibles*, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.
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.
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*.
13. Navbar
*Navbar* widget is useful for providing up to 5 buttons with optional icons in a bar.
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.
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.
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.
17. Buttons
*Controlgroups* are used to visually group a set of buttons to form a single block that looks contained like a navigation component.
18. Link
You can *link* pages and assets as you normally would, and *jQuery Mobile* will automatically handle *page* requests in a single-page model, using *AJAX* when possible. When *AJAX* isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.
19. Toggle
*Flip switches* are used for boolean style inputs like true/false or on/off in a compact UI element.
20. Radio
*Radio buttons* are used to provide a list of options where only a single option can be selected.
21. Checkbox
*Checkboxes* are used to provide a list of options where more than one can be selected.
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.
23. Slider
*Sliders* are used to enter numeric values along a continuum and can also be dual *handle range sliders* or *flip switches*.
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.
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 <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.css" />
<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"></script>
</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* by adding the *data-rel="dialog"* attribute to the page anchor link.
*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.
*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
*Collapsible sets* start with the exact same markup as individual *collapsibles*. By adding a parent wrapper with a *data-role="collapsible-set"* attribute around a number of *collapsibles*, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.
*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
*Navbar* widget 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
You can *link* pages and assets as you normally would, and *jQuery Mobile* will automatically handle *page* requests in a single-page model, using *AJAX* when possible. When *AJAX* isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.
*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.
*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>
> 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.
> 3. Dialog
> Any *page* can be presented as a *modal dialog* by adding the *data-rel="dialog"* attribute to the page anchor link.
> 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.
> 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.
> 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.
> 7. Panel
> Flexible by design, *panels* can be used for navigation, forms, inspectors and more.
> 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.
> 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.
> 10. Collapsible Set
> *Collapsible sets* start with the exact same markup as individual *collapsibles*. By adding a parent wrapper with a *data-role="collapsible-set"* attribute around a number of *collapsibles*, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.
> 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.
> 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*.
> 13. Navbar
> *Navbar* widget is useful for providing up to 5 buttons with optional icons in a bar.
> 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.
> 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.
> 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.
> 17. Buttons
> *Controlgroups* are used to visually group a set of buttons to form a single block that looks contained like a navigation component.
> 18. Link
> You can *link* pages and assets as you normally would, and *jQuery Mobile* will automatically handle *page* requests in a single-page model, using *AJAX* when possible. When *AJAX* isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.
> 19. Toggle
> *Flip switches* are used for boolean style inputs like true/false or on/off in a compact UI element.
> 20. Radio
> *Radio buttons* are used to provide a list of options where only a single option can be selected.
> 21. Checkbox
> *Checkboxes* are used to provide a list of options where more than one can be selected.
> 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.
> 23. Slider
> *Sliders* are used to enter numeric values along a continuum and can also be dual *handle range sliders* or *flip switches*.
> 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.
--
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
13 years
- 1
- 0
[JBoss JIRA] (JBIDE-13778) Descriptions for jQuery Widget Palette elements
by Daniel Azarov (JIRA)
[ 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.css" />
<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"></script>
</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* by adding the *data-rel="dialog"* attribute to the page anchor link.
*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.
*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
*Collapsible sets* start with the exact same markup as individual *collapsibles*. By adding a parent wrapper with a *data-role="collapsible-set"* attribute around a number of *collapsibles*, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.
*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
*Navbar* widget 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
You can *link* pages and assets as you normally would, and *jQuery Mobile* will automatically handle *page* requests in a single-page model, using *AJAX* when possible. When *AJAX* isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.
*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.
*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 <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.css" />
<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"></script>
</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* by adding the *data-rel="dialog"* attribute to the page anchor link.
*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.
*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
*Collapsible sets* start with the exact same markup as individual *collapsibles*. By adding a parent wrapper with a *data-role="collapsible-set"* attribute around a number of *collapsibles*, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.
*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
*Navbar* widget 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.
*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.css" />
> <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"></script>
> </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* by adding the *data-rel="dialog"* attribute to the page anchor link.
> *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.
> *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
> *Collapsible sets* start with the exact same markup as individual *collapsibles*. By adding a parent wrapper with a *data-role="collapsible-set"* attribute around a number of *collapsibles*, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.
> *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
> *Navbar* widget 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
> You can *link* pages and assets as you normally would, and *jQuery Mobile* will automatically handle *page* requests in a single-page model, using *AJAX* when possible. When *AJAX* isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.
> *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.
> *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
13 years
- 1
- 0
[JBoss JIRA] (JBIDE-13778) Descriptions for jQuery Widget Palette elements
by Daniel Azarov (JIRA)
[ 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.css" />
<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"></script>
</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* by adding the *data-rel="dialog"* attribute to the page anchor link.
*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.
*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
*Collapsible sets* start with the exact same markup as individual *collapsibles*. By adding a parent wrapper with a *data-role="collapsible-set"* attribute around a number of *collapsibles*, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.
*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
*Navbar* widget 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.
*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 <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.css" />
<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"></script>
</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* by adding the *data-rel="dialog"* attribute to the page anchor link.
*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.
*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
*Collapsible sets* start with the exact same markup as individual *collapsibles*. By adding a parent wrapper with a *data-role="collapsible-set"* attribute around a number of *collapsibles*, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.
*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.
*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.css" />
> <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"></script>
> </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* by adding the *data-rel="dialog"* attribute to the page anchor link.
> *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.
> *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
> *Collapsible sets* start with the exact same markup as individual *collapsibles*. By adding a parent wrapper with a *data-role="collapsible-set"* attribute around a number of *collapsibles*, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.
> *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
> *Navbar* widget 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.
> *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
13 years
- 1
- 0