"Example 7-3 text edit box to make a simple questionnaire"
<! Doctypehtml>
Geneva
<metahttp-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<title> Questionnaire </title>
<metaname= "Viewport" content= "width=device-width,initial-scale=1" >
<linkrel= "stylesheet" href= "Http://code.jquery.com/mobile/latest/jquery.mobile.min.css"/>
<scriptsrc= "Http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<scriptsrc= "Http://code.jquery.com/mobile/latest/jquery.mobile.min.js" ></script>
Ten
<body>
<div data-role= "Page" >
<divdata-role= "Header" >
</div>
<divdata-role= "Content" >
<formaction= "#" method= "POST" >
<!--the contents of the placeholder property are grayed out in the edit box-
<inputtype= "text" name= "xingming" id= "xingming" placeholder= "Please enter your name:"/>
<!--when the value of DATA-CLEAR-BTN is true, when the edit box is selected-
<!--You can click the button on the right to empty the contents of the
<inputtype= "Tel" name= "Dianhua" id= "Dianhua" data-clear-btn= "true" Placehold Er= "Please enter your phone number:" >
<labelfor= "Adjust" > What do you think of this book? </label>
The <!-here uses textarea, not input-->.
<textareaname= "Adjust" id= "Adjust" ></textarea>
<!-is bound to textarea by the for property--
<labelfor= "where" > Where did you get this book, please? </label>
<!--use a label when you want to use the for property to point to the id--> of its corresponding control
<textareaname= "where" id= "where" ></textarea>
<ahref= "#" data-role= "button" > Submit </a>
</form>
</div>
</div>
</body>
Run result 7-4 as shown.
When you enter content in the edit box, the page changes, such as the text in the two edit boxes of the name and phone above the page disappears automatically, a "delete" icon appears on the right side of the edit box to fill in the phone information, and the contents of the edit box are automatically deleted. In addition, the contents of the two edit boxes below the page automatically increase the height as the number of rows in the content.
This is shown in page 7-5 after you fill in the data in the questionnaire. These changes are due to the fact that JQuery Mobile has set some properties for the text edit box, such as the content in the placeholder property, which is displayed when the edit box is not in use. When the user enters data in the edit box, the contents of the placeholder will automatically disappear.
Figure 7-4 Simple cell phone questionnaire Figure 7-5 fill in the content in the questionnaire
The new control textarea in this example can be thought of as a text-editing control that defines multiple lines of text, which automatically adjusts its height according to its content, and can also be resized by dragging.
Another reader may notice that in the Input telephone edit box, the author sets the type property of the space to Tel, which will automatically switch the input method to the numeric keypad when the user enters the content, so that the user can use it easily.
In addition, Jquerymobile provides some additional properties, which are listed in table 7-1 for the reader's reference.
Querymobile availability is getting higher, the entry threshold is low, and you can write less code to create a mobile-friendly interface. "Building cross-platform App:jquery Mobile mobile app" This book uses an instance-driven approach to introduce app development under Jquerymobile, which provides more than 70 practical cases to teach readers to develop mobile Finally, through 6 small projects to review and consolidate the knowledge points learned. To communicate with the author, add Q Group: 348632872, the author is here waiting for you to come.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
