jQuery Mobile 基础(第三章)

1、表单：

表单控件：

文本输入框
搜索输入框
单选按钮
复选框
选择菜单
滑动条
翻转拨动开关

fileld容器：
如需让标签和表单元素看起来更适应宽屏，请用带有 data-role="fieldcontain" 属性的 <div> 或 <fieldset> 元素包围 label/form 元素：

<form method="post" action="demoform.html">
<div data-role="fieldcontain">
<label for="fname">姓:</label>
<input type="text" name="fname" id="fname">
<label for="lname">名:</label>
<input type="text" name="lname" id="lname">
</div>>
</form>

为了防止 jQuery Mobile 为可点击元素自动添加样式，请使用 data-role="none" 属性：

当用户在有限数量的选择中仅选取一个选项时，使用单选按钮。

为了创建一系列单选按钮，请添加带有 type="radio" 的 input 以及相应的 label。把单选按钮包围在 <fieldset> 元素内。您也可以添加一个 <legend> 元素来定义 <fieldset> 的标题。

提示：请使用 data-role="controlgroup" 来把按钮组合在一起：

<form method="post" action="demo_form.php">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
</form>

您也可以用一个 field 容器包围 <fieldset>：

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>

表单选择select：

如果您有一个带有相关选项的很长的列表，请在 <select> 内使用 <optgroup> 元素：

<select name="day" id="day">
<optgroup label="Weekdays">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
</optgroup>
<optgroup label="Weekends">
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</optgroup>
</select>

如果您想要让选择菜单在所有的移动设备上都显示相同，请使用 jQuery 自带的自定义选择菜单，data-native-menu="false" 属性：

如需在选择菜单中选择多个选项，请在 <select> 元素中使用 multiple 属性：

<select name="day" id="day" multiple data-native-menu="false">

表单滑动条：

如果您想要高亮突出显示滑动条的值，请添加 data-highlight="true"：

<input type="range" name="points" id="points" value="50" min="0" max="100" data-hightlight="true">

波动开关：

如需创建一个开关，请把 <select> 元素与 data-role="slider" 一起使用，并添加两个 <option> 元素：

请使用 "selected" 属性来设置选项中的一个为预选中状态（高亮突出显示状态）

<form method="post" action="demoform.html">
<div data-role="fieldcontain">
<label for="switch">Toggle Switch:</label>
<select name="switch" id="switch" data-role="slider">
<option value="on">On</option>
<option value="off" selected>Off</option>
</select>
</div>
</form>

转载于:https://www.cnblogs.com/xibei666/p/4454169.html

jQuery Mobile 基础(第三章)相关推荐

【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile界面综合实战
文章目录 8. JQuery Mobile界面综合实战 8.1 清爽的电子书阅读器 8.2 简单的计算器 8.3 移动BBS模板 8.4 基于JQuery Mobile的简单记事本 8.5 基于JQu ...
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——页面与对话框
文章目录 JQuery Mobile基础 1. 页面与对话框 1.1 简单的helloworld 1.2 利用JQuery脚本DIY闪光灯效果 1.3 不断切换的场景 1.4 整人游戏 1.5 手机被 ...
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的布局
文章目录 6. JQuery Mobile的布局 6.1 改良后的QQ登录界面 6.2 一种简洁的通讯录设计 6.3 完美实现九宫格 6.4 可以折叠的QQ好友列表 6.5 展开图标的设置 6.6 两 ...
大学计算机基础第五版第三章,大学计算机基础第三章习题答案
<大学计算机基础第三章习题答案>由会员分享,可在线阅读,更多相关<大学计算机基础第三章习题答案(4页珍藏版)>请在人人文库网上搜索. 1.第三章微型计算机硬件组成1.微型计算 ...
计算机基础课件第三章ppt,计算机应用基础第三章3.4.ppt
文档介绍: 3.4 使用网络服务本节主要学****内容: 掌握即时通信软件QQ的安装与使用; 2. 开通与使用博客或微博; 3. 使用常用的网络服务,如网上存储数据.网上求职或购物村僧弄锄蔓很卒河 ...
计算机中的表示方法,计算机应用基础第三章计算机中信息的表示方法
<计算机应用基础第三章计算机中信息的表示方法>由会员分享,可在线阅读,更多相关<计算机应用基础第三章计算机中信息的表示方法(17页珍藏版)>请在人人文库网上搜索. 1.第第三三 ...
Pytho基础第三章
Python基础第三章函数 3.1 概念整理 3.1.1 def语句和参数: 在调用print()或 len()等函数时,会传入一些值放于括号中间,在此称为参数.也可以自行定义接收参数的函数. d ...
使用 jQuery Mobile 与 HTML5 开发 Web App (二) —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——列表控件的使用
文章目录 5. 列表控件的使用 5.1 简单的新闻列表 5.2 音乐专辑列表的显示 5.3 更完善的音乐专辑列表 5.4 显示销售的商品列表 5.5 图书销量排名 5.6 简单的电话通讯录 5.7 让 ...

jQuery Mobile 基础(第三章)

jQuery Mobile 基础(第三章)相关推荐

最新文章

热门文章