绪上

一、注意事项
1.
元素必须设置 method 和 action 属性
2. 每个表单元素必须设置唯一的 id 属性。
该 id 在站点的页面中必须是唯一的。
这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。
3. 每个表单元素必须有一个标记（label）。
请设置 label 的 for 属性来匹配元素的 id。
二、各种属性的使用

【文本框】

data-role=fieldcontain 大于480px 自动与label 同到一行

姓： 名：

如果不希望使用 jquery-mobile的样式
data-role=none

【搜索框】
加上data-role=fieldcontain 一行 不加每个标签一行


Search:


【单选框】



请选择您的性别： 男性 女性
【复选框】



请选择您喜爱的颜色： 红色 vcolor" type="checkbox" value="red" /> 绿色 蓝色
[注意]：单复选水平分组
可在fieldset 标签中添加属性
data-type=horizontal
预选某个按钮 可以使用：
input 的 checked

【选择菜单】

普通选择菜单，有点丑


选择日期 星期一 星期二 星期三

自定义选择菜单
使用属性：data-native-menu=false

选择天 星期一 星期二 星期三 星期四 星期五 星期六 星期日
【多选菜单】
需要使用自定义的
multiple=multiple
data-native-menu=false


您可以选择多天： 天 星期一 星期二 星期三 星期四 星期五 星期六 星期日
【滑动条】

Points:

max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

Points:

【翻转切换开关】
data-role=slider
默认选中可加 selected

Toggle Switch: On Off

-----颜色主题------

【主题样式】

a 默认。黑色背景上的白色文本。
b 蓝色背景上的白色文本 / 灰色背景上的黑色文本
c 亮灰色背景上的黑色文本
d 白色背景上的黑色文本
e 橙色背景上的黑色文本
一般情况下 使用上面的颜色 可以直接使用属性
data-theme=e
如果要改变对话框(遮罩)的背景色
data-overlay-theme=e （放在page上）
改变可折叠的背景颜色
data-theme=b data-content-theme=e （放在collapsible）
主题划分按钮
data-split-theme=e （放在 listview）
【添加新样式】



/*为工具条添加样式*/
改变背景色 需要改俩个地方：background 和 background-image
.ui-bar-f{border:1px solid #333;
background:#f00;
color:#fff;font-weight:700;
text-shadow:0 -1px 0 #000;
background-image:-webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#111));
background-image:-webkit-linear-gradient(#3c3c3c,#111);
background-image:-moz-linear-gradient(#3c3c3c,#111);
background-image:-ms-linear-gradient(#3c3c3c,#111);
background-image:-o-linear-gradient(#3c3c3c,#111);
background-image:linear-gradient(#3c3c3c,#111)
}
.ui-bar-f,.ui-bar-f input,.ui-bar-f select,.ui-bar-f textarea,.ui-bar-f button{font-family:Helvetica,Arial,sans-serif}
.ui-bar-f .ui-link-inherit{color:#fff}
.ui-bar-f a.ui-link{color:#7cc4e7;font-weight:700}
.ui-bar-f a.ui-link:visited{color:#2489ce}
.ui-bar-f a.ui-link:hover{color:#2489ce}
.ui-bar-f a.ui-link:active{color:#2489ce}
/*为内容添加样式*/
.ui-body-f{font-weight:bold;color:purple;}
.ui-body-f,.ui-overlay-f{border:1px solid #444;
background:#222;color:#fff;
text-shadow:0 1px 0 #111;
font-weight:400;
background-image:-webkit-gradient(linear,left top,left bottom,from(#444),to(#222));
background-image:-webkit-linear-gradient(#444,#222);
background-image:-moz-linear-gradient(#444,#222);
background-image:-ms-linear-gradient(#444,#222);
background-image:-o-linear-gradient(#444,#222);
background-image:linear-gradient(#444,#222)
}
.ui-overlay-f{background-image:none;border-width:0}
.ui-body-f,.ui-body-f input,.ui-body-f select,.ui-body-f textarea,.ui-body-f button{font-family:Helvetica,Arial,sans-serif}
.ui-body-f .ui-link-inherit{color:#fff}
.ui-body-f .ui-link{color:#2489ce;font-weight:700}
.ui-body-f .ui-link:visited{color:#2489ce}
.ui-body-f .ui-link:hover{color:#2489ce}
.ui-body-f .ui-link:active{color:#2489ce}

本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: jQuery、星期六、

分页：12

转载请注明
本文标题：jquery-mobile 学习笔记之二（表单创建）
本站链接：
分享请点击：

1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。

登录后可拥有收藏文章、关注作者等权限...

   注册     登录