demos/tizen-gray/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_info" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center info popup</a></li>
  21                         <li><a href="#center_title" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center title popup</a></li>
  22                         <li><a href="#center_basic_1btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center basic 1 button popup</a></li>
  23                         <li><a href="#center_basic_2btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center basic 2 button popup</a></li>
  24                         <li><a href="#center_basic_3btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center basic 3 button popup</a></li>
  25                         <li><a href="#center_title_1btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center title 1 button popup</a></li>
  26                         <li><a href="#center_title_2btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center title 2 button popup</a></li>
  27                         <li><a href="#center_title_3btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center title 3 button popup</a></li>
  28                         <li><a href="#center_button_vertical" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center_button vertical</a></li>
  29                         <li><a href="#center_checkbox" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center_checkbox</a></li>
  30                         <li><a href="#center_liststyle_1btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center_list style 1 button popup</a></li>
  31                         <li><a href="#center_liststyle_2btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center_list style 2 button popup</a></li>
  32                         <li><a href="#center_liststyle_3btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center_list style 3 button popup</a></li>
  33                 </ul>
  34
  35                 <!-- text only -->
  36                 <div id="center_info" data-role="popupwindow" data-style="center_info">
  37                         <div data-role="text"> <p>
  38                                 Pop-up dialog box, a child
  39                                 window that blocks user inter-
  40                                 act to the parent windows
  41                         </p></div>
  42                 </div>
  43
  44                 <!-- popup title-text -->
  45                 <div id="center_title" data-role="popupwindow" data-style="center_title">
  46                         <p data-role="title">
  47                                 Popup title
  48                         </p>
  49                         <p data-role="text">
  50                                 Pop-up dialog box, a child
  51                                 window that blocks user interact
  52                                 to the parent windows
  53                         </p>
  54                 </div>
  55
  56                 <!-- popup basic+text+1button -->
  57                 <div id="center_basic_1btn" data-role="popupwindow" data-style="center_basic_1btn">
  58                         <p data-role="text">
  59                                 Pop-up dialog box, a child
  60                                 window that blocks user interact
  61                                 to the parent windows
  62                         </p>
  63                         <div data-role="button-bg">
  64                                         <input type="button" value="Text Button" />
  65                         </div>
  66                 </div>
  67
  68                 <!-- popup basic+text+2button -->
  69                 <div id="center_basic_2btn" data-role="popupwindow" data-style="center_basic_2btn">
  70                         <p data-role="text">
  71                                 Pop-up dialog box, a child
  72                                 window that blocks user interact
  73                                 to the parent windows
  74                         </p>
  75                         <div data-role="button-bg">
  76                                         <input type="button" value="Text Button" />
  77                                         <input type="button" value="Text Button" />
  78                         </div>
  79                 </div>
  80
  81                 <!-- popup basic+text+3button -->
  82                 <div id="center_basic_3btn" data-role="popupwindow" data-style="center_basic_3btn">
  83                         <p data-role="text">
  84                                 Pop-up dialog box, a child
  85                                 window that blocks user interact
  86                                 to the parent windows
  87                         </p>
  88                         <div data-role="button-bg">
  89                                         <input type="button" value="Button1" />
  90                                         <input type="button" value="Button2" />
  91                                         <input type="button" value="Button3" />
  92                         </div>
  93                 </div>
  94
  95                 <!-- popup title+text+1button -->
  96                 <div id="center_title_1btn" data-role="popupwindow" data-style="center_title_1btn">
  97                         <p data-role="title">
  98                                 Popup title
  99                         </p>
 100                         <p data-role="text">
 101                                 Pop-up dialog box, a child
 102                                 window that blocks user interact
 103                                 to the parent windows
 104                         </p>
 105                         <div data-role="button-bg">
 106                                         <input type="button" value="Text Button" />
 107                         </div>
 108                 </div>
 109
 110                 <!-- popup title+text+2button -->
 111                 <div id="center_title_2btn" data-role="popupwindow" data-style="center_title_2btn">
 112                         <p data-role="title">
 113                                 Popup title
 114                         </p>
 115                         <p data-role="text">
 116                                 Pop-up dialog box, a child
 117                                 window that blocks user interact
 118                                 to the parent windows
 119                         </p>
 120                         <div data-role="button-bg">
 121                                         <input type="button" value="Text Button" />
 122                                         <input type="button" value="Text Button" />
 123                         </div>
 124                 </div>
 125
 126                 <!-- popup title+text+3button -->
 127                 <div id="center_title_3btn" data-role="popupwindow" data-style="center_title_3btn">
 128                         <p data-role="title">
 129                                 Popup title
 130                         </p>
 131                         <p data-role="text">
 132                                 Pop-up dialog box, a child
 133                                 window that blocks user interact
 134                                 to the parent windows
 135                         </p>
 136                         <div data-role="button-bg">
 137                                         <input type="button" value="Button1" />
 138                                         <input type="button" value="Button2" />
 139                                         <input type="button" value="Button3" />
 140                         </div>
 141                 </div>
 142
 143                 <!-- popup center_button_vertical -->
 144                 <div id="center_button_vertical" data-role="popupwindow" data-style="center_button_vertical">
 145                         <p data-role="text">
 146                                 File 01.jpg
 147                                 already in use
 148                         </p>
 149                         <div data-role="button-bg">
 150                                         <input type="button" value="Replace" />
 151                                         <input type="button" value="Rename" />
 152                                         <input type="button" value="Cancel" />
 153                         </div>
 154                 </div>
 155
 156                 <!-- popup checkbox  -->
 157                 <div id="center_checkbox" data-role="popupwindow" data-style="center_checkbox">
 158                         <p data-role="text">
 159                                 Use packet data must
 160                                 be enabled to access
 161                                 data service.
 162                                 Change settings?
 163                         </p>
 164                         <div data-role="check-bg">
 165                                 <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
 166                                 <label for="checkbox-1">Don't ask again</label>
 167                         </div>
 168                         <div data-role="button-bg">
 169                                         <input type="button" value="Text" />
 170                                         <input type="button" value="Text" />
 171                         </div>
 172                 </div>
 173
 174                 <!-- popup liststyle 1 button -->
 175                 <div id="center_liststyle_1btn" data-role="popupwindow" data-style="center_liststyle_1btn">
 176                         <p data-role="title">
 177                                 Popup title
 178                         </p>
 179                         <div data-role="scroller-bg">
 180                                 <ul data-role="listview" data-icon="1line-textonly" data-scroll="y">
 181                                         <li><a href="#">List item 1</a></li>
 182                                         <li><a href="#">List item 2</a></li>
 183                                         <li><a href="#">List item 3</a></li>
 184                                         <li><a href="#">List item 4</a></li>
 185                                         <li><a href="#">List item 5</a></li>
 186                                         <li><a href="#">List item 6</a></li>
 187                                         <li><a href="#">List item 7</a></li>
 188                                         <li><a href="#">List item 8</a></li>
 189                                         <li><a href="#">List item 9</a></li>
 190                                 </ul>
 191                         </div>
 192                         <div data-role="button-bg">
 193                                         <input type="button" value="Text Button" />
 194                         </div>
 195                 </div>
 196
 197                 <!-- popup liststyle 2 button -->
 198                 <div id="center_liststyle_2btn" data-role="popupwindow" data-style="center_liststyle_2btn">
 199                         <p data-role="title">
 200                                 Popup title
 201                         </p>
 202                         <div data-role="scroller-bg">
 203                                 <ul data-role="listview" data-icon="1line-textonly" data-scroll="y">
 204                                         <li><a href="#">List item 1</a></li>
 205                                         <li><a href="#">List item 2</a></li>
 206                                         <li><a href="#">List item 3</a></li>
 207                                         <li><a href="#">List item 4</a></li>
 208                                         <li><a href="#">List item 5</a></li>
 209                                         <li><a href="#">List item 6</a></li>
 210                                         <li><a href="#">List item 7</a></li>
 211                                         <li><a href="#">List item 8</a></li>
 212                                         <li><a href="#">List item 9</a></li>
 213                                 </ul>
 214                         </div>
 215                         <div data-role="button-bg">
 216                                         <input type="button" value="Text Button" />
 217                                         <input type="button" value="Text Button" />
 218                         </div>
 219                 </div>
 220
 221                 <!-- popup liststyle 3 button -->
 222                 <div id="center_liststyle_3btn" data-role="popupwindow" data-style="center_liststyle_3btn">
 223                         <p data-role="title">
 224                                 Popup title
 225                         </p>
 226                         <div data-role="scroller-bg">
 227                                 <ul data-role="listview" data-icon="1line-textonly" data-scroll="y">
 228                                         <li><a href="#">List item 1</a></li>
 229                                         <li><a href="#">List item 2</a></li>
 230                                         <li><a href="#">List item 3</a></li>
 231                                         <li><a href="#">List item 4</a></li>
 232                                         <li><a href="#">List item 5</a></li>
 233                                         <li><a href="#">List item 6</a></li>
 234                                         <li><a href="#">List item 7</a></li>
 235                                         <li><a href="#">List item 8</a></li>
 236                                         <li><a href="#">List item 9</a></li>
 237                                 </ul>
 238                         </div>
 239                         <div data-role="button-bg">
 240                                         <input type="button" value="Button" />
 241                                         <input type="button" value="Button" />
 242                                         <input type="button" value="Button" />
 243                         </div>
 244                 </div>
 245
 246         </div> <!-- /content -->
 247
 248 </div> <!-- /page -->
 249
 250 </body>
 251 </html>