demos/tizen-winsets/widgets/popupwindow/popup.html

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