jquery-mobile 学习笔记之二(表单创建)

页面导航:首页 > 网络编程 > JavaScript > jquery-mobile 学习笔记之二(表单创建)

jquery-mobile 学习笔记之二(表单创建)

来源: 作者: 时间:2016-01-22 08:39 【

绪上一、注意事项1 元素必须设置 method 和 action 属性2 每个表单元素必须设置唯一的 id 属性。该 id 在站点的页面中必须是唯一的。这是因为 jQuery Mobile 的单页面导航模型允许许多不

绪上

 

一、注意事项

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 一行 不加每个标签一行

 

 


 

 

【单选框】

 

 


请选择您的性别:

 

【复选框】

 

 


请选择您喜爱的颜色:

[注意]:单复选水平分组
可在fieldset 标签中添加属性
data-type=horizontal


预选某个按钮 可以使用:
input 的 checked


 

【选择菜单】



普通选择菜单,有点丑

 

 


 

 

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

 



 

【多选菜单】

需要使用自定义的
multiple=multiple
data-native-menu=false

 

 



 

【滑动条】

 

 



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

 

 



 

【翻转切换开关】

data-role=slider


默认选中可加 selected

 

 



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


 

【主题样式】



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}


 

 

 

 


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<