Details

      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

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                dazarov Daniel Azarov
                Reporter:
                dazarov Daniel Azarov
              • Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: