Radio 单选

使用方法

label追加ax-radio类,将radio和对应的文字装入即可。基本结构如下:

                             <label class="ax-radio"><input name="" value="" type="radio"><span>文字</span></label>
                        

块分布

label追加ax-chera类,将radio和对应的文字装入即可。基本结构如下:

                             <label class="ax-chera"><input name="" value="" type="radio"><span>文字</span></label>
                        

占满均分布局

ax-flex-block作为外围可实现占满平均布局。基本格式如下:

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">名称</div>
                                        <div class="ax-flex-block">
                                            <div class="ax-row">
                                                <div class="ax-col ax-col-12"><label class="ax-radio"><input name="" value="0" checked="" type="radio"><span>文字</span></label></div>
                                                <div class="ax-col ax-col-12"><label class="ax-radio"><input name="" value="1" type="radio"><span>文字</span></label></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        
单选:
单选:
单选风格:
                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">单选:</div>
                                        <div class="ax-flex-block">
                                            <div class="ax-row">
                                                <div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock" value="0" checked="" type="radio"><span>军事类</span></label></div>
                                                <div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock" value="1" type="radio"><span>人物志类</span></label></div>
                                                <div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
                                                <div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">单选:</div>
                                        <div class="ax-flex-block">
                                            <div class="ax-row">
                                                <div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="0" checked="" type="radio"><span>军事类</span></label></div>
                                                <div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><span>人物志类</span></label></div>
                                                <div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><span>文学类</span></label></div>
                                                <div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><span>小说类</span></label></div>
                                                <div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><span>教材类</span></label></div>
                                                <div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><span>动漫类</span></label></div>
                                                <div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
                                                <div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">单选风格:</div>
                                        <div class="ax-flex-block">
                                            <div class="ax-row">
                                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="0" checked="" type="radio"><span>军事类</span></label></div>
                                                <span class="ax-gutter-md"></span>
                                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="1" type="radio"><span>人物志类</span></label></div>
                                                <span class="ax-gutter-md"></span>
                                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
                                                <span class="ax-gutter-md"></span>
                                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label"></div>
                                        <div class="ax-flex-block">
                                            <div class="ax-row">
                                                <div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-draw" value="0" checked="" type="radio"><span>阅读《XXX使用协议》</span></label></div>
                                                <div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-draw" value="0" disabled="" type="radio"><span>阅读《XXX使用协议》</span></label></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        

自定义宽度均分布局

对外围标签设定固定宽度,单选项将在此宽度内平均分布。基本格式如下:

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">名称</div>
                                        <div style="width:400px;">
                                            <div class="ax-row">
                                                <div class="ax-col ax-col-12"><label class="ax-radio"><input name="" value="0" checked="" type="radio"><span>文字</span></label></div>
                                                <div class="ax-col ax-col-12"><label class="ax-radio"><input name="" value="1" type="radio"><span>文字</span></label></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        
单选(定宽400px):
单选(定宽600px):
单选风格:
                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">单选(定宽400px):</div>
                                        <div style="width:400px;">
                                            <div class="ax-row">
                                                <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long" value="0" checked="" type="radio"><span>军事类</span></label></div>
                                                <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long" value="1" type="radio"><span>人物志类</span></label></div>
                                                <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
                                                <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">单选(定宽600px):</div>
                                        <div style="width:600px;">
                                            <div class="ax-row">
                                                <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow" value="0" checked="" type="radio"><span>军事类</span></label></div>
                                                <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow" value="1" type="radio"><span>人物志类</span></label></div>
                                                <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
                                                <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">单选风格:</div>
                                        <div style="width:600px;">
                                            <div class="ax-row">
                                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="0" checked="" type="radio"><span>军事类</span></label></div>
                                                <span class="ax-gutter-md"></span>
                                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="1" type="radio"><span>人物志类</span></label></div>
                                                <span class="ax-gutter-md"></span>
                                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
                                                <span class="ax-gutter-md"></span>
                                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label"></div>
                                        <div style="width:600px;">
                                            <div class="ax-row">
                                                <div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-big" value="0" checked="" type="radio"><span>阅读《XXX使用协议》300px</span></label></div>
                                                <div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-big" value="0" disabled="" type="radio"><span>阅读《XXX使用协议》300px</span></label></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        

