第四讲 Jquery Mobile中的表单和列表.pdf

第四讲Jquery Mobile 中的表单与列表 学习要点： 1. 表单 2. 列表 主讲教师：（树根） 合作网站：(PhoneGap 中文网) 一、 表单 1、 单行输入框 1.普通文本框： input type=text name=name id=basic value= / 2 ．只能输入数字的文本框Number + [0-9]* pattern: label for=number-patternNumber + [0-9]* pattern:/label input name=number pattern=[0-9]* id=number-pattern value= type=number 3.文件文本框 label for=fileFile:/label input name=file id=file value= type=file 4.密码文本框 label for=passwordPassword:/label input name=password id=password value= autocomplete=off type=password 5. 鼠标点击内容消失的文本框 label for=textinput-hide class=ui-hidden-accessibleText Input:/label input name=textinput-hide id=textinput-hide placeholder=Text input value= type=text 7.禁用的文本框 input disabled=disabled name=textinput-disabled id=textinput-disabled placeholder=Text input value= type=text 8. data-role=”fieldcontain”将表单（form ）元素一对一对的管理起来。 div data-role=fieldcontain label for=select-native-fcNative select:/label select name=select-native-fc id=select-native-fc option value=smallOne/option option value=mediumTwo/option option value=largeThree/option /select /div 9.data-role=none属性普通的样式在移动设备上显示 label for=foo select name=foo id=foo data-role=none option value=aA/option option value=bB/option option value=cC/option /select 10. number 类型 input name=number id=number value=0 type=number 2、 单行容器 div data-role=fieldcontain label for=nameText Input:/label input type=text name=name id=name value= / /div 3、多行输入框 div data-role=fieldcontain label for=textareaTextarea:/label textarea name=textarea id=textarea/textarea /div 4 、搜索输入框 div data-role=fieldcontain label for=search-2Search Input:/label input type=search name=search-2 id=search-2 value= / /div 5、滑块输入 1、普通滑块 div data-role=fieldcontain label for=slider-2Input slider:/label input type=range name=slider-2 id=slider-2 value=25 min=0 max=100