Lezione #id-jqmobile-2013-0010#
JQuery mobile ci permette di arricchire di nuove funzioni tutti gli elementi tipici di un form.
ATTENZIONE: gli id che identificano gli elementi dei form devono essere univoci, non solo all’interno della pagina, ma in tutto il sito. Questo è necessario perchè JQuery Mobile permette di inserire contemporaneamente più pagine all’interno dello stesso DOM. La navigazione AJAX viene gestita in modo differente rispetto ad HTML5 standard.
Qui sotto un pò di codice raccolto dal sito ufficiale già pronto da copiare ed incollare 
Ecco il listato della pagina linkata sopra:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 | <!DOCTYPE html><html><head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.mobile-1.3.2.min.js"></script></head><body><div data-role="page" id="one"> <div data-role="header"> <h1>Page one</h1> </div><!-- /header --> <div data-role="content"> <label for="textinput-2">Text Input:</label><input name="textinput-2" id="textinput-2" placeholder="Text input" value="" type="text"><label for="search-2">Search Input:</label><input name="search-2" id="search-2" value="" type="search"><label for="textarea-2">Textarea:</label><textarea cols="40" rows="8" name="textarea-2" id="textarea-2">Textarea</textarea><label for="select-native-2">Native select:</label><select name="select-native-2" id="select-native-2"> <option value="small">One</option> <option value="medium">Two</option> <option value="large">Three</option></select><label for="select-multiple-2">Custom multiple select:</label><select multiple="multiple" data-native-menu="false" name="select-multiple-2" id="select-multiple-2"> <option value="">Choices:</option> <option value="small">One</option> <option value="medium">Two</option> <option value="large">Three</option></select><fieldset data-role="controlgroup"> <legend>Vertical controlgroup, buttons:</legend> <button data-icon="home" data-iconpos="right">One</button> <input data-icon="back" data-iconpos="right" value="Two" type="button"> <a href="#" data-role="button" data-icon="grid" data-iconpos="right">Three</a></fieldset><fieldset data-role="controlgroup" data-type="horizontal"> <legend>Horizontal controlgroup, buttons:</legend> <button data-icon="home" data-iconpos="right">One</button> <input data-icon="back" data-iconpos="right" value="Two" type="button"> <a href="#" data-role="button" data-icon="grid" data-iconpos="right">Three</a></fieldset><fieldset data-role="controlgroup"> <legend>Vertical controlgroup, select:</legend> <label for="select-v-2a">Select A</label> <select name="select-v-2a" id="select-v-2a"> <option value="#">One</option> <option value="#">Two</option> <option value="#">Three</option> </select> <label for="select-v-2b">Select B</label> <select name="select-v-2b" id="select-v-2b"> <option value="#">One</option> <option value="#">Two</option> <option value="#">Three</option> </select> <label for="select-v-2c">Select C</label> <select name="select-v-2c" id="select-v-2c"> <option value="#">One</option> <option value="#">Two</option> <option value="#">Three</option> </select></fieldset><fieldset data-role="controlgroup" data-type="horizontal"> <legend>Horizontal controlgroup, select:</legend> <label for="select-h-2a">Select A</label> <select name="select-h-2a" id="select-h-2a"> <option value="#">One</option> <option value="#">Two</option> <option value="#">Three</option> </select> <label for="select-h-2b">Select B</label> <select name="select-h-2b" id="select-h-2b"> <option value="#">One</option> <option value="#">Two</option> <option value="#">Three</option> </select> <label for="select-h-2c">Select C</label> <select name="select-h-2c" id="select-h-2c"> <option value="#">One</option> <option value="#">Two</option> <option value="#">Three</option> </select></fieldset><fieldset data-role="controlgroup" data-type="horizontal"> <legend>Horizontal controlgroup, mixed:</legend> <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Link</a> <button data-icon="grid" data-iconpos="notext">Button</button> <label for="select-v-2e">Select</label> <select name="select-v-2e" id="select-v-2e"> <option value="#">One</option> <option value="#">Two</option> <option value="#">Three</option> </select></fieldset><p>Slider:</p><label for="slider-2">Slider:</label><input name="slider-2" id="slider-2" value="50" min="0" max="100" data-highlight="true" type="range"><div data-role="rangeslider"> <label for="range-1a">Rangeslider:</label> <input name="range-1a" id="range-1a" min="0" max="100" value="40" type="range"> <label for="range-1b">Rangeslider:</label> <input name="range-1b" id="range-1b" min="0" max="100" value="80" type="range"></div><label for="flip-2">Flip toggle:</label><select name="flip-2" id="flip-2" data-role="slider"> <option value="off">Off</option> <option value="on">On</option></select><fieldset data-role="controlgroup"> <legend>Single checkbox:</legend> <label for="checkbox-2">I agree</label> <input name="checkbox-2" id="checkbox-2" type="checkbox"></fieldset><fieldset data-role="controlgroup"> <legend>Vertical controlgroup, checkbox:</legend> <input name="checkbox-v-2a" id="checkbox-v-2a" type="checkbox"> <label for="checkbox-v-2a">One</label> <input name="checkbox-v-2b" id="checkbox-v-2b" type="checkbox"> <label for="checkbox-v-2b">Two</label> <input name="checkbox-v-2c" id="checkbox-v-2c" type="checkbox"> <label for="checkbox-v-2c">Three</label></fieldset><fieldset data-role="controlgroup"> <legend>Vertical controlgroup, radio:</legend> <input name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked" type="radio"> <label for="radio-choice-v-2a">One</label> <input name="radio-choice-v-2" id="radio-choice-v-2b" value="off" type="radio"> <label for="radio-choice-v-2b">Two</label> <input name="radio-choice-v-2" id="radio-choice-v-2c" value="other" type="radio"> <label for="radio-choice-v-2c">Three</label></fieldset><fieldset data-role="controlgroup" data-type="horizontal"> <legend>Horizontal controlgroup, checkbox:</legend> <input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox"> <label for="checkbox-h-2a">One</label> <input name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox"> <label for="checkbox-h-2b">Two</label> <input name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox"> <label for="checkbox-h-2c">Three</label></fieldset><fieldset data-role="controlgroup" data-type="horizontal"> <legend>Horizontal controlgroup, radio:</legend> <input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio"> <label for="radio-choice-h-2a">One</label> <input name="radio-choice-h-2" id="radio-choice-h-2b" value="off" type="radio"> <label for="radio-choice-h-2b">Two</label> <input name="radio-choice-h-2" id="radio-choice-h-2c" value="other" type="radio"> <label for="radio-choice-h-2c">Three</label></fieldset><label for="submit-2">Send:</label><button type="submit" id="submit-2">Submit</button> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --></body></html> |
