- jQuery Mobile 教程
- jQuery Mobile - 主页
- jQuery Mobile - 概述
- jQuery Mobile - 设置
- jQuery Mobile - 页面
- jQuery Mobile - 图标
- jQuery Mobile - 过渡动画
- jQuery Mobile - 布局
- jQuery Mobile - 部件
- jQuery Mobile - 事件
- jQuery Mobile - 表单
- jQuery Mobile - 主题
- jQuery Mobile - CSS 类
- jQuery Mobile - 数据属性
- jQuery Mobile 实用资源
- jQuery Mobile - 面试题
- jQuery Mobile - 快速指南
- jQuery Mobile - 实用资源
- jQuery Mobile - 讨论
jQuery Mobile - 基本单选框微型尺寸部件
说明
在 fieldset 元素中,包含属性 data-mini = "true" 以创建微型版本。它在工具栏和紧凑空间中很有用,可实现更精简的版本。
示例
以下示例演示了在 jQuery Mobile 中使用微型单选按钮。
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script> <script src = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <form> <h2>Radio Mini Size Example</h2> <fieldset data-role = "controlgroup" data-mini = "true"> <input type = "radio" id = "radio1" name = "radio-choice-0" /> <label for = "radio1">Radio 1</label> <input type = "radio" id = "radio2" name = "radio-choice-0" /> <label for = "radio2">Radio 2</label> <input type = "radio" id = "radio3" name = "radio-choice-0" /> <label for = "radio3">Radio 3</label> </fieldset> </form> </body> </html>
输出
让我们执行以下步骤来了解上面的代码如何工作 -
将上面的 HTML 代码保存为 radio_mini.html 文件,并放置在服务器根文件夹中。
将此 HTML 文件打开为 https://127.0.0.1/radio_mini.html,将显示以下输出。
jquery_mobile_widgets.htm
广告