Checkbox 复选

使用方法

checkbox的主要节点由labelinputu构成,构建好节点之后,对label追加ax-checkbox类即可,如果需要使用标题可追加i标签。

需要特别说明的是对input追加checking属性可实现中间状态。基本结构如下:

                                <label class="ax-checkbox"><input type="checkbox"><u></u><i>文字</i></label>
                            
                                <label class="ax-checkbox"><input name="pen" value="0" checked type="checkbox"><u></u><i>军事类</i></label>
                                <label class="ax-checkbox"><input name="pen" value="0" type="checkbox"><u></u><i>人物志类</i></label>
                                <label class="ax-checkbox"><input name="pen" value="0" type="checkbox"><u></u><i>娱乐类</i></label>
                                <label class="ax-checkbox"><input name="pen" value="0" type="checkbox" checking><u></u><i>财经类</i></label>
                            

块分布

label使用ax-chera类即可。基本结构如下:

                                    <div class="ax-row">
                                        <div class="ax-col ax-col-8"><label class="ax-chera"><input name="pen02" value="0" checked type="checkbox"><u></u><i>军事类</i></label></div>
                                        <span class="ax-gutter-md"></span>
                                        <div class="ax-col ax-col-8"><label class="ax-chera"><input name="pen02" value="0" type="checkbox"><u></u><i>人物志类</i></label></div>
                                        <span class="ax-gutter-md"></span>
                                        <div class="ax-col ax-col-8"><label class="ax-chera"><input name="pen02" value="0" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                    </div>
                        

占满均分布局

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-6"><label class="ax-checkbox"><input name="fix-clock" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
                                                    <div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
                                                    <div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                                    <div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock-x" value="3" checked="" disabled="" type="checkbox"><u></u><i>其他</i></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-checkbox"><input name="fix-bike" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><u></u><i>文学类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><u></u><i>小说类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><u></u><i>教材类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><u></u><i>动漫类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike-x" value="3" checked="" disabled="" type="checkbox"><u></u><i>其他</i></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="checkbox"><u></u><i>军事类</i></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="checkbox"><u></u><i>人物志类</i></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="checkbox"><u></u><i>娱乐类</i></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="checkbox"><u></u><i>其他</i></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-24"><label class="ax-checkbox"><input name="fix-draw" value="0" checked="" type="checkbox"><u></u><i>阅读《XXX使用协议》</i></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-checkbox"><input name="fix-long" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long-x" value="3" checked="" disabled="" type="checkbox"><u></u><i>其他</i></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-checkbox"><input name="fix-cow" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow-x" value="3" checked="" disabled="" type="checkbox"><u></u><i>其他</i></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="checkbox"><u></u><i>军事类</i></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="checkbox"><u></u><i>人物志类</i></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="checkbox"><u></u><i>娱乐类</i></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="checkbox"><u></u><i>其他</i></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-24"><label class="ax-checkbox"><input name="fix-big" value="0" checked="" type="checkbox"><u></u><i>阅读《XXX使用协议》</i></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-8"><label class="ax-checkbox"><input name="fix-cat" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
                                                        <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
                                                        <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                                        <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat-x" value="3" checked="" disabled="" type="checkbox"><u></u><i>其他</i></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="checkbox"><u></u><i>军事类</i></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="checkbox"><u></u><i>人物志类</i></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="checkbox"><u></u><i>娱乐类</i></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="checkbox"><u></u><i>其他</i></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-24"><label class="ax-checkbox"><input name="fix-paper" value="0" checked="" type="checkbox"><u></u><i>阅读《XXX使用协议》</i></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-checkbox"><input name="free-apple" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label>
                                                    <label class="ax-checkbox"><input name="free-apple" value="1" type="checkbox"><u></u><i>人物志类</i></label>
                                                    <label class="ax-checkbox"><input name="free-apple" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label>
                                                    <label class="ax-checkbox"><input name="free-apple-x" value="3" checked="" disabled="" type="checkbox"><u></u><i>其他</i></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-checkbox"><input name="free-orange" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>文学类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>人物志类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>小说类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>教材类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>动漫类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>历史类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>人文类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange-x" value="3" checked="" disabled="" type="checkbox"><u></u><i>其他</i></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="checkbox"><u></u><i>军事类</i></label>
                                                <label class="ax-chera"><input name="free-girl" value="1" type="checkbox"><u></u><i>人物志类</i></label>
                                                <label class="ax-chera"><input name="free-girl" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label>
                                                <label class="ax-chera"><input name="free-girl-x" value="3" checked="" disabled="" type="checkbox"><u></u><i>其他</i></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-checkbox"><input name="free-agree" value="0" checked="" type="checkbox"><u></u><i>阅读《XXX使用协议》</i></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            

复选开关

保持原有dom结构,对label使用ax-switch类即可将复选转为开关形式。

开关已开:
开关未开:
开关禁止:
开关禁止(已选择):
                            <div class="ax-form-group">
                                <div class="ax-flex-row">
                                    <div class="ax-form-label">开关已开:</div>
                                    <div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0" type="checkbox" checked=""><u></u></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-switch"><input name="check-s" value="0" type="checkbox"><u></u></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-switch"><input name="check-s" value="0" disabled="" type="checkbox"><u></u></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-switch"><input name="check-s" value="0" checked="" disabled="" type="checkbox"><u></u></label></div>
                                </div>
                            </div>
                            

如果需要对开关使用标题,可追加i标签,放在label的子节点下方即可;根据需要可加在最前面也可在最后面。默认行内布局,如果需要左右布局请配合使用弹性布局样式。




                                <label class="ax-switch"><input name="check-s" value="0" type="checkbox" checked=""><u></u><i>是否党员</i></label>

                                <hr/>

                                <label class="ax-switch"><i>是否党员:</i><input name="check-s" value="0" type="checkbox"><u></u></label>

                                <hr/>

                                <label class="ax-switch ax-row"><input name="check-s" value="0" type="checkbox"><u></u><i class="ax-col ax-align-right">是否党员</i></label>
                                
                                <hr/>

                                <label class="ax-switch ax-row"><i class="ax-col">是否党员:</i><input name="check-s" value="0" type="checkbox"><u></u></label>
                            

不同尺寸

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

高22px的ax-xs。

                            <div style="line-height:22px;">
                                <label class="ax-checkbox ax-xs"><input name="pen03" value="0" checked type="checkbox"><u></u><i>军事类</i></label>
                                <label class="ax-checkbox ax-xs"><input name="pen03" value="0" type="checkbox"><u></u><i>人物志类</i></label>
                                <label class="ax-checkbox ax-xs"><input name="pen03" value="0" type="checkbox"><u></u><i>娱乐类</i></label>
                            </div>
                            <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-chera ax-xs"><input name="pen04" value="0" checked type="checkbox"><u></u><i>军事类</i></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera ax-xs"><input name="pen04" value="0" type="checkbox"><u></u><i>人物志类</i></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera ax-xs"><input name="pen04" value="0" type="checkbox"><u></u><i>娱乐类</i></label></div>
                            </div>
                            <label class="ax-switch ax-xs"><input name="check01" value="0" type="checkbox" checked><u></u></label>
                            

高28px的ax-sm。

                                <label class="ax-checkbox ax-sm"><input name="pen05" value="0" checked type="checkbox"><u></u><i>军事类</i></label>
                                <label class="ax-checkbox ax-sm"><input name="pen05" value="0" type="checkbox"><u></u><i>人物志类</i></label>
                                <label class="ax-checkbox ax-sm"><input name="pen05" value="0" type="checkbox"><u></u><i>娱乐类</i></label>
                                <div class="ax-row">
                                    <div class="ax-col ax-col-8"><label class="ax-chera ax-sm"><input name="pen06" value="0" checked type="checkbox"><u></u><i>军事类</i></label></div>
                                    <span class="ax-gutter-md"></span>
                                    <div class="ax-col ax-col-8"><label class="ax-chera ax-sm"><input name="pen06" value="0" type="checkbox"><u></u><i>人物志类</i></label></div>
                                    <span class="ax-gutter-md"></span>
                                    <div class="ax-col ax-col-8"><label class="ax-chera ax-sm"><input name="pen06" value="0" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                </div>
                                <label class="ax-switch ax-sm"><input name="check02" value="0" type="checkbox" checked><u></u></label>
                            

