jquery-mobile表单的创建方法详解

前端之家收集整理的这篇文章主要介绍了jquery-mobile表单的创建方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jquery-mobile表单的创建方法分享给大家供大家参考,具体如下:

一、注意事项

1.

元素必须设置 method 和 action 属性

2. 每个表单元素必须设置唯一的 "id" 属性

该 id 在站点页面中必须是唯一的。

这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。

3. 每个表单元素必须有一个标记(label)。

请设置 label 的 for 属性来匹配元素的 id。

二、各种属性的使用

【文本框】

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

如果不希望使用 jquery-mobile的样式

搜索框】

加上data-role="fieldcontain" 一行 不加每个标签一行

【单选框】

请选择您的性别:

【复选框】

请选择您喜爱的颜色:

[注意]:单复选水平分组

可在fieldset 标签添加属性

预选某个按钮 可以使用:

input 的 checked

【选择菜单

普通选择菜单,有点丑

自定义选择菜单

使用属性

【多选菜单

需要使用自定义

【滑动条】

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

【翻转切换开关】

默认选中可加 selected

颜色主题

主题样式】

a 默认。黑色背景上的白色文本。 b 蓝色背景上的白色文本 / 灰色背景上的黑色文本 c 亮灰色背景上的黑色文本 d 白色背景上的黑色文本 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,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,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}

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

猜你在找的jQuery相关文章