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