高48px的ax-lg。

                                <label class="ax-checkbox ax-lg"><input name="pen07" value="0" checked type="checkbox"><u></u><i>军事类</i></label>
                                <label class="ax-checkbox ax-lg"><input name="pen07" value="0" type="checkbox"><u></u><i>人物志类</i></label>
                                <label class="ax-checkbox ax-lg"><input name="pen07" value="0" type="checkbox"><u></u><i>娱乐类</i></label>
                                <div class="ax-row">
                                    <div class="ax-col ax-col-8"><label class="ax-chera ax-lg"><input name="pen08" value="0" checked type="checkbox"><u></u><i>军事类</i></label></div>
                                    <span class="ax-gutter-md"></span>
                                    <div class="ax-col ax-col-8"><label class="ax-chera ax-lg"><input name="pen08" value="0" type="checkbox"><u></u><i>人物志类</i></label></div>
                                    <span class="ax-gutter-md"></span>
                                    <div class="ax-col ax-col-8"><label class="ax-chera ax-lg"><input name="pen08" value="0" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                </div>
                                <label class="ax-switch ax-lg"><input name="check03" value="0" type="checkbox" checked><u></u></label>
                            

插件使用方法

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

插件运行方式有四种:

  • ax*属性:对div标签使用axCheckbox属性,再配置children属性即可按默认参数运行插件(此div将作为wrapper包裹checkbox)。
  • ax*属性:对type=hidden的input标签使用axCheckbox属性,,再配置children属性即可按默认参数运行插件。
  • js实例:通过new axCheckbox('#ID')方式创建实例运行。
  • js实例:通过new axCheckbox('')方式创建内存实例运行。
父层创建实例:
input创建实例:
用ID创建实例:
创建内存实例:
F12打开控制台看看,checkbox节点将被新创建的ax-form-wrapper包裹。
注意:以type=hidden隐藏域创建实例,如果是radio类型,在创建实例后会自动删除该隐藏域;而checkbox类型会保留以便于获得多个值。
  •                                             <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='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">input创建实例:</div>
                                                <div class="ax-form-con">
                                                <input name="ck" type="hidden" axCheckbox='children:[{value:"military",label:"军事类"},{value:"figure",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">用ID创建实例:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input" id="checkbox"></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打开控制台看看,checkbox节点将被新创建的ax-form-wrapper包裹。</div>
                                                </div>
                                                </div>
                                                </div>
                                            
  •                                             let data = [
                                                {value:'military',label:'军事类'},
                                                {value:'figure',label:'人物类'},
                                                {value:'literature',label:'文学类'},
                                                {value:'novel',label:'小说类'}
                                                ];
    
                                                new axCheckbox('#checkbox',{
                                                children:data
                                                });
                                                console.log(new axCheckbox('',{children:data}));
                                            

多种数据格式

参数children用于设置选项内容,每一项包含的属性包含如下:

  • label:设置标签文字
  • value:设置标签值,如果不存在该属性,将以label值来代替value值
  • checked:设置初始checked状态,默认false,可选择true
  • disabled:设置是否禁用,默认为false,可选择true
  • props:设置label标签属性,是一个对象,比如和设置props:{style:'color:red'}
  • callback:项目的回调函数,支持参数obj:{dom:'',label:'',value:'',checked:'',disabled:''}

经常使用的属性是label和value,而children支持的格式写法如下:

  • 标准数组:如[{label:'军事类',value:'military'},{label:'人物类',value:'figure'}]
  • 字符串数组:如['军事类','人物类'],数组中的字符串是label值,插件将取值为value值
  • 一个对象:如{label:'军事类',value:'military'}或{label:'军事类'}
  • 一个字符串:如“军事”
