1:38 p.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 <b>jQuery</b>, <b>jQuery Mobile</b> 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
*Syntax:*
{code}
<div data-role="fieldcontain">
</div>
{code}
7. Panel
*Syntax:*
{code}
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->
{code}
8. Table
*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
*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
*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
*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
*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
*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
*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
*Syntax:*
{code}
<a href="" data-role="button">Link button</a>
{code}
17. Buttons
*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
*Syntax:*
{code}
<a href="">Link</a>
{code}
19. Toggle
*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
*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
*Syntax:*
{code}
<label><input type="checkbox" name="checkbox-1"/>I
agree</label>
{code}
22. Checkboxes
*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
*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
*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 <b>jQuery</b>, <b>jQuery Mobile</b> 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
*Syntax:*
{code}
<div data-role="fieldcontain">
{code}
</div>
7. Panel
*Syntax:*
{code}
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->
{code}
8. Table
*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
*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
*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
*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
*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
*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
*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
*Syntax:*
{code}
<a href="" data-role="button">Link button</a>
{code}
17. Buttons
*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
*Syntax:*
{code}
<a href="">Link</a>
{code}
19. Toggle
*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
*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
*Syntax:*
{code}
<label><input type="checkbox" name="checkbox-1"/>I
agree</label>
{code}
22. Checkboxes
*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
*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
*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 <b>jQuery</b>, <b>jQuery Mobile</b> 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
*Syntax:*
{code}
<div data-role="fieldcontain">
</div>
{code}
7. Panel
*Syntax:*
{code}
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->
{code}
8. Table
*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
*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
*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
*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
*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
*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
*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
*Syntax:*
{code}
<a href="" data-role="button">Link button</a>
{code}
17. Buttons
*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
*Syntax:*
{code}
<a href="">Link</a>
{code}
19. Toggle
*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
*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
*Syntax:*
{code}
<label><input type="checkbox" name="checkbox-1"/>I
agree</label>
{code}
22. Checkboxes
*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
*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
*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
4771
days inactive
4771
days old
jbosstools-issues@lists.jboss.org
0 comments
1 participants
participants (1)
-
Daniel Azarov (JIRA)