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