标准数组:
字符串数组:
一个对象:
一个字符串:
  •                                         <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" id="data01"></div>
                                                    </div>
                                                </div>
                                            </div>
        
                                            <div class="ax-break"></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" id="data02"></div>
                                                    </div>
                                                </div>
                                            </div>
        
                                            <div class="ax-break"></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" id="data03"></div>
                                                    </div>
                                                </div>
                                            </div>
        
                                            <div class="ax-break"></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" id="data04"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            
  •                                             new axCheckbox('#data01', {
                                                    children: [
                                                        { value: 'military', label: '军事类' },
                                                        { value: 'figure', label: '人物类' }
                                                    ]
                                                });
                                                new axCheckbox('#data02', {
                                                    children: ['军事类','人物类'],
                                                });
                                                new axCheckbox('#data03', {
                                                    children: { value: 'military', label: '军事类' },
                                                });
                                                new axCheckbox('#data04', {
                                                    children: '军事类',
                                                });
                                            

初始化

实例初始化有两种方法,一是对children数组中对象属性checked赋值为true;二是使用参数value,value的写法有两种:

  • 1、字符串,多个值用插件分隔符区分,即分割符应该与separator一致,默认是英文逗号,例如“military,figure”
  • 2、字符串数组,例如['military','figure']

两个初始化方法将以2为优先,也就是说如果同时使用两种方法初始化,将以第二种方法为准。

children数组:
value值:
  •                                         <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">children数组:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input" id="init01"></div>
                                                    </div>
                                                </div>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">value值:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input" id="init02"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            
  •                                             new axCheckbox('#init01', {
                                                    children: [
                                                        { value: 'military', label: '军事类', checked: true },
                                                        { value: 'figure', label: '人物类', checked: true },
                                                        { value: 'literature', label: '文学类' },
                                                        { value: 'novel', label: '小说类' }
                                                    ]
                                                });
                                                new axCheckbox('#init02', {
                                                    children: [
                                                        { value: 'military', label: '军事类' },
                                                        { value: 'figure', label: '人物类' },
                                                        { value: 'literature', label: '文学类' },
                                                        { value: 'novel', label: '小说类' }
                                                    ],
                                                    value: 'military,figure'
                                                });
                                            

风格

axCheckbox默认的呈现效果是普通的样式,用户可通过style参数更换展示风格,可选风格有chera和switch。

另外默认创建的子项是行内自由分布的,用户可通过display参数设置布局方式,可选的布局方式有grid。如果子项数量是不确定的请用grid。

grid布局默认是一行四列,用户通过columnsgap设置列数和项与项的间距。

chera风格:
chera风格:
grid布局:
block布局:
  •                                     <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                                <div class="ax-form-label">chera风格:</div>
                                                <div class="ax-form-con">
                                                    <div class="ax-form-input" id="switch"></div>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div class="ax-break"></div>
    
                                        <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                                <div class="ax-form-label">chera风格:</div>
                                                <div class="ax-form-con">
                                                    <div class="ax-form-input" id="chera"></div>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div class="ax-break"></div>
    
                                        <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                                <div class="ax-form-label">grid布局:</div>
                                                <div class="ax-form-con">
                                                    <div class="ax-form-input" id="grid"></div>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div class="ax-break"></div>
    
                                        <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                                <div class="ax-form-label">block布局:</div>
                                                <div class="ax-form-con">
                                                    <div class="ax-form-input" id="block"></div>
                                                </div>
                                            </div>
                                        </div>
                                            
  •                                             new axCheckbox('#switch',{
                                                style:'switch',
                                                children:[{
                                                value:'figure',
                                                }]
                                                });
                                                new axCheckbox('#chera',{
                                                children:data2,
                                                style:'chera',
                                                });
                                                new axCheckbox('#grid',{
                                                children:data2,
                                                style:'chera',
                                                display:'grid',
                                                gap:'1.4rem',
                                                });
                                                new axCheckbox('#block', {
                                                    children: data2,
                                                    display: 'block',
                                                });
                                            

选项限制

checkbox实例化后的一个重要功能是选项限制,通过limit参数设置允许选择的数量,checkbox下方将实时显示已选择数量和剩余可选择的数量。

