TabSelection

TabSelection UI 提供与WeLink规范一致的视图

效果图：

<div class="page">
  <div class="page__hd">
    <h1 class="page__title">TabSelection</h1>
    <p class="page__desc">分段选择</p>
  </div>
  <div class="page__bd">
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell weui-cell-list">
            <div class="weui-cell__bd weui-cell__multipline">
                左右结构单行
            </div>
            <div class="weui-tabselection weui-tabselection__horizontal">
                <label class="weui-tabselection__tab weui-tabselection__tab_checked">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="small"/>
                        <span class="ant-radio-button-inner"></span>
                    </span>
                    <span>Small</span>
                </label>
                <label class="weui-tabselection__tab">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="default"/>
                        <span class="ant-radio-button-inner" ></span>
                    </span><span>Default</span>
                </label>
            </div>
        </div>

        <div class="weui-cell weui-cell-list">
            <div class="weui-cell__bd weui-cell__multipline">
                左右结构多行左右结构多行左右结构多行左右结构多行
            </div>
            <div class="weui-tabselection weui-tabselection__horizontal">
                <label class="weui-tabselection__tab weui-tabselection__tab_checked">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="small"/>
                        <span class="ant-radio-button-inner"></span>
                    </span>
                    <span>Small</span>
                </label>
                <label class="weui-tabselection__tab">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="default"/>
                        <span class="ant-radio-button-inner" ></span>
                    </span><span>Default</span>
                </label>
                <label class="weui-tabselection__tab">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="large"/>
                        <span class="ant-radio-button-inner"></span>
                    </span>
                    <span>Large</span>
                </label>
            </div>
        </div>

        <div class="weui-cell weui-cell-list weui-cell__vertical">
                <div class="weui-cell__bd weui-cell__multipline">
                    上下结构单行
                </div>
                <div class="weui-flex weui-tabselection">
                    <label class="weui-flex__item weui-tabselection__tab weui-tabselection__tab_checked">
                        <span class="weui-tabselection__tab__btn">
                            <input type="radio" class="weui-tabselection__tab__input" value="small"/>
                            <span class="ant-radio-button-inner"></span>
                        </span>
                        <span>Small</span>
                    </label>
                    <label class="weui-flex__item weui-tabselection__tab">
                        <span class="weui-tabselection__tab__btn">
                            <input type="radio" class="weui-tabselection__tab__input" value="default"/>
                            <span class="ant-radio-button-inner" ></span>
                        </span><span>Default</span>
                    </label>
                </div>
            </div>

        <div class="weui-cell weui-cell-list weui-cell__vertical">
            <div class="weui-cell__bd weui-cell__multipline">
                上下结构单行
            </div>
            <div class="weui-flex weui-tabselection">
                <label class="weui-flex__item weui-tabselection__tab weui-tabselection__tab_checked">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="small"/>
                        <span class="ant-radio-button-inner"></span>
                    </span>
                    <span>Small</span>
                </label>
                <label class="weui-flex__item weui-tabselection__tab">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="default"/>
                        <span class="ant-radio-button-inner" ></span>
                    </span><span>Default</span>
                </label>
                <label class="weui-flex__item weui-tabselection__tab">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="large"/>
                        <span class="ant-radio-button-inner"></span>
                    </span>
                    <span>Large</span>
                </label>
            </div>
        </div>

        <div class="weui-cell weui-cell-list weui-cell__vertical">
                <div class="weui-cell__bd weui-cell__multipline">
                    上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行
                </div>
                <div class="weui-flex weui-tabselection">
                    <label class="weui-flex__item weui-tabselection__tab weui-tabselection__tab_checked">
                        <span class="weui-tabselection__tab__btn">
                            <input type="radio" class="weui-tabselection__tab__input" value="small"/>
                            <span class="ant-radio-button-inner"></span>
                        </span>
                        <span>选项1</span>
                    </label>
                    <label class="weui-flex__item weui-tabselection__tab">
                        <span class="weui-tabselection__tab__btn">
                            <input type="radio" class="weui-tabselection__tab__input" value="default"/>
                            <span class="ant-radio-button-inner" ></span>
                        </span>
                        <span>选项2</span>
                    </label>
                    <label class="weui-flex__item weui-tabselection__tab">
                        <span class="weui-tabselection__tab__btn">
                            <input type="radio" class="weui-tabselection__tab__input" value="large"/>
                            <span class="ant-radio-button-inner"></span>
                        </span>
                        <span>选项3</span>
                    </label>
                    <label class="weui-flex__item weui-tabselection__tab">
                        <span class="weui-tabselection__tab__btn">
                            <input type="radio" class="weui-tabselection__tab__input" value="large"/>
                            <span class="ant-radio-button-inner"></span>
                        </span>
                        <span>选项4</span>
                    </label>
                </div>
            </div>

        <div class="weui-cell weui-cell-list weui-cell__vertical">
            <div class="weui-cell__bd weui-cell__multipline">
                上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行
            </div>
            <div class="weui-flex weui-tabselection">
                <label class="weui-flex__item weui-tabselection__tab weui-tabselection__tab_checked">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="small"/>
                        <span class="ant-radio-button-inner"></span>
                    </span>
                    <span>选项1</span>
                </label>
                <label class="weui-flex__item weui-tabselection__tab">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="default"/>
                        <span class="ant-radio-button-inner" ></span>
                    </span>
                    <span>选项2</span>
                </label>
                <label class="weui-flex__item weui-tabselection__tab">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="large"/>
                        <span class="ant-radio-button-inner"></span>
                    </span>
                    <span>选项3</span>
                </label>
                <label class="weui-flex__item weui-tabselection__tab">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="large"/>
                        <span class="ant-radio-button-inner"></span>
                    </span>
                    <span>选项4</span>
                </label>
                <label class="weui-flex__item weui-tabselection__tab">
                    <span class="weui-tabselection__tab__btn">
                        <input type="radio" class="weui-tabselection__tab__input" value="large"/>
                        <span class="ant-radio-button-inner"></span>
                    </span>
                    <span>选项5</span>
                </label>
            </div>
        </div>
    </div>
  </div>
</div>

<script type="text/javascript">
    $(function () {
        $('.weui-tabselection__tab').on('click', function () {
            $(this).addClass('weui-tabselection__tab_checked').siblings('.weui-tabselection__tab_checked').removeClass('weui-tabselection__tab_checked');
        });
    });
</script>