表单定宽均分布局

如果表单中还有其他输入控件,可以使用ax-form-input来统一外围宽度,宽度是460px。基本格式如下:

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">名称</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <div class="ax-row">
                                                    <div class="ax-col ax-col-12"><label class="ax-radio"><input name="" value="0" checked="" type="radio"><span>文字</span></label></div>
                                                    <div class="ax-col ax-col-12"><label class="ax-radio"><input name="" value="1" type="radio"><span>文字</span></label></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        
单选:
单选风格:
姓名:
评论内容:
                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">单选:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <div class="ax-row">
                                                    <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="0" checked="" type="radio"><span>军事类</span></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="1" type="radio"><span>人物志类</span></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">单选风格:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <div class="ax-row">
                                                    <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="0" checked="" type="radio"><span>军事类</span></label></div>
                                                    <span class="ax-gutter-md"></span>
                                                    <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="1" type="radio"><span>人物志类</span></label></div>
                                                    <span class="ax-gutter-md"></span>
                                                    <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
                                                    <span class="ax-gutter-md"></span>
                                                    <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">姓名:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input"><input name="username" placeholder="输入登录名称"  type="text"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">评论内容:</div>
                                        <div class="ax-flex-block">
                                            <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="输入评论"></textarea></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>


                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label"></div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <div class="ax-row">
                                                    <div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-paper" value="0" checked="" type="radio"><span>阅读《XXX使用协议》</span></label></div>
                                                    <div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-paper" value="0" disabled="" type="radio"><span>阅读《XXX使用协议》</span></label></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        

自由布局

根据外围宽度自由填充单选项,不过由于单选项长度不一而导致视觉上不整齐。基本格式如下:

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">名称</div>
                                        <div class="ax-flex-block">
                                            <div class="ax-flex-block"><label class="ax-radio"><input name="" value="0" checked="" type="radio"><span>文字</span></label>
                                                <label class="ax-radio"><input name="" value="1" type="radio"><span>文字</span></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        
单选:
单选:
单选风格:
                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">单选:</div>
                                        <div class="ax-flex-block">
                                            <div class="ax-flex-block"><label class="ax-radio"><input name="free-apple" value="0" checked="" type="radio"><span>军事类</span></label>
                                                <label class="ax-radio"><input name="free-apple" value="1" type="radio"><span>人物志类</span></label>
                                                <label class="ax-radio"><input name="free-apple" value="2" disabled="" type="radio"><span>娱乐类</span></label>
                                                <label class="ax-radio"><input name="free-apple-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">单选:</div>
                                        <div class="ax-flex-block"><label class="ax-radio"><input name="free-orange" value="0" checked="" type="radio"><span>军事类</span></label>
                                            <label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>文学类</span></label>
                                            <label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>人物志类</span></label>
                                            <label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>小说类</span></label>
                                            <label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>教材类</span></label>
                                            <label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>动漫类</span></label>
                                            <label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>历史类</span></label>
                                            <label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>人文类</span></label>
                                            <label class="ax-radio"><input name="free-orange" value="2" disabled="" type="radio"><span>娱乐类</span></label>
                                            <label class="ax-radio"><input name="free-orange-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">单选风格:</div>
                                        <div class="ax-flex-block">
                                            <label class="ax-chera"><input name="free-girl" value="0" checked="" type="radio"><span>军事类</span></label>
                                            <label class="ax-chera"><input name="free-girl" value="1" type="radio"><span>人物志类</span></label>
                                            <label class="ax-chera"><input name="free-girl" value="2" disabled="" type="radio"><span>娱乐类</span></label>
                                            <label class="ax-chera"><input name="free-girl-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label"></div>
                                            <div class="ax-flex-block">
                                                <div class="ax-flex-block"><label class="ax-radio"><input name="free-agree" value="0" checked="" type="radio"><span>阅读《XXX使用协议》</span></label><label class="ax-radio"><input name="free-agree" value="0" type="radio"><span>阅读《XXX使用协议》</span></label>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                        

