libs/js/jquery-mobile-1.1.0/tests/functional/button-markup.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         <title>jQuery Mobile Button Markup Tester</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
   9         <script src="../../js/jquery.tag.inserter.js"></script>
  10         <script src="../../js"></script>
  11 <script>
  12 $(document).bind("pagecreate", function() {
  13         $("#button-apply").bind("vclick", function() {
  14                 var options = {empty: true};
  15
  16                 $("[data-setter]").each(function() {
  17                         var self = $(this),
  18                             val = ($(this).is("[type='checkbox']") ? $(this).is(":checked") : $(this).val()),
  19                             key = $(this).parent().find("label").text(),
  20                             apply = $("#button-" + key + "-apply").is(":checked");
  21
  22                         if (apply) {
  23                                 options.empty = false;
  24                                 options[key] = val;
  25                         }
  26                 });
  27                 if (!options.empty) {
  28                         delete options.empty;
  29                         $("#sample-link,#sample-input-button,#sample-button").buttonMarkup(options);
  30                 }
  31         });
  32 });
  33 </script>
  34 <style>
  35 .ui-field-contain {
  36         margin-top: 0px;
  37         margin-bottom: 0px;
  38 }
  39 </style>
  40 </head>
  41
  42 <body>
  43         <div data-role="page">
  44                 <div data-role="header">
  45                         <h1>jQuery Mobile Widget Option Tester</h1>
  46                 </div>
  47                 <div data-role="contents">
  48                         <a id="sample-link" data-role="button">Sample Link</a>
  49                         <input id="sample-input-button" type="button" name="Input Button" value="Sample Input Button"></input>
  50                         <button id="sample-button" name="Button">Sample Button</button>
  51
  52                         <form id="button-settings" name="button-settings" action="#" method="get" style="display: table;">
  53                                 <table><tr><td>
  54                                         <div data-role="fieldcontain">
  55                                                 <label for="button-icon">icon</label>
  56                                                 <input data-setter="true" type="text" id="button-icon"></input>
  57                                         </div>
  58                                 </td><td>
  59                                         <div data-role="fieldcontain">
  60                                                 <label for="button-icon-apply">Apply</label>
  61                                                 <input data-apply="true" type="checkbox" id="button-icon-apply"></input>
  62                                         </div>
  63                                 </td></tr><tr><td>
  64                                         <div data-role="fieldcontain">
  65                                                 <label for="button-iconpos">iconpos</label>
  66                                                 <input data-setter="true" type="text" id="button-iconpos"></input>
  67                                         </div>
  68                                 </td><td>
  69                                         <div data-role="fieldcontain">
  70                                                 <label for="button-iconpos-apply">Apply</label>
  71                                                 <input data-apply="true" type="checkbox" id="button-iconpos-apply"></input>
  72                                         </div>
  73                                 </td></tr><tr><td>
  74                                         <div data-role="fieldcontain">
  75                                                 <label for="button-theme">theme</label>
  76                                                 <input data-setter="true" type="text" id="button-theme"></input>
  77                                         </div>
  78                                 </td><td>
  79                                         <div data-role="fieldcontain">
  80                                                 <label for="button-theme-apply">Apply</label>
  81                                                 <input data-apply="true" type="checkbox" id="button-theme-apply"></input>
  82                                         </div>
  83                                 </td></tr><tr><td>
  84                                         <div data-role="fieldcontain">
  85                                                 <label for="button-inline">inline</label>
  86                                                 <input data-setter="true" type="checkbox" id="button-inline"></input>
  87                                         </div>
  88                                 </td><td>
  89                                         <div data-role="fieldcontain">
  90                                                 <label for="button-inline-apply">Apply</label>
  91                                                 <input data-apply="true" type="checkbox" id="button-inline-apply"></input>
  92                                         </div>
  93                                 </td></tr><tr><td>
  94                                         <div data-role="fieldcontain">
  95                                                 <label for="button-shadow">shadow</label>
  96                                                 <input data-setter="true" type="checkbox" id="button-shadow"></input>
  97                                         </div>
  98                                 </td><td>
  99                                         <div data-role="fieldcontain">
 100                                                 <label for="button-shadow-apply">Apply</label>
 101                                                 <input data-apply="true" type="checkbox" id="button-shadow-apply"></input>
 102                                         </div>
 103                                 </td></tr><tr><td>
 104                                         <div data-role="fieldcontain">
 105                                                 <label for="button-corners">corners</label>
 106                                                 <input data-setter="true" type="checkbox" id="button-corners"></input>
 107                                         </div>
 108                                 </td><td>
 109                                         <div data-role="fieldcontain">
 110                                                 <label for="button-corners-apply">Apply</label>
 111                                                 <input data-apply="true" type="checkbox" id="button-corners-apply"></input>
 112                                         </div>
 113                                 </td></tr><tr><td>
 114                                         <div data-role="fieldcontain">
 115                                                 <label for="button-iconshadow">iconshadow</label>
 116                                                 <input data-setter="true" type="checkbox" id="button-iconshadow"></input>
 117                                         </div>
 118                                 </td><td>
 119                                         <div data-role="fieldcontain">
 120                                                 <label for="button-iconshadow-apply">Apply</label>
 121                                                 <input data-apply="true" type="checkbox" id="button-iconshadow-apply"></input>
 122                                         </div>
 123                                 </td></tr>
 124                                 <tr><td colspan="2">
 125                                         <input type="button" name="button-apply" value="Apply" id="button-apply"></input>
 126                                 </td></tr></table>
 127                         </form>
 128                 </div>
 129         </div>
 130 </body>
 131 </html>