jQuery Mobile中表单的使用体会

Posted 2020-09-01 cooldream2009

jQuery Mobile是手机端（移动端）页面制作用的框架，包括CSS和javascript，此处简单总结一下表单的书写，主要涉及CSS部分。框架提供了表单的一些样式，但在实际使用的时候，我们可能会用自己的自定义样式，这种情况下，框架提供的样式可能就不能满足我们的要求。今天项目中写登录页面的静态网页，碰到了几个问题，在这里和大家交流一下。

1 利用data-role=”none”

在使用表单的时候，如果想使用自定义样式，就可以表单元素上给data-role属性赋值none，意思就是不使用mobile框架提供的样式。

2 在input文本框前面加小图标

一般是用户名和密码的input框前面加一个代表用户和密码锁的小图标，这种情况在很多网站都用的比较普遍。mobile框架没有提供现成样式，需要我们自己写。

参考资料http://jingyan.baidu.com/article/925f8cb8c6763ac0dde056da.html

总体思想是把i标签和input标签放到一个div中，i标签负责前面的小图标显示（使用i标签是不成文的规则），后面的input正常输入用户名和密码。

html代码

<div class="inputbox">

<i class="userIcon"></i>

<input data-role="none" type="text" class="username"placeholder="用户名" />

</div>

css代码

. inputbox{ position: relative;padding-bottom: 10px;}

. userIcon{position: absolute;left: 10px;z-index:5;top: 15px;

background-image: url(../images/mobile_icon_user.png); /*引入图片图片*/

background-size: 80% 80%;/*调整图片的显示大小*/

background-repeat: no-repeat; /*设置图片不重复*/

background-position: 0px 0px; /*图片显示的位置*/

width: 26px; /*设置图片显示的宽*/

height: 28px; /*图片显示的高*/}

.username{padding: 5px 5px 5px 40px;width: 85%;height:40px;border-radius: 5px;border:2px solid #F2F0F0;}

里面的一些参数可以根据需要进行调整。

3 checkbox的大小设置和文字对齐

设置checkbox的大小使用zoom属性，值是相对值，文字的对齐和checkbox的大小以及文字的大小有关，需要自己根据需要摸索调整。

参考资料http://www.zhangxinxu.com/wordpress/2009/12/checkbox复选框的一些深入研究与理解/

示例代码

html代码

<div class="rememberPassword">                                   

<input type="checkbox" data-role="none" >&nbsp;记住密码

</div>

css代码

. rememberPassword {font-size: 0.8em;padding-top: 5px;}

. rememberPassword  input{margin-left:2px;width: 10%;border: none;vertical-align: middle;zoom: 150%;}

. rememberPassword input[type=checkbox] {display: inline-block;height: 0.8em;width: 0.8em;background: #FFFFFF;}

今天刚开始使用jQuery Mobile来写form表单，暂时发现的问题以及解决办法先整理这些，后面遇到问题再继续整理。