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>
12 $(document).bind("pagecreate", function() {
13 $("#button-apply").bind("vclick", function() {
14 var options = {empty: true};
16 $("[data-setter]").each(function() {
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");
23 options.empty = false;
29 $("#sample-link,#sample-input-button,#sample-button").buttonMarkup(options);
43 <div data-role="page">
44 <div data-role="header">
45 <h1>jQuery Mobile Widget Option Tester</h1>
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>
52 <form id="button-settings" name="button-settings" action="#" method="get" style="display: table;">
54 <div data-role="fieldcontain">
55 <label for="button-icon">icon</label>
56 <input data-setter="true" type="text" id="button-icon"></input>
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>
64 <div data-role="fieldcontain">
65 <label for="button-iconpos">iconpos</label>
66 <input data-setter="true" type="text" id="button-iconpos"></input>
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>
74 <div data-role="fieldcontain">
75 <label for="button-theme">theme</label>
76 <input data-setter="true" type="text" id="button-theme"></input>
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>
84 <div data-role="fieldcontain">
85 <label for="button-inline">inline</label>
86 <input data-setter="true" type="checkbox" id="button-inline"></input>
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>
94 <div data-role="fieldcontain">
95 <label for="button-shadow">shadow</label>
96 <input data-setter="true" type="checkbox" id="button-shadow"></input>
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>
104 <div data-role="fieldcontain">
105 <label for="button-corners">corners</label>
106 <input data-setter="true" type="checkbox" id="button-corners"></input>
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>
114 <div data-role="fieldcontain">
115 <label for="button-iconshadow">iconshadow</label>
116 <input data-setter="true" type="checkbox" id="button-iconshadow"></input>
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>
125 <input type="button" name="button-apply" value="Apply" id="button-apply"></input>