Details
-
Sub-task
-
Resolution: Done
-
Major
-
None
-
None
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
Page:
<div data-role="page">
...
</div>
3. Dialog
Dialog:
<div data-role="dialog">
...
</div>
4. Popup
Popup:
<a href="#popupBasic" data-rel="popup">...</a>
<div data-role="popup" id="popupBasic">
...
</div>
5. Grid
Grid:
<div class="ui-grid-b">
...
</div>
6. Field Container
Field Container:
<div data-role="fieldcontain">
...
</div>
7. Panel
Panel:
<div data-role="panel">
...
</div>
8. Table
Table:
<table data-role="table"></code><br>
...
</table>
9. Collapsible
Collapsible:
<div data-role="collapsible">
...
</div>
10. Collapsible Set
Collapsible Set:
<div data-role="collapsible-set">
...
</div>
11. Header Bar
Header Bar:
<div data-role="header">
...
</div>
12. Footer Bar
Footer Bar:
<div data-role="footer">
...
</div>
13. Navbar
Navbar:
<div data-role="navbar">
...
</div>
14. Select
Select menu:
<label for="select-choice-0" class="select">...</label>
<select name="select-choice-0">
...
</select>
15. Listview
Listview:
<ul data-role="listview">
...
</ul>
16. Button
Button:
<a href="..." data-role="button">...</a>
17. Buttons
Grouped buttons:
<div data-role="controlgroup">
...
</div>
18. Link
Link:
<a href="...">...</a>
19. Toggle
Flip toggle switch:
<div data-role="fieldcontain">
<label for="flip-1">...</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
20. Radio
Radio button:
<fieldset data-role="controlgroup">
<legend></legend>
<input name="radio-choice-1" id="radio-choice-1a" value="A" type="radio"/>
<label for="radio-choice-1a">...</label>
</fieldset>
21. Checkbox
Checkbox:
<label>
<input type="checkbox" name="checkbox-1"/>
...
</label>
22. Checkboxes
Grouped checkboxes:
<fieldset data-role="controlgroup">
<legend></legend>
<input name="checkbox-1a" id="checkbox-1a" type="checkbox"/>
<label for="checkbox-1a">...</label>
</fieldset>
23. Slider
Slider/Range slider:
<label for="range-1">...</label>
<input name="range-1" data-highlight="true" type="range"/>
24. Text Input
Text Input:
<div data-role="fieldcontain">
<label for="text-1">...</label>
<input name="text-1" id="text-1" type="text"/>
</div>
Test case:
EXECUTE:
1. Create Java Project "test"
2. Create folder "test" in test project
3. Create file "test.html" in test folder
<!DOCTYPE html> <html> </html>
4. Open file test.html in Visual Page Editor
ASSERT: Visual Page Editor appears with test.html and jQuery Mobile Widget Palette on the right side
5. Point mouse to palette element then hold
ASSERT: Palette element description is shown in tooltip popup window