允许选择两项:
  •                                             <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" id="limit"></div>
                                                </div>
                                                </div>
                                                </div>
                                            
  •                                             let data = [
                                                {value:'military',label:'军事类'},
                                                {value:'figure',label:'人物类'},
                                                {value:'literature',label:'文学类'},
                                                {value:'novel',label:'小说类'}
                                                ];
    
                                                new axCheckbox('#limit',{
                                                limit:2,
                                                children:data
                                                });
                                            

其他类型

axCheckbox不仅能实例化checkbox复选,还可以实例化radio单选。通过type:radio设定即可实例化radio单选。单选类型中limit参数将失效,其他参数和操作方法与checkbox类型一样使用。

radio类型:
  • 
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">radio类型:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input" id="radio"></div>
                                                <a href="###" id="radioBtn" class="ax-btn">输出值</a>
                                                </div>
                                                </div>
                                                </div>
                                            
  •                                             let data = [
                                                {value:'military',label:'军事类'},
                                                {value:'figure',label:'人物类'},
                                                {value:'literature',label:'文学类'},
                                                {value:'novel',label:'小说类'},
                                                ]
                                                let radioIns = new axCheckbox('#radio', {
                                                type:'radio',
                                                name:'read',
                                                children:data
                                                }),
                                                radioBtn = document.querySelector('#radioBtn');
                                                radioBtn.onclick = ()=>{
                                                console.log(radioIns.output);
                                                }
                                            

操作方法

创建实例后我们需要使用内置方法进行增删改操作。

  • set:设置checkbox的checked项(覆盖之前的checked项),支持两个参数:设置文本和回调函数
    • arr:值数组或者1个文本值
    • callback:回调函数,支持一个参数:output输出值
  • add:设置checkbox的checked项(不覆盖),支持两个参数:设置文本和回调函数,该方法仅适合checkbox
    • arr:值数组或者1个文本值
    • callback:回调函数,支持value(添加值)和output输出值
  • getValues:获取checkbox的值,支持两个参数
    • type:输出值的类型,默认是array数组,可选择json或string;json类型将输出类似[{label:'军事类',value:'military'},{label:'人物类',value:'figure'}];string类型输出类似“military,figure”,其中的分隔符使用第二个参数separator来定义
    • separator:输出值string类型的分隔符,默认是英文逗号
  • reset:重置checkbox值恢复初始状态,支持回调函数,回调函数可使用一个参数,即output输出值
  • clear:清空checkbox值,支持回调函数,回调函数可使用一个参数,即output输出值
  • checkedAll:全选checkbox值,支持回调函数,回调函数可使用一个参数,即output输出值

