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="#" data-rel="back">Close</a></li>
  13                 <li><a href="#" data-rel="back" 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="#">Menu1</a>
  77                 </li>
  78                 <li>
  79                         <a href="#">Menu2</a>
  80                 </li>
  81                 <li>
  82                         <a href="#">Menu3</a>
  83                 </li>
  84                 <li>
  85                         <a href="#">Menu4</a>
  86                 </li>
  87         </ul>
  88 </div>
  89 <br>
  90 <br>
  91 <span id="codeSample">
  92 "Position to origin button" popup is located in this text
  93 </span>
  94 <br>
  95 <br>
  96
  97 <!-- target button -->
  98 <a href="#pop_buttons" id="btn_buttons" data-role="button" data-inline="true" data-rel="popup">Buttons</a>
  99 <!-- context popup -->
 100 <div id="pop_buttons"  data-role="popup" >
 101         <ul data-role="listview">
 102                                 <li><a href="#">Meenie</a></li>
 103                                 <li><a href="#">Mynie</a></li>
 104                                 <li><a href="#">Mo</a></li>
 105         </ul>
 106  </div>
 107 <br>
 108 <br>
 109
 110 <a href="#pop_text_only" id="btn_text_only" data-role="button"  data-transition="flip" data-inline="true" data-rel="popup">Animation</a>
 111
 112 <div id="pop_text_only" data-role="popup" >
 113         <ul data-role="listview">
 114                 <li>
 115                         <a href="#">Menu1</a>
 116                 </li>
 117                 <li>
 118                         <a href="#">Menu2</a>
 119                 </li>
 120                 <li>
 121                         <a href="#">Menu3</a>
 122                 </li>
 123                 <li>
 124                         <a href="#">Menu4</a>
 125                 </li>
 126         </ul>
 127 </div>
 128 <br>
 129 <br>
 130 <a onclick="popupTest()" id="btn_text_only" data-role="button"  data-transition="flip" data-inline="true" data-rel="popup">MethodOpen</a>
 131 <br>
 132 <br>
 133 <a href="#closeTest" id="close_btn_buttons" data-role="button" data-inline="true" data-rel="popup">CloseTest</a>
 134 <div id="closeTest"  data-role="popup" >
 135         <ul data-role="listview">
 136                                 <li><a data-rel="back" href="#">Close</a></li>
 137                                 <li><a data-rel="back" onclick="closeTest()" href="#">Close/javascript</a></li>
 138         </ul>
 139  </div>
 140 <br>
 141 <br>
 142 </div>
 143 <a href="#positionOrigin" data-role="button" data-inline="true" data-rel="popup" data-position-to="#codeSample">Position to origin</a>
 144 <div data-role="popup" id="positionOrigin" class="ui-content" data-theme="d">
 145         <p style="color:white">I am positioned over the origin.</p>
 146 </div>
 147 <br>
 148 <br>
 149 <input type="button" data-inline="true"  onclick="popupTest()" value="Open Popup - input type button"/>
 150 <br>
 151 <br>
 152 <div data-role="button" "button" data-inline="true"  onclick="popupTest()">Open Popup - div button</div>
 153 </div> <!-- /content -->
 154
 155 <div data-role="footer">
 156         <a href="#navi" data-role="button"  data-icon="naviframe-more" data-rel="popup"></a>
 157
 158                 <div id="navi" data-role="popup" >
 159                 <ul data-role="listview">
 160                         <li><a href="#" data-rel="back">Settings</a></li>
 161                         <li><a href="#" data-rel="back">Add to contact</a></li>
 162                         <li><a href="#" data-rel="back">Call log</a></li>
 163                         <li><a href="#" data-rel="back">Music</a></li>
 164                         <li><a href="#" data-rel="back">File manager</a></li>
 165                         <li><a href="#" data-rel="back">Internal Link</a></li>
 166                 </ul>
 167                 </div>
 168 </div>
 169 </div> <!-- /page -->