不同尺寸

本框架的单选默认高是38px(ax-md),对ax-radioax-chera追加尺寸类实现不同大小效果以适应不同行高。

高22px的ax-xs。

                                <label class="ax-radio ax-xs"><input name="pen03" value="0" checked type="radio"><span>是</span></label>
                                <label class="ax-radio ax-xs"><input name="pen03" value="0"  type="radio"><span>否</span></label>
                                <div class="ax-row">
                                    <div class="ax-col ax-col-12"> <label class="ax-chera ax-xs"><input name="pen04" value="0" checked type="radio"><span>是</span></label></div>
                                    <span class="ax-gutter-md"></span>
                                    <div class="ax-col ax-col-12"><label class="ax-chera ax-xs"><input name="pen04" value="0"  type="radio"><span>否</span></label></div>
                                </div>
                        

高28px的ax-sm。

                                <label class="ax-radio ax-sm"><input name="pen05" value="0" checked type="radio"><span>是</span></label>
                                <label class="ax-radio ax-sm"><input name="pen05" value="0"  type="radio"><span>否</span></label>
                                <div class="ax-row">
                                    <div class="ax-col ax-col-12"> <label class="ax-chera ax-sm"><input name="pen06" value="0" checked type="radio"><span>是</span></label></div>
                                    <span class="ax-gutter-md"></span>
                                    <div class="ax-col ax-col-12"><label class="ax-chera ax-sm"><input name="pen06" value="0"  type="radio"><span>否</span></label></div>
                                </div>
                        

高48px的ax-lg。

                                <label class="ax-radio ax-lg"><input name="pen07" value="0" checked type="radio"><span>是</span></label>
                                <label class="ax-radio ax-lg"><input name="pen07" value="0"  type="radio"><span>否</span></label>
                                <div class="ax-row">
                                    <div class="ax-col ax-col-12"> <label class="ax-chera ax-lg"><input name="pen08" value="0" checked type="radio"><span>是</span></label></div>
                                    <span class="ax-gutter-md"></span>
                                    <div class="ax-col ax-col-12"><label class="ax-chera ax-lg"><input name="pen08" value="0"  type="radio"><span>否</span></label></div>
                                </div>
                        

插件使用方法

以上的radio方法是最原始、简单的创建方法,对于管理系统开发者而言大概认为不够好用的。我们通常需要对radio进行赋值、清空、事件等操作,通过实例化之后更便于管理。

对于radio和checkbox可共用axCheckbox组件,通过type参数区分两者。关于axCheckbox详细可点击这里

插件运行方式有三种:

  • ax*属性:对div标签使用axCheckbox属性即可按默认参数运行插件(此div将作为wrapper包裹radio)。
  • js实例:通过new axCheckbox('#ID')方式创建实例运行。
  • js实例:通过new axCheckbox('')方式创建内存实例运行。
父层创建实例:
用ID创建实例:
创建内存实例:
F12打开控制台看看,radio节点将被新创建的ax-form-wrapper包裹。
  •                                         <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">父层创建实例:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input" axCheckbox='type:"radio",name:"read",children:[{value:"military",label:"军事类"},{value:"figure",label:"人物类"}]'></div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="ax-break-md"></div>
        
                                            <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">用ID创建实例:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input" id="radio"></div>
                                                    </div>
                                                </div>
                                            </div>
        
                                            <div class="ax-break-md"></div>
        
                                            <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">创建内存实例:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input">F12打开控制台看看,radio节点将被新创建的ax-form-wrapper包裹。</div>
                                                    </div>
                                                </div>
                                            </div>
                                            
  •                                         let data = [
                                                { value: 'military', label: '军事类' },
                                                { value: 'figure', label: '人物类' },
                                                { value: 'literature', label: '文学类' },
                                                { value: 'novel', label: '小说类' }
                                            ];
                                
                                            new axCheckbox('#radio', {
                                                type: 'radio',
                                                name: 'read2',
                                                children: data
                                            });
                                            console.log(new axCheckbox('', {
                                                type: 'radio',
                                                children: data
                                            })
                                            );