jquerymobile框架中的表单组件基础使用教程_jquery

《jquerymobile框架中的表单组件基础使用教程_jquery》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、jQueryMobile框架中的表单组件基础使用教程一.表单组件基础1.组件简介jQueryMobile屮的表单组件是基于标准HTML,然后在此基础上增强样式，因此即使浏览器不支持jQueryMob订e表单仍可止常使用。需要注意的是，jQueryMobile会把表单元素增强为触摸设备很容易使用的形式，因此对于iphone/ipad与Android使用Web表单将会变得非常方便。jQueryMob订c的表单组件有以卜•几种：(1)文本输入框，type二〃text"标记的input元素会自动增强为jQue

2、ryMobile样式,无需额外添加data-role属性。(2)文木输入域，textarea元素会被自动增强，无需额外添加data-role属性，用于多行输入文本，jQueryMobile会自动增大文本域的高度，避免在移动设备中很难找到滚动条的情况。(3)搜索输入框，type二"search"标记的input元素会自动增强，无需额外添加data-role属性，这是一个新的HTML元素，增强后的输入框左边有一个放大镜图标，点击触发搜索，在输入内容后，输入框的右边还会出现一个叉的图标，点击清除已输入的内容

3、，非常方便。(4)单选按钮，type二〃radio"标记的input元素会门动增强，无需额外添加data-role属性。(5)复选按钮，type二〃checkbox"标记的input元素会自动增强,无需额夕卜添加data-role属性。(6)选择列表，select元索会被自动壇强，无需额外添加data-role属性。(7)划杆，type二〃remge"标记的input元素会口动增强，无需额外添加data-role属性。(8)开关,select元素添•加data-role二〃slider"属性后会被增强

4、会jQueryMob订e的开关组件，select中只能有两个option。2.组件使用规范所有的表单组件，只耍是需耍与服务器传送数据，都应该包裹在一个form标签内,并且应该指定好form的action和method属性。当然如果你使用的是WebSQLDatabase这类本地储存，即数据并不需要与服务器传送，可以不用form标签和sumbit提交。另外form的id需要在整站屮唯一，由于jQueryMobi1e使用Ajax导航，因此不同的page可以同时加载至!I一个D0M中,因此formid必须整站

5、唯一以保证每个D0M的表单id都是不同的。每一个表单元索应该要有相应的label对应，label的for值要与元索的id相同，使其在语义上相关，并且可以使用一个带有data-role=/，fieldcontain，/属性的div或fieldset容器包裹,jQueryMobile会自动在容器底部增加一条细边框作为分隔。二.表单组件详解1.文本输入框在jQueryMobile中,文本输入框和文本输入域都是使用标准HTML标记的,并且支持一些HTML5的input类型，如password,email,te

6、l,number,range等更多的类型,而对于一些类型(range,scrach)jQueryMobile则会将其转换为text的input类型,统一标准化其样式，下面是文本输入框的调用代码及示图。