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="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"  data-role="popup" >
  96         <ul data-role="listview">
  97                                 <li><a href="#">Meenie</a></li>
  98                                 <li><a href="#">Mynie</a></li>
  99                                 <li><a href="#">Mo</a></li>
 100         </ul>
 101  </div>
 102 <br>
 103 <br>
 104
 105 <a href="#pop_text_only" id="btn_text_only" data-role="button"  data-transition="flip" data-inline="true" data-rel="popup">Animation</a>
 106
 107 <div id="pop_text_only" data-role="popup" >
 108         <ul data-role="listview">
 109                 <li>
 110                         <a href="http://www.naver.com">www.naver.com</a>
 111                 </li>
 112                 <li>
 113                         <a href="http://www.naver.com">www.naver.com</a>
 114                 </li>
 115                 <li>
 116                         <a href="http://www.samsung.com">www.samsung.com</a>
 117                 </li>
 118                 <li>
 119                         <a href="http://www.apple.com">www.apple.com</a>
 120                 </li>
 121         </ul>
 122 </div>
 123 <br>
 124 <br>
 125 <a onclick="popupTest()" id="btn_text_only" data-role="button"  data-transition="flip" data-inline="true" data-rel="popup">MethodOpen</a>
 126 <br>
 127 <br>
 128 <a href="#closeTest" id="close_btn_buttons" data-role="button" data-inline="true" data-rel="popup">CloseTest</a>
 129 <div id="closeTest"  data-role="popup" >
 130         <ul data-role="listview">
 131                                 <li><a data-rel="back" href="#">Close</a></li>
 132                                 <li><a data-rel="back" onclick="closeTest()" href="#">Close/javascript</a></li>
 133         </ul>
 134  </div>
 135 <br>
 136 <br>
 137 </div>
 138 </div> <!-- /content -->
 139
 140 <div data-role="footer">
 141         <a href="#slideView_pop" data-role="button" data-transition="slideup" data-icon="naviframe-more" data-rel="popup"></a>
 142         <div  id="slideView_pop" data-role="popup" data-show-arrow="true">
 143                 <ul data-role="listview" style="width:400px">
 144                 <li ><a id="manageFeedsViewBtn">4Manage feeds</a></li>
 145                 <li><a href="#settingView" id="viewbyBtn">Settings</a></li>
 146         </ul>
 147         </div>
 148 </div>
 149 </div> <!-- /page -->