既然需要操作实例,那么便需要了解内置的变量有哪些:

  • this:实例本身
  • this.parent:checkbox的父节点
  • this.limit:选项数量限制的div节点
  • this.trueLimit:真实的限制选项数量,如果参数limit大于children.length,那么trueLimit=children.length
  • this.output:实例输出内容,是一个对象,属性如下:
    • name:字段名
    • value:当前值,是数组,比如['book','travel']
    • parent:checkbox父节点
    • type:checkbox类型,与options.type一致
    • children:子项数组,子项结构类似{label:'',value:'',checked:'',disabled:'',props:'',callback:''}
      • dom:label节点(内部有input)
      • label:选项文本
      • value:选项值
      • checked:选项是否已经checked,true或false
      • disabled:选项是否是禁用状态,true或false
  •                                             <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" id="operate"></div>
                                                </div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break"></div>
    
                                                <a href="###" id="set" class="ax-btn">设置值</a>
                                                <a href="###" id="addchecked" class="ax-btn">添加值</a>
                                                <a href="###" id="clear" class="ax-btn">清除值</a>
                                                <a href="###" id="get" class="ax-btn">获取值</a>
                                                <a href="###" id="all" class="ax-btn">全选</a>
                                                <a href="###" id="detail" class="ax-btn">获取详细,打开F12看控制台</a>
                                            
  •                                             let data2 = [
                                                {value:'military',label:'军事类',checked:true,disabled:true},
                                                {value:'figure',label:'人物类'},
                                                {value:'literature',label:'文学类'},
                                                {value:'novel',label:'小说类'},
                                                {value:'textbook',label:'教材类'},
                                                {value:'comic',label:'动漫类'},
                                                {value:'entertainment',label:'娱乐类'},
                                                {value:'other',label:'其他类'}
                                                ]
                                                let optIns = new axCheckbox('#operate', {
                                                    limit: 4,
                                                    children: data2
                                                }),
                                                    set = document.querySelector('#set'),
                                                    addchecked = document.querySelector('#addchecked'),
                                                    get = document.querySelector('#get'),
                                                    all = document.querySelector('#all'),
                                                    clear = document.querySelector('#clear'),
                                                    reset = document.querySelector('#reset'),
                                                    detail = document.querySelector('#detail');
                                    
                                                set.onclick = () => {
                                                    optIns.set(['comic', 'textbook'], () => {
                                                        alert('checked了“漫画类”和“教材类”');
                                                    });
                                                }
                                                addchecked.onclick = () => {
                                                    optIns.addChecked('novel', () => {
                                                        alert('checked了“小说类”');
                                                    });
                                                }
                                                get.onclick = () => {
                                                    console.log('当前值三种类型:');
                                                    console.log(optIns.getValues());
                                                    console.log(optIns.getValues('json'));
                                                    console.log(optIns.getValues('string', '||'));
                                                }
                                                all.onclick = () => {
                                                    optIns.checkedAll(() => {
                                                        alert('全选了');
                                                    });
                                                }
                                                clear.onclick = () => {
                                                    optIns.clear(() => {
                                                        alert('清空了');
                                                    });
                                                }
                                                reset.onclick = () => {
                                                    optIns.reset(() => {
                                                        alert('重置了');
                                                    });
                                                }
                                                detail.onclick = () => {
                                                    console.log(optIns.output);
                                                }
                                            

监听事件

本插件有若干监听方法,以on为关键字,参数中监听格式为:new instance({onShow:function(){}});实例后监听格式是:instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下:

  • set/onSet 设置值后执行,支持参数output,即输出详细
  • reset/onReset 重置值后执行,支持参数output,即输出详细
  • onInit 初始化后执行,支持参数output,即输出详细
  • clear/onClear 清除后执行,支持参数output,即输出详细
  • checkedAll/onCheckedAll 全选后执行,支持参数output,即输出详细
  • exceed/onExceed checked数到极限后执行,支持参数output,即输出详细
  • addChecked/onAddChecked 增加checked项之后执行,支持value(checked项的值)和参数output(输出详细)
  • change/onChange 选项值便更后执行,支持参数output,即输出详细

演示实例显示结果使用了console.log方法,请按下F12按键打开开发者工具中的“控制台”查看监听效果。

  •                                             <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" id="on"></div>
                                                </div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break"></div>
    
                                                <a href="###" id="onset" class="ax-btn">设置值</a>
                                                <a href="###" id="onaddchecked" class="ax-btn">添加值</a>
                                                <a href="###" id="onall" class="ax-btn">全选值</a>
                                                <a href="###" id="onclear" class="ax-btn">清除值</a>
                                            
  •                                             let data2 = [
                                                {value:'military',label:'军事类',checked:true,disabled:true},
                                                {value:'figure',label:'人物类'},
                                                {value:'literature',label:'文学类'},
                                                {value:'novel',label:'小说类'},
                                                {value:'textbook',label:'教材类'},
                                                {value:'comic',label:'动漫类'},
                                                {value:'entertainment',label:'娱乐类'},
                                                {value:'other',label:'其他类'}
                                                ]
                                                let onIns = new axCheckbox('#on', {
                                                children:data2,
                                                onInit:()=>{
                                                console.log('初始化了!')
                                                }
                                                }),
                                                onset = document.querySelector('#onset'),
                                                onaddchecked = document.querySelector('#onaddchecked'),
                                                onall = document.querySelector('#onall'),
                                                onclear = document.querySelector('#onclear');
                                                onset.onclick = () => {
                                                onIns.set(['comic','textbook']);
                                                }
                                                onaddchecked.onclick = () => {
                                                onIns.addChecked('novel');
                                                }
                                                onall.onclick = () => {
                                                onIns.checkedAll();
                                                }
                                                onclear.onclick = () => {
                                                onIns.clear();
                                                }
                                                onIns.on('set', (obj) => {
                                                console.log('重设置了值:'+obj.value)
                                                }).on('clear', () => {
                                                console.log('清空了')
                                                }).on('checkedAll', () => {
                                                console.log('全选了')
                                                }).on('exceed', () => {
                                                console.log('选项数量到极限了');
                                                }).on('change', (obj) => {
                                                console.log('变更了选项');
                                                }).on('addChecked', (value) => {
                                                console.log('新增了选项checked:'+value);
                                                });
                                            

