demos/tizen-winsets/widgets/ctxpopup.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
   5                 <script src="../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
   6                 <script src="../configure.js"></script>
   7                 <script src="../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
   8                 <script src="../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
   9                                 data-framework-theme="tizen-white"
  10                                 data-framework-viewport-width="device-width">
  11                 </script>
  12                 <script src="../main.js"></script>
  13                 <title>CONTEXTUAL POPUP</title>
  14
  15                 <!-- for compatibility test -->
  16                 <meta name="apple-mobile-web-app-capable" content="yes" />
  17                 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  18                 <link rel="apple-touch-icon" href="../icon-tizen.png" />
  19         </head>
  20         <body>
  21                 <div data-role="page" id="ctxpopup-demo" data-add-back-btn="true">
  22                         <div data-role="header" data-position="fixed">
  23                                 <h1>CONTEXT POPUP</h1>
  24                         </div>
  25                         <div class="content" data-role="content">
  26                                 <div>
  27                                         <!-- target button -->
  28                                         <a href="#pop_js" id="btn_js" data-role="button" data-inline="true" data-rel="popup">Touch me!</a>
  29                                         <!-- context popup -->
  30                                         <div id="pop_js" data-role="popup" >
  31                                                 <ul data-role="listview">
  32                                                         <li><a href="#" data-rel="back">Close</a></li>
  33                                                         <li><a href="#" data-rel="back" id="ctxpopup_update">Update Button Text</a></li>
  34                                                 </ul>
  35                                         </div>
  36                                         <br>
  37                                         <br>
  38
  39                                         <!-- target button -->
  40                                         <a href="#pop_icon_text" id="btn_icon_text" data-role="button" data-inline="true" data-rel="popup">Icon+Text</a>
  41                                         <!-- context popup -->
  42                                         <div id="pop_icon_text" data-role="popup" >
  43                                                 <ul data-role="listview">
  44                                                         <li class="ui-li-1line-bigicon1">
  45                                                                 <a href="#">
  46                                                                         <img class="ui-li-bigicon" src="test/ctxpopup_1.png">
  47                                                                         <span class="ui-li-text-main">Eenie</span>
  48                                                                 </a>
  49                                                         </li>
  50                                                         <li class="ui-li-1line-bigicon1">
  51                                                                 <a href="#">
  52                                                                         <img class="ui-li-bigicon" src="test/ctxpopup_2.png">
  53                                                                         <span class="ui-li-text-main">Meenie</span>
  54                                                                 </a>
  55                                                         </li>
  56                                                         <li class="ui-li-1line-bigicon1">
  57                                                                 <a href="#">
  58                                                                         <img class="ui-li-bigicon" src="test/ctxpopup_3.png">
  59                                                                         <span class="ui-li-text-main">Mynie</span>
  60                                                                 </a>
  61                                                         </li>
  62                                                         <li class="ui-li-1line-bigicon1">
  63                                                                 <a href="#">
  64                                                                         <img class="ui-li-bigicon" src="test/ctxpopup_4.png">
  65                                                                         <span class="ui-li-text-main">Mo</span>
  66                                                                 </a>
  67                                                         </li>
  68                                                 </ul>
  69                                         </div>
  70                                         <br>
  71                                         <br>
  72
  73                                         <a href="#pop_copy_paste" id="btn_copy_paste" data-role="button" data-inline="true" data-rel="popup">CopyPaste</a>
  74
  75                                         <div id="pop_copy_paste" data-role="popup" >
  76                                                 <ul data-role="listview">
  77                                                         <li class='text'>
  78                                                                 <a href="#">Copy</a>
  79                                                         </li>
  80                                                         <li class='text'>
  81                                                                 <a href="#">All</a>
  82                                                         </li>
  83                                                         <li class='text'>
  84                                                                 <a href="#">Paste</a>
  85                                                         </li>
  86                                                 </ul>
  87                                         </div>
  88                                         <br>
  89                                         <br>
  90
  91                                         <a href="#pop_text_only" id="btn_text_only1" data-role="button" data-inline="true" data-rel="popup">Text Only</a>
  92
  93                                         <div id="pop_text_only" data-role="popup" >
  94                                                 <ul data-role="listview">
  95                                                         <li>
  96                                                                 <a href="#">Menu1</a>
  97                                                         </li>
  98                                                         <li>
  99                                                                 <a href="#">Menu2</a>
 100                                                         </li>
 101                                                         <li>
 102                                                                 <a href="#">Menu3</a>
 103                                                         </li>
 104                                                         <li>
 105                                                                 <a href="#">Menu4</a>
 106                                                         </li>
 107                                                 </ul>
 108                                         </div>
 109                                         <br>
 110                                         <br>
 111                                         <span id="codeSample">
 112                                                 "Position to origin button" popup is located in this text
 113                                         </span>
 114                                         <br>
 115                                         <br>
 116
 117                                         <!-- target button -->
 118                                         <a href="#pop_buttons" id="btn_buttons" data-role="button" data-inline="true" data-rel="popup">Buttons</a>
 119                                         <!-- context popup -->
 120                                         <div id="pop_buttons"  data-role="popup" >
 121                                                 <ul data-role="listview">
 122                                                         <li><a href="#">Meenie</a></li>
 123                                                         <li><a href="#">Mynie</a></li>
 124                                                         <li><a href="#">Mo</a></li>
 125                                                 </ul>
 126                                         </div>
 127                                         <br>
 128                                         <br>
 129
 130                                         <a href="#pop_text_only" id="btn_text_only2" data-role="button"  data-transition="flip" data-inline="true" data-rel="popup">Animation</a>
 131
 132                                         <br>
 133                                         <br>
 134                                         <a id="btn_text_only3" data-role="button"  data-transition="flip" data-inline="true" data-rel="popup">MethodOpen</a>
 135                                         <br>
 136                                         <br>
 137                                         <a href="#closeTest" id="close_btn_buttons" data-role="button" data-inline="true" data-rel="popup">CloseTest</a>
 138                                         <div id="closeTest"  data-role="popup" >
 139                                                 <ul data-role="listview">
 140                                                         <li><a data-rel="back" href="#">Close</a></li>
 141                                                         <li><a data-rel="back" onclick="closeTest()" href="#">Close/javascript</a></li>
 142                                                 </ul>
 143                                         </div>
 144                                         <br>
 145                                         <br>
 146                                 </div>
 147                                 <a href="#positionOrigin" data-role="button" data-inline="true" data-rel="popup" data-position-to="#codeSample">Position to origin</a>
 148                                 <div data-role="popup" id="positionOrigin" class="ui-content" data-theme="d">
 149                                         <p style="color:white">I am positioned over the origin.</p>
 150                                 </div>
 151                                 <br>
 152                                 <br>
 153                                 <input type="button" data-inline="true" id="buttonPopup1" value="Open Popup - input type button"/>
 154                                 <br>
 155                                 <br>
 156                                 <div data-role="button" data-inline="true" id="buttonPopup2">Open Popup - div button</div>
 157                         </div> <!-- /content -->
 158
 159                         <div data-role="footer">
 160                                 <a href="#navi" data-role="button"  data-icon="naviframe-more" data-rel="popup"></a>
 161
 162                                 <div id="navi" data-role="popup" >
 163                                         <ul data-role="listview">
 164                                                 <li><a href="#" data-rel="back">Settings</a></li>
 165                                                 <li><a href="#" data-rel="back">Add to contact</a></li>
 166                                                 <li><a href="#" data-rel="back">Call log</a></li>
 167                                                 <li><a href="#" data-rel="back">Music</a></li>
 168                                         </ul>
 169                                 </div>
 170                         </div>
 171                         <script src="ctxpopup.js"></script>
 172                 </div> <!-- /page -->
 173         </body>
 174 </html>