010-跨平台开发-MUI-单选框及取值(radio)

视频教程:点击这里

  • radio用于单选的情况

《010-跨平台开发-MUI-单选框及取值(radio)》 微信公众号:JavaWeb架构师

普通单选框

  • DOM结构
<div class="mui-input-row mui-radio">
    <label>PHP</label>
    <input name="language" type="radio" value="PHP">
</div>  
  • 默认radio在右侧显示,若希望在左侧显示,只需增加.mui-left类即可,如下:
<div class="mui-input-row mui-radio mui-left">
  • 若要禁用radio,只需在radio上增加disabled属性即可;
<input name="language" type="radio" value="PHP" disabled>
  • 获取选中情况
var ele = document.getElementsByName("language");
for (var i = 0; i < ele.length; i++) {
    mui.alert(ele[i].value + ": " + ele[i].checked)
}

列表单选框

  • mui基于列表控件,提供了列表式单选实现;在列表根节点上增加.mui-table-view-radio类即可,若要默认选中某项,只需要在对应li节点上增加.mui-selected类即可,dom结构如下:
<ul class="mui-table-view mui-table-view-radio">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 1</a>
    </li>
    <li class="mui-table-view-cell mui-selected">
        <a class="mui-navigate-right">Item 2</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 3</a>
    </li>
</ul>
  • 列表式单选在切换选中项时会触发selected事件,在事件参数(e.detail.el)中可以获得当前选中的dom节点,如下代码打印当前选中项的innerHTML:
/*
 * 2.列表式单选在切换选中项时会触发selected事件,在事件参数(e.detail.el)
 * 中可以获得当前选中的dom节点
 */
document.getElementById('doUl').addEventListener('selected',function (e) {
    mui.toast(e.detail.el.innerText)
})
  • 可以使用li标签中的class值:mui-selected 来判断是否选中了某个项。
// 获取选取情况
document.getElementById('btnUl').addEventListener('tap',function () {
        var obj = mui("#doUl li");
        for (var i = 0; i < obj.length; i++) {
            mui.alert( obj[i].innerText + ':' + /mui-selected/.test(obj[i].className))
        }
})
  • 代码块激活字符:
mradio

测试代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>复选框(checkbox)</title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />
        
        <script type="text/javascript" charset="utf-8">
            mui.init();
            
            mui.ready(function() {
                
                // 1.普通单选框判断选中
                document.getElementById('doDiv').addEventListener('tap',function () {
                        var choose = document.getElementsByName("choose");
                        for (var i = 0; i < choose.length; i++) {
                            if( choose[i].checked ) {
                                mui.alert(choose[i].value + ":" + choose[i].checked)
                            }
                        }
                })
                
                
                /*
                 * 2.列表式单选在切换选中项时会触发selected事件,在事件参数(e.detail.el)
                 * 中可以获得当前选中的dom节点
                 */
                document.getElementById('doUl').addEventListener('selected',function (e) {
                    
                    mui.alert(e.detail.el.innerText)
                })
                
                // 获取选取情况
                document.getElementById('btnUl').addEventListener('tap',function () {
                        var obj = mui("#doUl li");
                        for (var i = 0; i < obj.length; i++) {
                            mui.alert( obj[i].innerText + ':' + /mui-selected/.test(obj[i].className))
                        }
                })
            })
            
        </script>
        
        <style type="text/css">
            .radioOne {
            }
        </style>
    </head>
    
    <!--
        
    -->
    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">单选框(radio)</h1>
        </header>
        
        <div class="mui-content">
            <!-- 1.普通单选 -->
            <div class="radioOne">
                    <!-- 在div上增加mui-left/right控制单选框的位置 -->
                    <div class="mui-input-row mui-radio mui-left">
                        <label>小甜甜</label>
                        <!-- 使用checked属性默认选中 -->
                        <input name="choose" type="radio" value="小甜甜" checked>
                    </div>
                    
                    <div class="mui-input-row mui-radio">
                        <label>JavaWeb架构师</label>
                        <input type="radio" name="choose" value="JavaWeb架构师" />
                    </div>
                    
                    <div class="mui-input-row mui-radio">
                        <label>禁用</label>
                        <!-- 加上disabled属性禁用 -->
                        <input type="radio" name="choose" value="JavaWeb架构师" disabled="disabled"/>
                    </div>
                    
                    <input type="submit" id="doDiv" value="Div形式" />
                    
            </div>
            
            <!-- 列表单选 -->
            <div class="radioTwo">
                    <!-- 列表选择:在列表根节点上增加.mui-table-view-radio类即可 -->
                    <ul class="mui-table-view mui-table-view-radio" id="doUl">
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">Java</a>
                        </li>
                        <!-- 默认选中:只需要在对应li节点上增加.mui-selected类 -->
                        <li class="mui-table-view-cell mui-selected">
                            <a class="mui-navigate-right">C++</a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">PHP</a>
                        </li>
                    </ul>
                    <button id="btnUl">列表形式</button>
            </div>
        </div>
        
    </body>

</html>

效果

《010-跨平台开发-MUI-单选框及取值(radio)》 微信公众号:JavaWeb架构师

视频教程:点击这里


源码下载

关注下方的微信公众号,回复:mui_course.code


《010-跨平台开发-MUI-单选框及取值(radio)》



欢迎加入交流群:451826376


更多信息:www.itcourse.top

《010-跨平台开发-MUI-单选框及取值(radio)》 完整教程PDF版本下载

    原文作者:__小甜甜__
    原文地址: https://www.jianshu.com/p/abcade840ec3
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