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="popup">Touch me!</a>
   9 <!-- context popup -->
  10 <div id="pop_js" data-role="popup" >
  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="popup">Icon+Text</a>
  21 <!-- context popup -->
  22 <div id="pop_icon_text" data-role="popup" >
  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 <a href="#pop_copy_paste" id="btn_copy_paste" data-role="button" data-inline="true" data-rel="popup">CopyPaste</a>
  54
  55 <div id="pop_copy_paste" data-role="popup" >
  56         <ul data-role="listview">
  57                 <li class='text'>
  58                         <a href="#">Copy</a>
  59                 </li>
  60                 <li class='text'>
  61                         <a href="#">All</a>
  62                 </li>
  63                 <li class='text'>
  64                         <a href="#">Paste</a>
  65                 </li>
  66         </ul>
  67 </div>
  68 <br>
  69 <br>
  70
  71 <a href="#pop_text_only" id="btn_text_only" data-role="button" data-inline="true" data-rel="popup">Text Only</a>
  72
  73 <div id="pop_text_only" data-role="popup" >
  74         <ul data-role="listview">
  75                 <li>
  76                         <a href="http://www.naver.com">www.naver.com</a>
  77                 </li>
  78                 <li>
  79                         <a href="http://www.naver.com">www.naver.com</a>
  80                 </li>
  81                 <li>
  82                         <a href="http://www.samsung.com">www.samsung.com</a>
  83                 </li>
  84                 <li>
  85                         <a href="http://www.apple.com">www.apple.com</a>
  86                 </li>
  87         </ul>
  88 </div>
  89 <br>
  90 <br>
  91
  92 <!-- target button -->
  93 <a href="#pop_buttons" id="btn_buttons" data-role="button" data-inline="true" data-rel="popup">Buttons</a>
  94 <!-- context popup -->
  95 <div id="pop_buttons" class="button" data-role="popup" >
  96         <div>
  97                 <table>
  98                         <tr>
  99                                 <td>
 100                                         <a href="#" data-role="button">Meenie</a>
 101                                 </td>
 102                                 <td>
 103                                         <a href="#" data-role="button">Mynie</a>
 104                                 </td>
 105                                 <td>
 106                                         <a href="#" data-role="button">Mo</a>
 107                                 </td>
 108                         </tr>
 109                         <tr>
 110                                 <td>
 111                                         <a href="#" data-role="button">Catch-a</a>
 112                                 </td>
 113                                 <td>
 114                                         <a href="#" data-role="button">Tiger</a>
 115                                 </td>
 116                                 <td>
 117                                         <a href="#" data-role="button">By-the</a>
 118                                 </td>
 119                         </tr>
 120                 </table>
 121         </div>
 122  </div>
 123
 124 <br>
 125 <br>
 126  <a href="#pop_text_only" id="btn_text_only" data-role="button"  data-transition="flip" data-inline="true" data-rel="popup">Animation</a>
 127
 128 <div id="pop_text_only" data-role="popup" >
 129         <ul data-role="listview">
 130                 <li>
 131                         <a href="http://www.naver.com">www.naver.com</a>
 132                 </li>
 133                 <li>
 134                         <a href="http://www.naver.com">www.naver.com</a>
 135                 </li>
 136                 <li>
 137                         <a href="http://www.samsung.com">www.samsung.com</a>
 138                 </li>
 139                 <li>
 140                         <a href="http://www.apple.com">www.apple.com</a>
 141                 </li>
 142         </ul>
 143 </div>
 144
 145         </div>
 146         </div> <!-- /content -->
 147
 148 </div> <!-- /page -->