demos/tizen-winsets/widgets/ctxpopup.html

   1 <div data-role="page" id="ctxpopup-demo" data-add-back-btn="true">
   2         <div data-role="header" data-position="fixed">
   3                 <h1>Contextual Popup</h1>
   4         </div>
   5         <div class="content" data-role="content">
   6                 <div>
   7 <!-- target button -->
   8 <a href="#pop_js" id="btn_js" data-role="button" data-inline="true" data-rel="popupwindow">Touch me!</a>
   9 <!-- context popup -->
  10 <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
  11         <ul data-role="listview">
  12                 <li><a href="#" class="ui-btn-ctxpopup-close">Close</a></li>
  13                 <li><a href="#" class="ui-btn-ctxpopup-close" id="ctxpopup_update">Update Button Text</a></li>
  14         </ul>
  15 </div>
  16 <br>
  17 <br>
  18
  19 <!-- target button -->
  20 <a href="#pop_icon_text" id="btn_icon_text" data-role="button" data-inline="true" data-rel="popupwindow">Icon+Text</a>
  21 <!-- context popup -->
  22 <div id="pop_icon_text" data-role="popupwindow" data-show-arrow="true">
  23         <ul data-role="listview">
  24                 <li class="ui-li-1line-bigicon1">
  25                         <a href="#">
  26                                 <img class="ui-li-bigicon" src="test/ctxpopup_1.png">
  27                                 <span class="ui-li-text-main">Eenie</span>
  28                         </a>
  29             </li>
  30                 <li class="ui-li-1line-bigicon1">
  31                         <a href="#">
  32                                 <img class="ui-li-bigicon" src="test/ctxpopup_2.png">
  33                                 <span class="ui-li-text-main">Meenie</span>
  34                         </a>
  35                 </li>
  36                 <li class="ui-li-1line-bigicon1">
  37                         <a href="#">
  38                                 <img class="ui-li-bigicon" src="test/ctxpopup_3.png">
  39                                 <span class="ui-li-text-main">Mynie</span>
  40                         </a>
  41                 </li>
  42                 <li class="ui-li-1line-bigicon1">
  43                         <a href="#">
  44                                 <img class="ui-li-bigicon" src="test/ctxpopup_4.png">
  45                                 <span class="ui-li-text-main">Mo</span>
  46                         </a>
  47                 </li>
  48         </ul>
  49 </div>
  50 <br>
  51 <br>
  52
  53 <!-- target button -->
  54 <a href="#pop_3_icons" id="btn_3_icons" data-role="button" data-inline="true" data-rel="popupwindow">3 Icons</a>
  55 <!-- context popup -->
  56 <div class="horizontal" id="pop_3_icons" data-role="popupwindow" data-show-arrow="true">
  57         <ul>
  58                 <li class="icon">
  59                         <a href="#" data-role="button" data-icon="call"></a>
  60                 </li>
  61                 <li class="icon">
  62                         <a href="#" data-role="button" data-icon="favorite"></a>
  63                 </li>
  64                 <li class="text">
  65                         <a href="#">Function</a>
  66                 </li>
  67    </ul>
  68 </div>
  69 <br>
  70 <br>
  71
  72 <!-- target button -->
  73 <a href="#pop_6_icons" id="btn_6_icons" data-role="button" data-inline="true" data-rel="popupwindow">6 Icons-Grid</a>
  74 <!-- context popup -->
  75 <div class="horizontal" id="pop_6_icons" data-role="popupwindow" data-show-arrow="true">
  76         <table>
  77                 <tr>
  78                         <td class="icon">
  79                                 <a href="#" data-role="button" data-icon="call"></a>
  80                         </td>
  81                         <td class="icon">
  82                                 <a href="#" data-role="button" data-icon="favorite"></a>
  83                         </td>
  84                         <td class="text">
  85                                 <a href="#">Eeenie</a>
  86                         </td>
  87                 </tr>
  88                 <tr>
  89                         <td class="icon">
  90                                 <a href="#" data-role="button" data-icon="call"></a>
  91                         </td>
  92                         <td class="text">
  93                                 <a href="#">Mynie</a>
  94                         </td>
  95                         <td class="icon">
  96                                 <a href="#" data-role="button" data-icon="favorite"></a>
  97                         </td>
  98                 </tr>
  99         </table>
 100 </div>
 101 <br>
 102 <br>
 103
 104 <a href="#pop_copy_paste" id="btn_copy_paste" data-role="button" data-inline="true" data-rel="popupwindow">CopyPaste</a>
 105
 106 <div id="pop_copy_paste" class="horizontal" data-role="popupwindow" data-show-arrow="true">
 107         <ul>
 108                 <li class='text'>
 109                         <a href="#">Copy</a>
 110                 </li>
 111                 <li class='text'>
 112                         <a href="#">All</a>
 113                 </li>
 114                 <li class='text'>
 115                         <a href="#">Paste</a>
 116                 </li>
 117         </ul>
 118 </div>
 119 <br>
 120 <br>
 121
 122 <a href="#pop_text_only" id="btn_text_only" data-role="button" data-inline="true" data-rel="popupwindow">Text Only</a>
 123
 124 <div id="pop_text_only" data-role="popupwindow" data-show-arrow="true">
 125         <ul data-role="listview">
 126                 <li>
 127                         <a href="http://www.naver.com">www.naver.com</a>
 128                 </li>
 129                 <li>
 130                         <a href="http://www.naver.com">www.naver.com</a>
 131                 </li>
 132                 <li>
 133                         <a href="http://www.samsung.com">www.samsung.com</a>
 134                 </li>
 135                 <li>
 136                         <a href="http://www.apple.com">www.apple.com</a>
 137                 </li>
 138         </ul>
 139 </div>
 140 <br>
 141 <br>
 142
 143 <!-- target button -->
 144 <a href="#pop_buttons" id="btn_buttons" data-role="button" data-inline="true" data-rel="popupwindow">Buttons</a>
 145 <!-- context popup -->
 146 <div id="pop_buttons" class="button" data-role="popupwindow" data-show-arrow="true">
 147         <div>
 148                 <table>
 149                         <tr>
 150                                 <td>
 151                                         <a href="#" data-role="button">Meenie</a>
 152                                 </td>
 153                                 <td>
 154                                         <a href="#" data-role="button">Mynie</a>
 155                                 </td>
 156                                 <td>
 157                                         <a href="#" data-role="button">Mo</a>
 158                                 </td>
 159                         </tr>
 160                         <tr>
 161                                 <td>
 162                                         <a href="#" data-role="button">Catch-a</a>
 163                                 </td>
 164                                 <td>
 165                                         <a href="#" data-role="button">Tiger</a>
 166                                 </td>
 167                                 <td>
 168                                         <a href="#" data-role="button">By-the</a>
 169                                 </td>
 170                         </tr>
 171                 </table>
 172         </div>
 173 </div>
 174
 175         </div>
 176         </div> <!-- /content -->
 177
 178 </div> <!-- /page -->