文本输入框和文本输入域 Text inputs & Textareas
文本输入框和文本输入域是使用标准的html标记的,然后Jquery Mobile会让他们变得更吸引人而且易于触摸使用。查阅 data- attribute reference 来了解你可以给文本输入框添加的属性。
文本输入框 Text inputs
要使用标准字母数字的输入框,给input增加type="text"属性。注意要把label的for
属性设为input的id值,使他们能够在语义上相关联。如果在页面内不想看到label的话可
以隐藏label.
HTML 代码:
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
这样就创建了一个Text输入框。默认的样式是宽度为父容器的100%,label在另一行上。
文本输入框 Text Input:
你也可以用div容器包裹它们,并给他设定data-role="fieldcontain"属性,使他们在一个大的表单里在视觉上是成组的。
更多的文本输入类型 More text input types
在jquery mobile中,你可以使用现存的和新的HTML5输入类型比如 password, email, tel, number和更多的类型。有一些类型会在不同的浏览器被渲染成不用的样式-比如Chrome会将range输入框渲染成滑动条-所以我们通过把类型转为text来标准化他们的外观(目前只作用于range和search元素)。你可以用page插件的选项来配置那些被降级为text的输入框的表现。
使用这些特殊类型的输入框的好处是,在智能手机上不同的输入框对应的是不同的触摸键盘。
给input设置type="password"属性,可以设置为密码框,注意要把label的for属性设为input的id值,使他们能够在语义上相关联,并且要用div容器包裹它们,并给他设定data-role="fieldcontain"属性。
HTML 代码:
<div data-role="fieldcontain">
<label for="password">Password Input:</label>
<input type="password" name="password" id="password" value="" />
</div>
文本域 Textareas
对于多行输入可以使用textarea元素。Jquery Mobile框架会自动加大文本域的高度防止出现在移动设备中很难使用的滚动条的出现。
注意要把label的for属性设为input的id值,使他们能够在语义上相关联,并且要用div容器包裹它们,并给他设定data-role="fieldcontain"属性
HTML 代码:
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
文本域 Textareas
文本域 Textareas
这个插件会在包含有text输入框的任何页面自动初始化,不需要标记data-role属性,但是如果需要的话你可以在选择器上调用textinput插件。
HTML 代码:
$('input').textinput();
被降级的输入框类型 Degraded input types
jQuery Mobile降级了几种HTML5的几种输入类型为text型或者number型。比如range类型的输入框会被增强为自己定义的划动条,他们的类型会被设置为number,在划动条旁边会提供
一个number输入框使之可用。而SERACH输入框在我们给输入值添加主题后添加自己会被降级为text 。
page插件包含了一系列输入类型,当他们被设定为TRUE时意味着他们会被降级成为text类型,false意味着不处理他们,或者设为一个字符串比如"number",意味着他们会被转为该类型。
你也可以通过page插件的degradeInputs 选项来配置那些被改变的输入类型,即通过外部的$.mobile.page.prototype.options.degradeInputs 来操作,它包含的属性有color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, 和 week。
请确保把这个配置放于mobileinit绑定的事件处理的函数内,使得他能在页面加载的第一时间起作用。
text输入框拥有如下选项:
initSelector
css选择器
默认: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"
这个选项用来定义被自动初始化为输入框的选择器(元素类型,数据规则等)。如果要改变被初始化的元素,可以给mobileinit事件绑定这个选项:
HTML 代码:
$( document ).bind( "mobileinit", function(){
$.mobile.textinput.prototype.options.initSelector = ".myInputs";
});
theme
字符串
默认null, 继承父容器
给这个组件的所有实例设定颜色主题。接受从a-z的一个字母来映射你的主题。默认情况下,它继承父容器的相同主题。这个选项也可以通过data-theme="a"的属性来配置
HTML 代码:
$('.selector').textinput({ theme: "a" });
text输入框拥有如下方法:
enable
使一个输入框可用
HTML 代码:
$('.selector').textinput('enable');
disable
使一个输入框不可用
HTML 代码:
$('.selector').textinput('disable');
可以给input元素直接绑定事件,可以使用jQuery Mobile的虚拟事件,或者绑定JavaScript的标准事件,例如change, focus, blur等。
HTML 代码:
$( ".selector" ).bind( "change", function(event, ui) { ... });
create
当input 被创建时触发
HTML 代码:
$( ".selector" ).textinput({ create: function(event, ui) { ... } });