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