widgets/popupwindow/popup.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>Tizen UI - 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
  22 <div data-role="page" id="popupwindow-demo" data-add-back-btn="true">
  23         <div data-role="header" data-position="fixed">
  24                 <h1>POPUP</h1>
  25         </div>
  26         <div class="content" data-role="content">
  27                 <ul data-role="listview" data-icon="1line-textonly">
  28                         <li data-role="list-divider">NORMAL SAMPLES</li>
  29                         <li><a href="#center_info" data-inline="true" data-rel="popup" data-position-to="window">Center info popup</a></li>
  30                         <li><a href="#center_title" data-inline="true" data-rel="popup" data-position-to="window">Center title popup</a></li>
  31                         <li><a href="#center_basic_1btn" data-inline="true" data-rel="popup" data-position-to="window">Center basic 1 button popup</a></li>
  32                         <li><a href="#center_basic_2btn" data-inline="true" data-rel="popup" data-position-to="window">Center basic 2 button popup</a></li>
  33                         <li><a href="#center_basic_3btn" data-inline="true" data-rel="popup" data-position-to="window">Center basic 3 button popup</a></li>
  34                         <li><a href="#center_title_1btn" data-inline="true" data-rel="popup" data-position-to="window">Center title 1 button popup</a></li>
  35                         <li><a href="#center_title_2btn" data-inline="true" data-rel="popup" data-position-to="window">Center title 2 button popup</a></li>
  36                         <li><a href="#center_title_3btn" data-inline="true" data-rel="popup" data-position-to="window">Center title 3 button popup</a></li>
  37                         <li><a href="#center_button_vertical" data-inline="true" data-rel="popup" data-position-to="window">Center_button vertical</a></li>
  38                         <li><a href="#center_checkbox" data-inline="true" data-rel="popup" data-position-to="window">Center_checkbox</a></li>
  39                         <li><a href="#center_liststyle_1btn" data-inline="true" data-rel="popup" data-position-to="window">Center_list style 1 button popup</a></li>
  40                         <li><a href="#center_liststyle_2btn" data-inline="true" data-rel="popup" data-position-to="window">Center_list style 2 button popup</a></li>
  41                         <li><a href="#center_liststyle_3btn" data-inline="true" data-rel="popup" data-position-to="window">Center_list style 3 button popup</a></li>
  42                         <li id="go_textbox_popup"><a href="#textbox_popup" data-inline="true" data-rel="popup" data-position-to="window">Popup has textbox</a></li>
  43                         <li><a href="#positionWindow" data-rel="popup" data-position-to="window">Position</a></li>
  44                 </ul>
  45
  46                 <!-- Center info Popup -->
  47                 <div id="center_info" data-role="popup" class="center_info">
  48                         <div class="ui-popup-text"> <p>
  49                                 Pop-up dialog box, a child
  50                                 window that blocks user inter-
  51                                 act to the parent windows
  52                         </p></div>
  53                 </div>
  54
  55                 <!-- Center title Popup -->
  56                 <div id="center_title" data-role="popup" class="center_title">
  57                         <div class="ui-popup-title">
  58                                 <h1>Popup title</h1>
  59                         </div>
  60                         <div class="ui-popup-text">
  61                                 Pop-up dialog box, a child
  62                                 window that blocks user interact
  63                                 to the parent windows
  64                         </div>
  65                 </div>
  66
  67                 <!-- Center basic 1 button popup -->
  68                 <div id="center_basic_1btn" data-role="popup" class="center_basic_1btn">
  69                         <div class="ui-popup-text">
  70                                 Pop-up dialog box, a child
  71                                 window that blocks user interact
  72                                 to the parent windows
  73                         </div>
  74                         <div class="ui-popup-button-bg">
  75                                 <a data-role="button" data-rel="back" data-inline="true">Button</a>
  76                         </div>
  77                 </div>
  78
  79                 <!-- Center basic 2 button popup -->
  80                 <div id="center_basic_2btn" data-role="popup" class="center_basic_2btn">
  81                         <div class="ui-popup-text">
  82                                 Pop-up dialog box, a child
  83                                 window that blocks user interact
  84                                 to the parent windows
  85                         </div>
  86                         <div class="ui-popup-button-bg">
  87                                 <a data-role="button" data-rel="back" data-inline="true">Button1</a>
  88                                 <a data-role="button" data-rel="back" data-inline="true">Button2</a>
  89                         </div>
  90                 </div>
  91
  92                 <!-- Center basic 3 button popup -->
  93                 <div id="center_basic_3btn" data-role="popup" class="center_basic_3btn">
  94                         <div class="ui-popup-text">
  95                                 Pop-up dialog box, a child
  96                                 window that blocks user interact
  97                                 to the parent windows
  98                         </div>
  99                         <div class="ui-popup-button-bg">
 100                                         <a data-role="button" data-rel="back" data-inline="true">1</a>
 101                                         <a data-role="button" data-rel="back" data-inline="true">2</a>
 102                                         <a data-role="button" data-rel="back" data-inline="true">3</a>
 103                         </div>
 104                 </div>
 105
 106                 <!-- Center title 1 button popup -->
 107                 <div id="center_title_1btn" data-role="popup" class="center_title_1btn">
 108                         <div class="ui-popup-title">
 109                                 <h1>Popup title</h1>
 110                         </div>
 111                         <div class="ui-popup-text">
 112                                 Pop-up dialog box, a child
 113                                 window that blocks user interact
 114                                 to the parent windows
 115                         </div>
 116                         <div class="ui-popup-button-bg">
 117                                 <a data-role="button" data-rel="back" data-inline="true">Button</a>
 118                         </div>
 119                 </div>
 120
 121                 <!-- Center title 2 button popup -->
 122                 <div id="center_title_2btn" data-role="popup" class="center_title_2btn">
 123                         <div class="ui-popup-title">
 124                                 <h1>Popup title</h1>
 125                         </div>
 126                         <div class="ui-popup-text">
 127                                 Pop-up dialog box, a child
 128                                 window that blocks user interact
 129                                 to the parent windows
 130                         </div>
 131                         <div class="ui-popup-button-bg">
 132                                 <a data-role="button" data-rel="back" data-inline="true">Button1</a>
 133                                 <a data-role="button" data-rel="back" data-inline="true">Button2</a>
 134                         </div>
 135                 </div>
 136
 137                 <!-- Center title 3 button popup -->
 138                 <div id="center_title_3btn" data-role="popup" class="center_title_3btn">
 139                         <div class="ui-popup-title">
 140                                 <h1>Popup title</h1>
 141                         </div>
 142                         <div class="ui-popup-text">
 143                                 Pop-up dialog box, a child
 144                                 window that blocks user interact
 145                                 to the parent windows
 146                         </div>
 147                         <div class="ui-popup-button-bg">
 148                                 <a data-role="button" data-rel="back" data-inline="true">1</a>
 149                                 <a data-role="button" data-rel="back" data-inline="true">2</a>
 150                                 <a data-role="button" data-rel="back" data-inline="true">3</a>
 151                         </div>
 152                 </div>
 153
 154                 <!-- Center button vertical -->
 155                 <div id="center_button_vertical" data-role="popup" class="center_button_vertical">
 156                         <div class="ui-popup-text">
 157                                 File 01.jpg
 158                                 already in use
 159                         </div>
 160                         <div class="ui-popup-button-bg">
 161                                 <a data-role="button" data-rel="back" data-inline="true">Rename</a>
 162                                 <a data-role="button" data-rel="back" data-inline="true">Replace</a>
 163                                 <a data-role="button" data-rel="back" data-inline="true">Cancel</a>
 164                         </div>
 165                 </div>
 166
 167                 <!-- popup checkbox  -->
 168                 <div id="center_checkbox" data-role="popup" class="center_checkbox">
 169                         <div class="ui-popup-text">
 170                                 Use packet data must
 171                                 be enabled to access
 172                                 data service.
 173                                 Change settings?
 174                         </div>
 175                         <div class="ui-popup-check-bg">
 176                                 <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
 177                                 <label for="checkbox-1">Don't ask again</label>
 178                         </div>
 179                         <div class="ui-popup-button-bg">
 180                                 <a data-role="button" data-rel="back" data-inline="true">Rename</a>
 181                                 <a data-role="button" data-rel="back" data-inline="true">Replace</a>
 182                         </div>
 183                 </div>
 184
 185                 <!-- popup liststyle 1 button -->
 186                 <div id="center_liststyle_1btn" data-role="popup" class="center_liststyle_1btn">
 187                         <div class="ui-popup-title">
 188                                 <h1>Popup title</h1>
 189                         </div>
 190                         <div class="ui-popup-scroller-bg" data-scroll="y">
 191                                 <ul data-role="listview" data-icon="1line-textonly">
 192                                         <li><a href="#">List item 1</a></li>
 193                                         <li><a href="#">List item 2</a></li>
 194                                         <li><a href="#">List item 3</a></li>
 195                                         <li><a href="#">List item 4</a></li>
 196                                         <li><a href="#">List item 5</a></li>
 197                                         <li><a href="#">List item 6</a></li>
 198                                         <li><a href="#">List item 7</a></li>
 199                                         <li><a href="#">List item 8</a></li>
 200                                         <li><a href="#">List item 9</a></li>
 201                                 </ul>
 202                         </div>
 203                         <div class="ui-popup-button-bg">
 204                                 <a data-role="button" data-rel="back" data-inline="true">Cancel</a>
 205                         </div>
 206                 </div>
 207
 208                 <!-- popup liststyle 2 button -->
 209                 <div id="center_liststyle_2btn" data-role="popup" class="center_liststyle_2btn">
 210                         <div class="ui-popup-title">
 211                                 <h1>Popup title</h1>
 212                         </div>
 213                         <div class="ui-popup-scroller-bg" data-scroll="y">
 214                                 <ul data-role="listview" data-icon="1line-textonly">
 215                                         <li><a href="#">List item 1</a></li>
 216                                         <li><a href="#">List item 2</a></li>
 217                                         <li><a href="#">List item 3</a></li>
 218                                         <li><a href="#">List item 4</a></li>
 219                                         <li><a href="#">List item 5</a></li>
 220                                         <li><a href="#">List item 6</a></li>
 221                                         <li><a href="#">List item 7</a></li>
 222                                         <li><a href="#">List item 8</a></li>
 223                                         <li><a href="#">List item 9</a></li>
 224                                 </ul>
 225                         </div>
 226                         <div class="ui-popup-button-bg">
 227                                 <a data-role="button" data-rel="back" data-inline="true">Ok</a>
 228                                 <a data-role="button" data-rel="back" data-inline="true">Cancel</a>
 229                         </div>
 230                 </div>
 231
 232                 <!-- popup liststyle 3 button -->
 233                 <div id="center_liststyle_3btn" data-role="popup" class="center_liststyle_3btn">
 234                         <div class="ui-popup-title">
 235                                 <h1>Popup title</h1>
 236                         </div>
 237                         <div class="ui-popup-scroller-bg" data-scroll="y">
 238                                 <ul data-role="listview" data-icon="1line-textonly">
 239                                         <li><a href="#">List item 1</a></li>
 240                                         <li><a href="#">List item 2</a></li>
 241                                         <li><a href="#">List item 3</a></li>
 242                                         <li><a href="#">List item 4</a></li>
 243                                         <li><a href="#">List item 5</a></li>
 244                                         <li><a href="#">List item 6</a></li>
 245                                         <li><a href="#">List item 7</a></li>
 246                                         <li><a href="#">List item 8</a></li>
 247                                         <li><a href="#">List item 9</a></li>
 248                                 </ul>
 249                         </div>
 250                         <div class="ui-popup-button-bg">
 251                                 <a data-role="button" data-rel="back" data-inline="true">1</a>
 252                                 <a data-role="button" data-rel="back" data-inline="true">2</a>
 253                                 <a data-role="button" data-rel="back" data-inline="true">3</a>
 254                         </div>
 255                 </div>
 256
 257                 <!-- textbox popup -->
 258                 <div id="textbox_popup" data-role="popup" class="center_title_2btn">
 259                         <div class="ui-popup-title">
 260                                 <h1>PopupTest<h1>
 261                         </div>
 262                         <div class="ui-popup-text">
 263                                 <input type="text" size="20" />
 264                                 <input type="text" size="20" />
 265                         </div>
 266                         <div class="ui-popup-button-bg">
 267                                 <a data-role="button" data-rel="back" data-inline="true">OK</a>
 268                                 <a data-role="button" id="btn_textbox_popup_cancel" data-inline="true">Cancel</a>
 269                         </div>
 270                 </div>
 271
 272                 <div id="textbox_popup_landscape" data-role="popup" class="center_info">
 273                        <div class="ui-popup-text"> <p>
 274                                 Not enough area. disable scrollview to use entry popup in landscape mode.
 275                         </p></div>
 276                 </div>
 277
 278                 <div data-role="popup" id="positionWindow">
 279                         <p>I am positioned to the window.</p>
 280                 </div>
 281
 282         </div> <!-- /content -->
 283         <script src="popupwindow.js"></script>
 284         <div data-role="footer">
 285         </div>
 286 </div> <!-- /page -->
 287
 288 </body>
 289 </html>