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 <span id="codeSample">
  90 Code Sample
  91 </span>
  92 <br>
  93 <br>
  94
  95 <!-- target button -->
  96 <a href="#pop_buttons" id="btn_buttons" data-role="button" data-inline="true" data-rel="popup">Buttons</a>
  97 <!-- context popup -->
  98 <div id="pop_buttons"  data-role="popup" >
  99         <ul data-role="listview">
 100                                 <li><a href="#">Meenie</a></li>
 101                                 <li><a href="#">Mynie</a></li>
 102                                 <li><a href="#">Mo</a></li>
 103         </ul>
 104  </div>
 105 <br>
 106 <br>
 107
 108 <a href="#pop_text_only" id="btn_text_only" data-role="button"  data-transition="flip" data-inline="true" data-rel="popup">Animation</a>
 109
 110 <div id="pop_text_only" data-role="popup" >
 111         <ul data-role="listview">
 112                 <li>
 113                         <a href="http://www.naver.com">www.naver.com</a>
 114                 </li>
 115                 <li>
 116                         <a href="http://www.naver.com">www.naver.com</a>
 117                 </li>
 118                 <li>
 119                         <a href="http://www.samsung.com">www.samsung.com</a>
 120                 </li>
 121                 <li>
 122                         <a href="http://www.apple.com">www.apple.com</a>
 123                 </li>
 124         </ul>
 125 </div>
 126 <br>
 127 <br>
 128 <a onclick="popupTest()" id="btn_text_only" data-role="button"  data-transition="flip" data-inline="true" data-rel="popup">MethodOpen</a>
 129 <br>
 130 <br>
 131 <a href="#closeTest" id="close_btn_buttons" data-role="button" data-inline="true" data-rel="popup">CloseTest</a>
 132 <div id="closeTest"  data-role="popup" >
 133         <ul data-role="listview">
 134                                 <li><a data-rel="back" href="#">Close</a></li>
 135                                 <li><a data-rel="back" onclick="closeTest()" href="#">Close/javascript</a></li>
 136         </ul>
 137  </div>
 138 <br>
 139 <br>
 140 </div>
 141 <a href="#positionOrigin" data-role="button" data-inline="true" data-rel="popup" data-position-to="#codeSample">Position to origin</a>
 142 <div data-role="popup" id="positionOrigin" class="ui-content" data-theme="d">
 143         <p style="color:white">I am positioned over the origin.</p>
 144 </div>
 145 </div> <!-- /content -->
 146
 147 <div data-role="footer">
 148         <a href="#slideView_pop" data-role="button" data-transition="slideup" data-icon="naviframe-more" data-rel="popup"></a>
 149         <div  id="slideView_pop" data-role="popup" data-show-arrow="true">
 150                 <ul data-role="listview" style="width:400px">
 151                 <li ><a id="manageFeedsViewBtn">4Manage feeds</a></li>
 152                 <li><a href="#settingView" id="viewbyBtn">Settings</a></li>
 153         </ul>
 154         </div>
 155 </div>
 156 </div> <!-- /page -->