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