Small white Learn jQuery mobile "building cross-platform App:jquery Mobile mobile app" Serial seven-mobile phone questionnaire

Source: Internet
Author: User

"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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.