[jbosstools-issues] [JBoss JIRA] (JBIDE-13413) jQuery Mobile Widget Palette

Tue Jan 29 01:14:47 EST 2013

    [ https://issues.jboss.org/browse/JBIDE-13413?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12750898#comment-12750898 ] 

Alexey Kazakov edited comment on JBIDE-13413 at 1/29/13 1:14 AM:
-----------------------------------------------------------------

1. *Page* (http://jquerymobile.com/test/docs/pages/page-anatomy.html)

!NewPage.png|thumbnail!

Result:

{code}
<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Page content goes here.</p>		
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
{code}

2. *Dialog* (http://jquerymobile.com/test/docs/pages/dialog/index.html)

!NewDialog.png|thumbnail!

Result:

{code}
<a href="foo.html" data-rel="dialog" data-transition="pop" data-close-btn="none">Open dialog</a>
{code}

3. *Popup* (http://jquerymobile.com/test/docs/pages/popup/index.html)

!NewPopup.png|thumbnail!

Result:

{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}

4. *Header Bar* (http://jquerymobile.com/test/docs/toolbars/docs-headers.html)

!NewHeaderBar.png|thumbnail!

Result:

{code}
<div data-role="header">
	<a href="index.html" data-icon="delete">Cancel</a>
	<h1>Edit Contact</h1>
	<a href="index.html" data-icon="check" data-theme="b">Save</a>
</div>
{code}

5. *Footer Bar* (http://jquerymobile.com/test/docs/toolbars/docs-footers.html)

No wizard.

Result:

{code}
<div data-role="footer" class="ui-bar">

</div>
{code}

6. *Navbar* (http://jquerymobile.com/test/docs/toolbars/docs-navbar.html)

!NewNavbar.png|thumbnail!

Result:

{code}
<div data-role="navbar">
	<ul>
		<li><a href="a.html">One</a></li>
		<li><a href="b.html">Two</a></li>
	</ul>
</div><!-- /navbar -->
{code}

7. *Button* (http://jquerymobile.com/test/docs/buttons/buttons-types.html)

!NewButton.png|thumbnail!

Result:

{code}
<a href="index.html" data-role="button" data-mini="true">Link button</a>
{code}

8. *Grouped Buttons* (http://jquerymobile.com/test/docs/buttons/buttons-grouped.html)

No Wizard.

Result:

{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}

9. *Grid* (http://jquerymobile.com/test/docs/content/content-grids.html)

!NewGrid.png|thumbnail!

Result:

{code}
<div class="ui-grid-a">
	<div class="ui-block-a"></div>
	<div class="ui-block-b"></div>
</div><!-- /grid-a -->
{code}

10. *Collapsible Content Block* (http://jquerymobile.com/test/docs/content/content-collapsible.html)

!NewBlock.png|thumbnail!

Result:

{code}
<div data-role="collapsible">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content.</p>
</div>
{code}

11. *Collapsible Set* (http://jquerymobile.com/test/docs/content/content-collapsible-set.html)

No Wizard.

Result:

{code}
<div data-role="collapsible-set">
</div>
{code}

12. *Field Container* (http://jquerymobile.com/test/docs/forms/slider/)

No Wizard.

Result:

{code}
<div data-role="fieldcontain">
</div>
{code}

13. *Flip Toggle Switch* (http://jquerymobile.com/test/docs/forms/switch/)

!NewFlip.png|thumbnail!

Result:

{code}
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
	<option value="off">Off</option>
	<option value="on">On</option>
</select>
{code}

14. *Radio Button* (http://jquerymobile.com/test/docs/forms/radiobuttons/)

!NewRadioButton.png|thumbnail!

Result:

{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}

15. *Check Box* (http://jquerymobile.com/test/docs/forms/checkboxes/)

!NewCheckBox.png|thumbnail!

Result:

{code}
<label><input type="checkbox" name="checkbox-0" /> I agree </label>
{code}

16. *Grouped Check Boxes* (http://jquerymobile.com/test/docs/forms/checkboxes/)

17. *Select Menu* (http://jquerymobile.com/test/docs/forms/selects/)

18. *Listview* (http://jquerymobile.com/test/docs/lists/index.html)

19. *Panel* (http://jquerymobile.com/test/docs/panels/index.html)

20. *Table* (http://jquerymobile.com/test/docs/tables/index.html)

      was (Author: akazakov):
    1. *Page* (http://jquerymobile.com/test/docs/pages/page-anatomy.html)

!NewPage.png|thumbnail!

Result:

{code}
<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Page content goes here.</p>		
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
{code}

2. *Dialog* (http://jquerymobile.com/test/docs/pages/dialog/index.html)

!NewDialog.png|thumbnail!

Result:

{code}
<a href="foo.html" data-rel="dialog" data-transition="pop" data-close-btn="none">Open dialog</a>
{code}

3. *Popup* (http://jquerymobile.com/test/docs/pages/popup/index.html)

!NewPopup.png|thumbnail!

Result:

{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}

4. *Header Bar* (http://jquerymobile.com/test/docs/toolbars/docs-headers.html)

!NewHeaderBar.png|thumbnail!

Result:

{code}
<div data-role="header">
	<a href="index.html" data-icon="delete">Cancel</a>
	<h1>Edit Contact</h1>
	<a href="index.html" data-icon="check" data-theme="b">Save</a>
</div>
{code}

5. *Footer Bar* (http://jquerymobile.com/test/docs/toolbars/docs-footers.html)

No wizard.

Result:

{code}
<div data-role="footer" class="ui-bar">

</div>
{code}

6. *Navbar* (http://jquerymobile.com/test/docs/toolbars/docs-navbar.html)

!NewNavbar.png|thumbnail!

Result:

{code}
<div data-role="navbar">
	<ul>
		<li><a href="a.html">One</a></li>
		<li><a href="b.html">Two</a></li>
	</ul>
</div><!-- /navbar -->
{code}

7. *Button* (http://jquerymobile.com/test/docs/buttons/buttons-types.html)

!NewButton.png|thumbnail!

Result:

{code}
<a href="index.html" data-role="button" data-mini="true">Link button</a>
{code}

8. *Grouped Buttons* (http://jquerymobile.com/test/docs/buttons/buttons-grouped.html)

No Wizard.

Result:

{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}

9. *Grid* (http://jquerymobile.com/test/docs/content/content-grids.html)

!NewGrid.png|thumbnail!

Result:

{code}
<div class="ui-grid-a">
	<div class="ui-block-a"></div>
	<div class="ui-block-b"></div>
</div><!-- /grid-a -->
{code}

10. *Collapsible Content Block* (http://jquerymobile.com/test/docs/content/content-collapsible.html)

!NewBlock.png|thumbnail!

Result:

{code}
<div data-role="collapsible">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content.</p>
</div>
{code}

11. *Collapsible Set* (http://jquerymobile.com/test/docs/content/content-collapsible-set.html)

No Wizard.

Result:

{code}
<div data-role="collapsible-set">
</div>
{code}

12. *Field Container* (http://jquerymobile.com/test/docs/forms/slider/)

No Wizard.

Result:

{code}
<div data-role="fieldcontain">
</div>
{code}

13. *Flip Toggle Switch* (http://jquerymobile.com/test/docs/forms/switch/)

!NewFlip.png|thumbnail!

Result:

{code}
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
	<option value="off">Off</option>
	<option value="on">On</option>
</select>
{code}

14. *Radio Button* (http://jquerymobile.com/test/docs/forms/radiobuttons/)

!NewRadioButton.png|thumbnail!

Result:

{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}

15. *Check Box* (http://jquerymobile.com/test/docs/forms/checkboxes/)

16. *Grouped Check Boxes* (http://jquerymobile.com/test/docs/forms/checkboxes/)

17. *Select Menu* (http://jquerymobile.com/test/docs/forms/selects/)

18. *Listview* (http://jquerymobile.com/test/docs/lists/index.html)

19. *Panel* (http://jquerymobile.com/test/docs/panels/index.html)

20. *Table* (http://jquerymobile.com/test/docs/tables/index.html)

> jQuery Mobile Widget Palette
> ----------------------------
>
>                 Key: JBIDE-13413
>                 URL: https://issues.jboss.org/browse/JBIDE-13413
>             Project: Tools (JBoss Tools)
>          Issue Type: Feature Request
>          Components: jsp/jsf/xml/html source editing
>            Reporter: Alexey Kazakov
>            Assignee: Alexey Kazakov
>             Fix For: 4.1.x
>
>         Attachments: NewBlock.bmml, NewBlock.bmml, NewBlock.png, NewButton.bmml, NewButton.png, NewCheckBox.bmml, NewCheckBox.png, NewDialog.bmml, NewDialog.bmml, NewDialog.png, NewFlip.bmml, NewFlip.png, NewGrid.bmml, NewGrid.png, NewHeaderBar.bmml, NewHeaderBar.png, NewNavbar.bmml, NewNavbar.png, NewPage.bmml, NewPage.png, NewPopup.bmml, NewPopup.png, NewRadioButton.bmml, NewRadioButton.png
>
>
> http://jquerymobile.com/test/

--
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