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