jQuery Mobile中表单的使用体会
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" > 记住密码
</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表单,暂时发现的问题以及解决办法先整理这些,后面遇到问题再继续整理。
jQuery Mobile中表单的使用体会的更多相关文章
- jQuery Mobile 表单基础
jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...
- 通过AJAX和PHP,提交JQuery Mobile表单
File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo( ...
- (四)Jquery Mobile表单
Jquery Mobile表单与列表 一.JM表单 1.表单 普通html表单 效果: 2.只能输入数字的表单 效果: ...
- jquery mobile 表单提交 图片/文件 上传
jquerymobile 下面 form 表单提交 和普通html没区别,最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败 1 html代码 <!do ...
- Jquery Mobile表单
三个前提: 1.每个form必须设置method和action属性 2.每个form必须有页面范围内唯一的id标识 3.每个form必须有一个label标签,通过设置它的for属性来匹配元素的id & ...
- jQuery Mobile 表单输入元素
jQuery Mobile 文本输入 输入字段是通过标准的 HTML 元素编写的,jQuery Mobile 会为它们设置专门针对移动设备的美观易用的样式.您还可以使用新的 HTML5 <inp ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素
相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- Jquery ajax中表单提交被拦截的问题处理方法
在实际开发项目中,由于要做支付宝的批量退款处理,需要用到ajax中去提交表单数据,项目截图如下: 由于在第二张截图“确认退款”那里需要异步ajax提交数据到服务器处理信息,处理成功后将返回的数据装载到 ...
- jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
随机推荐
- CAShapLayer的使用1
1.添加橙色圆环 - (CAShapeLayer *)shapeLayer { if (!_shapeLayer) { _shapeLayer = [CAShapeLayer layer]; CGRe ...
- 西风 West Wind Html帮助构建器
https://helpbuilder.west-wind.com/ 示例文档: https://helpbuilder.west-wind.com/docs/_03101e5wp.htm
- Node.js 操作 OSX 系统麦克风、扬声器音量
最近几年 Electron 很火,公司也正好有个项目想做跨平台客户端,大家研究了一下就选择了 Electron,第一次做 js 的项目遇到了不少坑,不过也都一点点解决了. 因为项目中需要对用户录音,H ...
- main方法启动spring
main方式读取spring配置.main方法启动spring/ 有时候只想写一下简单的测试用一下. 新建一个maven项目 依赖pom <?xml version="1.0" ...
- SVM 实践步骤
主要公式步骤: 原距离问题的函数: 1.将SVM的距离问题转化为拉格朗日函数: 2.原函数问题化成如下问题: 3.对各非拉格朗日参数求偏导来求min值: 4.将上面 令各偏导等于0 的结果带回 拉 ...
- Linux学习之文件系统权限及表示
三类人 用户主(user:u):文件的所有者 同组人(group:g):与文件主同组的用户 其他人(other:o):除用户主和同组人外的其他所有人 三种权限 读权限(r):指用户对文件或目录的读许可 ...
- iOS 轻击、触摸和手势的检测
一.检测捏合手势( UIPinchGestureRecognizer): //设定一个实例变量存储手指之间的其起始距离 @property (assign, nonatomic) CGFloat i ...
- Interpreting NotifyCollectionChangedEventArgs zz
If you’ve ever consumed INotifyCollectionChanged.CollectionChanged, then you’ve run into some inadeq ...
- NOIP2008 立体图
题目描述 小渊是个聪明的孩子,他经常会给周围的小朋友们将写自己认为有趣的内容.最近,他准备给小朋友们讲解立体图,请你帮他画出立体图. 小渊有一块面积为m*n的矩形区域,上面有m*n个边长为1的格子,每 ...
- 锐捷交换机配置DHCP SERVER给固定的MAC地址分配静态IP
今天突发奇想,想给自己的手机分配固定地址,使得接入公司无线网络时每次都取到同一ip地址,这样可以排除认证登录问题. 上网溜达一下,记录下锐捷官方的[常见问题]如下,经验证可行. 需求: 给MAC地址为 ...