参数选项

                                document.addEventListener("DOMContentLoaded", function() {
                                var demo1 = new axCheckbox('#id',{
                                 insName: '',//实例名称,字符串格式;如果填写了实例名称,那么该实例会被添加到实例合集当中,通过axInstance方法可获取本实例,详细请查看:ax-utils-instance.php
                                type: 'checkbox', //input类型,默认checkbox,可选择radio
                                style: 'beautify', //显示风格,默认是beautify美化原生,可选择chera风格或switch风格
                                name: '', //字段名
                                children:[],//设置子项,可以是一个对象(一个子项),也可以是一个数组(多个子项),可使用的参数如下:
                                /* [{
                                checked: false, //设置默认checked,默认为false
                                disabled: false, //设置禁用,默认false不禁用,可使用true禁用
                                value: '', //设置值
                                label: '', //设置标签文字
                                props: {}, //设置其他属性(对label设置)
                                callback: '', //设置回调函数,支持参数obj:{dom:'',label:'',value:'',checked:'',disabled:''}
                                }], */
                                value: '',//初始值,字符串格式,比如“traval,read”
                                limit: 0, //最多选择几项,默认为0不限制
                                language:{
                                    limit: `已输入<i have>0</i>个字符,还可以输入<i remainder><# this.value #></i>个字`,//字数限制提示
                                },
                                separator: ',',//定义输出字符串值的分隔符,默认是英文逗号
                                size: '', //统一设置子项尺寸,可以填xs、sm、md或lg
                                parentClass: '', //设置父层样式名,一个或多个,多个以英文逗号或空格分开
                                childClass: '',//每一项div的样式名,一个或多个,多个以英文逗号或空格分开
                                props: '', //设置父层其他属性,比如props:{role:'',display:''}
                                display: '', //子项布局方式,默认为空表示子项行内布局,label宽度随内容自由伸缩,可选择grid或block
                                gap: '', //如果grid布局,那么可以使用该参数定义子项之间的,比如1.4rem
                                columns: 0, //设置列数,默认为0表示子项行内布局,如果大于0将启用grid布局
                                fenceShow:false,//针对grid布局,设置是否显示项目之间的边距,默认false不显示,可选择true显示
                                clearShow: true, //当toolsShow: true的时候是否显示清除按钮,默认true显示,可选择false不显示
                                breakpoints: {},//使用断点以适配终端,详情查看ax-utils-other.php页面
                                onClear: '', //清除值后的回调函数,支持参数output,即输出详细
                                onSet: '', //设置值后的回调函数,支持参数output,即输出详细
                                onReset: '', //重置值后的回调函数,支持参数output,即输出详细
                                onAddChecked: '', //追加项后的回调函数,支持参数output,即输出详细
                                onExceed: '', //checked项数超过设定值后的回调函数,支持参数output,即输出详细
                                onInit: '', //初始化后的回调函数,支持参数output,即输出详细
                                onChange: '', //初始化后的回调函数,支持参数output,即输出详细
                                });
                                });
                            
以axMenu插件为例,如果在元素上通过ax*使用属性,需要使用类似json的写法,属性不需要使用引号,如果值是字符串需要使用引号包裹,如果值是数字、布尔值、null或undefined不需要引号;比如要设置active,那么在元素的ax*属性中应该这样书写:axMenu="active:2"