Framework7复选框和单选按钮

本文概述

复选框组示例
Radios Group iOS示例
单选按钮组原生示例
带有媒体列表视图

列表视图扩展使你可以在Framework7中创建复选框和单选输入。
以下是Framework7中使用的复选框和单选输入的列表：

指数	类型	描述
1)	Checkboxes group	它允许用户通过选中指定的选项列表。
2)	收音机组iOS	它允许用户从选项列表中仅选择一个选项。
3)	收音机组材质	“材质”主题也支持“收音机”组, 你必须为收音机添加其他图标。
4)	带有媒体列表视图	可以在媒体列表视图中同时使用复选框和广播组。

复选框组示例复选框组使用户可以通过选中指定选项列表来选择它们。
item-content必须是具有label-checkbox类的label元素, 并且复选框图标应位于item-media中。
例

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Checkboxes group< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "pages"> < div data-page = "home" class = "page navbar-fixed"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "left"> < /div> < div class = "center"> Checkboxes Group< /div> < div class = "right"> < /div> < /div> < /div> < div class = "page-content"> < div class = "content-block-title"> Select one or more courses< /div> < div class = "list-block"> < ul> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "ks-checkbox" value = "http://www.srcmini.com/Java" checked> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Java< /div> < /div> < /label> < /li> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "ks-checkbox" value = "http://www.srcmini.com/Andriod"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Andriod< /div> < /div> < /label> < /li> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "ks-checkbox" value = "http://www.srcmini.com/Oracle"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Oracle< /div> < /div> < /label> < /li> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "ks-checkbox" value = "http://www.srcmini.com/Python"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Python< /div> < /div> < /label> < /li> < /ul> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); < /script> < /body> < /html>

立即测试
Radios Group iOS示例Radio Group iOS使用户可以从选项列表中仅选择一个选项。 item-content必须是具有label-radio类的label元素, 并且radio输入应该是item-content的第一个子元素。

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Checkboxes group< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "pages"> < div data-page = "home" class = "page navbar-fixed"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "left"> < /div> < div class = "center"> Radios Group< /div> < div class = "right"> < /div> < /div> < /div> < div class = "page-content"> < div class = "content-block-title"> Select any one< /div> < div class = "list-block"> < ul> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Java" checked> < div class = "item-inner"> < div class = "item-title"> Java< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Andriod"> < div class = "item-inner"> < div class = "item-title"> Andriod< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Oracle"> < div class = "item-inner"> < div class = "item-title"> Oracle< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Python"> < div class = "item-inner"> < div class = "item-title"> Python< /div> < /div> < /label> < /li> < /ul> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); < /script> < /body> < /html>

立即测试
单选按钮组原生示例Framework7也支持单选按钮组。

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Radios group Material< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" /> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "pages"> < div data-page = "home" class = "page navbar-fixed"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "center"> Radios Group< /div> < /div> < /div> < div class = "page-content"> < div class = "content-block-title"> Radios group< /div> < div class = "list-block"> < ul> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Java" checked> < div class = "item-media"> < i class = "icon icon-form-radio"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Java< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Andriod"> < div class = "item-media"> < i class = "icon icon-form-radio"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Andriod< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Oracle"> < div class = "item-media"> < i class = "icon icon-form-radio"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Oracle< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Python"> < div class = "item-media"> < i class = "icon icon-form-radio"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Python< /div> < /div> < /label> < /li> < /ul> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); < /script> < /body> < /html>

立即测试
带有媒体列表视图它使你可以在媒体列表视图中同时使用复选框和广播组。
例

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Checkboxes group< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "pages"> < div data-page = "home" class = "page navbar-fixed"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "left"> < /div> < div class = "center"> Checkboxes and Radios< /div> < div class = "right"> < /div> < /div> < /div> < div class = "page-content"> < div class = "content-block-title"> Select Your Message< /div> < div class = "list-block media-list"> < ul> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "my-checkbox" value = "http://www.srcmini.com/1"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Message1< /div> < div class = "item-after"> 7:10< /div> < /div> < div class = "item-subtitle"> your order has been shipped< /div> < div class = "item-text"> Here, write your message details............< /div> < /div> < /label> < /li> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "my-checkbox" value = "http://www.srcmini.com/2"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Message2< /div> < div class = "item-after"> 10:15< /div> < /div> < div class = "item-subtitle"> Bill Payments< /div> < div class = "item-text"> Here, write your message details............< /div> < /div> < /label> < /li> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "my-checkbox" value = "http://www.srcmini.com/3"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Message3< /div> < div class = "item-after"> 19:14< /div> < /div> < div class = "item-subtitle"> New messages from John Doe< /div> < div class = "item-text"> Here, write your message details............< /div> < /div> < /label> < /li> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "my-checkbox" value = "http://www.srcmini.com/4"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Message4< /div> < div class = "item-after"> 22:44< /div> < /div> < div class = "item-subtitle"> Car Insurance renewal< /div> < div class = "item-text"> Here, write your message details.............< /div> < /div> < /label> < /li> < /ul> < /div> < div class = "content-block-title"> Which is your favorite Magazine?< /div> < div class = "list-block media-list"> < ul> < li> < label class = "label-radio item-content"> < input type = "radio" name = "my-radio" value = "http://www.srcmini.com/1" checked> < div class = "item-media"> < img src = "http://www.srcmini.com/framework7/images/pic3.jpg" width = "80"> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> India Today< /div> < div class = "item-after"> $10< /div> < /div> < div class = "item-subtitle"> Monthly< /div> < div class = "item-text"> Write magazine details........< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "my-radio" value = "http://www.srcmini.com/2"> < div class = "item-media"> < img src = "http://www.srcmini.com/framework7/images/pic2.jpg" width = "80"> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Business Today< /div> < div class = "item-after"> $20< /div> < /div> < div class = "item-subtitle"> Monthly< /div> < div class = "item-text"> Write magazine details.........< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "my-radio" value = "http://www.srcmini.com/3"> < div class = "item-media"> < img src = "http://www.srcmini.com/framework7/images/pic.jpg" width = "80"> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Frontier< /div> < div class = "item-after"> $15< /div> < /div> < div class = "item-subtitle"> weakly< /div> < div class = "item-text"> Write magazine details........< /div> < /div> < /label> < /li> < /ul> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); < /script> < /body> < /html>

【Framework7复选框和单选按钮】立即测试