HQUI 备份

最新推荐文章于 2022-07-23 22:00:26 发布
最新推荐文章于 2022-07-23 22:00:26 发布
阅读量407 收藏
点赞数 1
分类专栏： Javascript HTML/CSS sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lidysun/article/details/83270446
版权
Javascript 同时被 3 个专栏收录
41 篇文章 0 订阅
订阅专栏
HTML/CSS
17 篇文章 0 订阅
订阅专栏
sass
2 篇文章 0 订阅
订阅专栏

预览
在这里插入图片描述
Sass

// incofont
@font-face {
  font-family: 'iconfont';  /* project id 739021 */
  src: url('http://at.alicdn.com/t/font_739021_bpoyyzho9er.eot');
  src: url('http://at.alicdn.com/t/font_739021_bpoyyzho9er.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_739021_bpoyyzho9er.woff') format('woff'),
  url('http://at.alicdn.com/t/font_739021_bpoyyzho9er.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_739021_bpoyyzho9er.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
// variable
$theme:#c00;
$blue:#007bff; 
$success:#5cb85c; 
$warm:#eea236;
$danger:#d9534f;

// mixin
@mixin btn-size($paddingX:5px,$paddingY:10px,$height:15px,$font-size:14px,$line-height:$height){
    padding:$paddingX $paddingY;
    height:$height;
    line-height:$line-height;
    font-size:$font-size;
}

@mixin prefixer($k,$v,$prefixers:webkit moz ms o){
    @each $pre in $prefixers{
        @if $pre == webkit{
            -webkit-#{$k}:$v
        }@else if $pre == moz{
            -moz-#{$k}:$v
        }@else if $pre == ms{
            -ms-#{$k}:$v
        }@else{
            -o-#{$k}:$v
        }
    }
    #{$k}:$v;
}

@mixin btn-color($bgColor,$bdColor:$bgColor,$color:#fff,$bgHover:darken($bgColor,10%),$bdHover:$bgHover,$colorHover:#fff){
    background-color:$bgColor;
    border:1px solid $bdColor;
    color:$color;
    &:hover{
        background-color:$bgHover;
        border-color:$bdHover;
        color:$colorHover;
    }
}

@mixin input-width($width,$paddingL,$paddingR){
    width:($width)-($paddingL)-($paddingR)-2px;
}

/* basic */
*{margin:0;padding:0;}

.link{
    color:$blue;
    &:hover{color:darken($blue,10%);}
}
a{@extend .link;}
.highlight{color:$theme;}
.inline-b{display:inline-block;*zoom:1;*display:inline;}

.cl{
    &{zoom:1;}
    &:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
}
.fl{float:left;}
.fr{float:right;}
.text-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* button button-group*/
.btn{
    &{display:inline-block;text-align:center;text-decoration:none;outline:none;vertical-align:middle;font-weight:400;cursor:pointer;white-space:nowrap;}
    @include prefixer(transition,all .15s);
    &.active,&:active{@include prefixer(box-shadow,inset 0 3px 5px rgba(0,0,0,.125));}
    &.radius{@include prefixer(border-radius,3px);}
    &.block{display:block;}
    i{font-style:normal;}

    // sm 22px
    &.btn-sm{@include btn-size(2px,5px,16px,12px);}
    // sm 27px
    &.btn-md{@include btn-size();}
    // xs 37px
    &.btn-lg{@include btn-size(8px,12px,19px,18px);}

    &.btn-theme{
        @include btn-color(
            $bgColor:$theme,
            $bgHover:lighten($theme,5%)
        );
    }
    &.btn-default{
        @include btn-color(
            $bgColor:#fff,
            $bdColor:#ccc,
            $color:#323232,
            $bgHover:#e6e6e6,
            $bdHover:#adadad,
            $colorHover:#323232
        );
    }
    &.btn-success{@include btn-color($bgColor:$success);}
    &.btn-danger{@include btn-color($bgColor:$danger);}
    &.btn-warm{@include btn-color($bgColor:$warm);}
    &.btn-disabled{
        cursor: not-allowed;
        @include btn-color(
            $bgColor:#fbfbfb,
            $bdColor:#e6e6e6,
            $color:#c9c9c9,
            $bgHover:#fbfbfb,
            $bdHover:#e6e6e6,
            $colorHover:#c9c9c9
        );
    }
    &.btn-link{
        @include btn-color(
            $bgColor:transparent,
            $color:$blue,
            $colorHover:darken($blue,10%)
        );
    }
}
.btn-group{
    &{display:inline-block;margin:0 8px 8px -1px;@extend .cl;}
    &>.btn{float:left;margin-left:-1px;}
    &.btn-group-sm{
        &>.btn{@extend .btn.btn-sm;}
        &.radius{
            &>.btn{
                &:first-child{
                    @include prefixer(border-top-left-radius,3px);
                    @include prefixer(border-bottom-left-radius,3px);
                }
                &:last-child{
                    @include prefixer(border-top-right-radius,3px);
                    @include prefixer(border-bottom-right-radius,3px);
                }
            }
        }
    }
    &.btn-group-md{
        &>.btn{@extend .btn.btn-md;}
        &.radius{
            &>.btn{
                &:first-child{
                    @include prefixer(border-top-left-radius,5px);
                    @include prefixer(border-bottom-left-radius,5px);
                }
                &:last-child{
                    @include prefixer(border-top-right-radius,5px);
                    @include prefixer(border-bottom-right-radius,5px);
                }
            }
        }
    }
    &.btn-group-lg{
        &>.btn{@extend .btn.btn-lg;}
        &.radius{
            &>.btn{
                &:first-child{
                    @include prefixer(border-top-left-radius,7px);
                    @include prefixer(border-bottom-left-radius,7px);
                }
                &:last-child{
                    @include prefixer(border-top-right-radius,7px);
                    @include prefixer(border-bottom-right-radius,7px);
                }
            }
        }
    }
}

/* form form-group */
.input{
    &{display:inline-block;border:1px solid #e1e1e1;height:17px;line-height:17px;font-size:14px;outline:none;vertical-align:middle;}
    &[disabled]{cursor:not-allowed;background-color:#ebebeb;}
    // &[readonly]:focus{border-color:#e1e1e1;}
    &.error{border-color:lighten($danger,28%);background-color:lighten($danger,38%);}
    &:focus{border-color:$theme;}
    &.input-md{
        &{padding:4px}
        &.input-50{@include input-width(50,4,4);}
        &.input-100{@include input-width(100,4,4);}
        &.input-150{@include input-width(150,4,4);}
        &.input-200{@include input-width(200,4,4);}
        &.input-250{@include input-width(250,4,4);}
        &.input-300{@include input-width(300,4,4);}
    }
    &.input-lg{
        &{padding:9px}
        &.input-50{@include input-width(50,9,9);}
        &.input-100{@include input-width(100,9,9);}
        &.input-150{@include input-width(150,9,9);}
        &.input-200{@include input-width(200,9,9);}
        &.input-250{@include input-width(250,9,9);}
        &.input-300{@include input-width(300,9,9);}
    }
}

.form-group{
    .form-required,.form-tips{display:inline-block;font-style:normal;vertical-align:middle;}
    .form-required{margin-right:2px;font-size:16px;color:$theme;}
    .form-tips{margin-left:4px;font-size:12px;color:#969696;}
    // form-tips-bottom's padding-left should equal to form-label's width
    .form-tips-bottom{display:block;padding-left:130px;line-height:16px;max-width:300px;}
    .form-label{
        &{display:inline-block;vertical-align:middle;width:130px;text-align:right;color:#646464;font-size:14px;}
        &.form-label-multiple{line-height:14px;}
    }
    .form-item{margin-bottom:15px;}
    .form-textarea{vertical-align: top;}
}

.dropdown{
    &{position:relative;z-index:1;cursor:pointer;padding:4px 0;@extend .input;*display:inline;*margin-right:4px;}
    &.disabled,&[disabled]{cursor:not-allowed;background-color: #ebebeb;}
    .dropdown-value,.dropdown-options{position:absolute;z-index:1;}
    .dropdown-value{*height:25px;top:0;left:4px;right:27px;bottom:0;line-height:25px;color:#646464;border-right:1px solid #e1e1e1;@extend .text-v;}
    .dropdown-value~.iconfont{position:absolute;z-index:1;text-align:center;right:1px;top:0;bottom:0;font-size:18px;width:25px;line-height:26px;@include prefixer(transition,all .15s);}
    .dropdown-options{
        &{display:none;top:25px;left:-1px;right:-1px;border:1px solid #e1e1e1;font-size:12px;color:#969696;background:#fff;}
        dd{padding:5px 4px;line-height:14px;}
        dd:hover{background:#f0f0f0;}
    }
    &.active,
    &.active .dropdown-value,
    &.active .dropdown-options{border-color:$theme;}
    &.active .dropdown-options{display:block;}
    &.active .iconfont{color:$theme;@include prefixer(transform,rotate(180deg));}
    &,&.dropdown-100{@include input-width(100,0,0);}
    &.dropdown-150{@include input-width(150,0,0);}
    &.dropdown-200{@include input-width(200,0,0);}
    &.dropdown-250{@include input-width(250,0,0);}
    &.dropdown-300{@include input-width(300,0,0);}
}
.radio-group,
.checkbox-group,
.radio,
.radio *,
.checkbox,
.checkbox *,
.switch,
.switch *,
.form-textarea{@extend .inline-b;}
.radio{
    &,*{vertical-align:middle;}
    &{cursor:pointer;margin-right:10px;}
    i{font-size:20px;color:#c2c2c2;}
    span{font-size:14px;color:#646464;}
    &.radio-success i{color:$success;}
    &.radio-warm i{color:$warm;}
    &.radio-danger i{color:$danger;}
    &.radio-disabled{
        &{cursor:not-allowed;}
        i,span{color:#d2d2d2;}
    }
}
.checkbox{
    &,*{vertical-align:middle;}
    &{cursor:pointer;margin-right:10px;}
    i{font-size:16px;color:#c2c2c2;}
    span{font-size:14px;color:#646464;}
    &.checkbox-success i{color:$success;}
    &.checkbox-warm i{color:$warm;}
    &.checkbox-danger i{color:$danger;}
    &.checkbox-disabled{
        &{cursor:not-allowed;}
        i,span{color:#d2d2d2;}
    }
}
.switch{
    &,*{vertical-align:top;@include prefixer(transition,all 0.15s);}
    &{cursor:pointer;margin-right:10px;position:relative;z-index:0;height:16px;line-height:16px;padding:3px 5px;background:#fff;border:1px solid #d2d2d2;color:#999;@include prefixer(border-radius,20px);}
    span{font-size:12px;margin:0;padding:0 0 0 20px;font-style:normal;font-weight:500;min-width:15px;}
    i{position:absolute;top:3px;left:5px;right:auto;width:16px;height:16px;border-radius:20px;background:#d2d2d2;}
    &.switch-active{
        &{color:#fff;border-color:$theme;background:$theme;}
        span{padding:0 20px 0 0;}
        i{background-color:#fff;left:auto;right:5px}
    }
    &.switch-active.switch-success{border-color:$success;background:$success;}
    &.switch-active.switch-warm{border-color:$warm;background:$warm;}
    &.switch-active.switch-danger{border-color:$danger;background:$danger;}
}
.textarea{
    &{min-height:90px;height:auto;line-height:18px;padding: 4px;resize:vertical;border-radius: 2px;border:1px solid #e6e6e6;outline:none;}
    &:focus{border-color:$theme;}
}
.breadcrumb{
    &{height: 40px;line-height: 40px;color:#969696;font-size:14px;}
    .iconfont{font-size:12px;}
    .link{padding-right:3px;text-decoration:none;}
    .link+.link{padding-left:3px;}
    .iconfont,.link{color:#646464;}
    .trianele{font-family:'simsun';font-style:normal;}
}

Javascript

;
$(function() {
    Array.prototype.indexof = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) {
                return i;
            }
        }
        return -1;
    };
    Array.prototype.remove = function(val) {
        var index = this.indexof(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
    $.fn.placeholder = function() {
        if (!("placeholder" in document.createElement("input"))) {
            $(this).each(function(n, item) {
                var $me = $(item),
                    placeholder = $me.attr("placeholder");
                $me.val(placeholder);
                $me.bind("focus", function() {
                        $me.val() == placeholder && $me.val("");
                    })
                    .bind("blur", function() {
                        !$me.val() && $me.val(placeholder);
                    });
            });
        }
    };
    $.fn.dropdown = function(event, callback) {
        if (arguments.length < 1) {
            event = 'click';
        }
        if (event instanceof Function) {
            callback = event;
            event = 'click';
        }
        return $(this).each(function() {
            var $drop = $(this),
                $val = $drop.find('.dropdown-value'),
                $options = $drop.find('.dropdown-options'),
                isActived = $drop.hasClass('active'),
                isDisabled = $drop.hasClass('disabled') || $drop.attr('disabled');
            if (!isDisabled && !isActived) {
                $drop.on(event, function(e) {
                    $drop.addClass('active');
                }).on("mouseleave", function() {
                    $drop.removeClass('active');
                }).on("click", "dd", function() {
                    var $item = $(this),
                        selectedVal = $item.attr('data-value');
                    $val.text($item.text()).attr('data-value', selectedVal);
                    $drop.trigger('mouseleave');
                    //回调参数：选中的val值 该元素
                    callback && callback(selectedVal, $drop);
                });
            }

        });
    };
    $.fn.radio = function(callback) {
        return $(this).each(function() {
            var $me = $(this),
                $group = $me.closest('.radio-group'),
                key = $me.find('span').attr('data-value'),
                isDisabled = $me.hasClass('radio-disabled'),
                $siblings = $me.siblings('.radio'),
                $input = $me.siblings('.radio-input');
            !isDisabled && $me.on('click', function() {
                $me.addClass('radio-active').find('.iconfont').html('&#xe655;');
                $siblings.removeClass('radio-active').find('.iconfont').html('&#xe6c9;');
                $input.val(key);
                callback && callback(key, $group);
            });
        });
    };
    $.fn.checkbox = function(callback) {
        return $(this).each(function() {
            var $group = $(this),
                $checkbox = $group.find('.checkbox'),
                $input = $group.find('.checkbox-input'),
                $active = $group.find('.checkbox-active'),
                valueArr = [];
            if ($active.length) {
                $active.each(function() {
                    var $this = $(this);
                    valueArr.push($this.find('span').attr('data-value'));
                });
            }
            $checkbox.each(function() {
                var $me = $(this),
                    key = $me.find('span').attr('data-value'),
                    isDisabled = $me.hasClass('checkbox-disabled'),
                    $siblings = $me.siblings('.checkbox');
                if (!isDisabled) {
                    $me.on('click', function() {
                        var isActived = $me.hasClass('checkbox-active');
                        if (!isActived) {
                            $me.addClass('checkbox-active').find('.iconfont').html('&#xe612;');
                            valueArr.push(key);
                        } else {
                            $me.removeClass('checkbox-active').find('.iconfont').html('&#xe60f;');
                            valueArr.remove(key);
                        }
                        $input.attr('value', valueArr.join(','));
                        callback && callback(valueArr, $group);
                    });
                }
            });
        });
    };
    //坑：变量不能以'switch'命名 否则IE报错
    $.fn.switchItem = function(callback) {
        return $(this).each(function() {
            var $me = $(this),
                isDisabled = $me.hasClass('disabled'),
                $text = $me.find('span'),
                textArr = $text.attr('data-text').split('/'),
                textON = textArr[0],
                textOFF = textArr[1],
                $icon = $me.find('i');
            $text.text($me.hasClass('switch-active') ? textOFF : textON);
            if (!isDisabled) {
                $me.on('click', function() {
                    var isActived = $me.hasClass('switch-active');
                    $text.text(isActived ? textON : textOFF);
                    $me.toggleClass('switch-active');
                });
            }
        });
    };
    $('[placeholder]').placeholder();
    $('.dropdown').dropdown('mouseenter');
    $('.radio').radio(function(key, $group) {
        console.log('选择了：', key, $group);
    });
    $('.checkbox-group').checkbox(function(valArr, $group) {
        console.log('选择了：', valArr, $group);
    });
    $('.switch').switchItem();
});

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hqui</title>
    <link rel="stylesheet" href="./dist/css/global.css">
    <script src="./dist/js/jquery-1.11.3.min.js"></script>
    <script src="./src/js/hqui.js"></script>
    <style>
        .ui-item{width:1198px;margin:20px auto 0;padding:10px 10px 150px;text-align:left;border:1px solid #ddd;}
        .intro-item{margin-bottom:10px;}
        .intro-hd{font-size:18px;font-weight:500;margin-bottom:8px;}
        /*.hide{display:none;}*/
    </style>
</head>
<body>
    <div class="ui-item ui-btn">
        <div class="intro-item hide">
            <h4 class="intro-hd highlight">btn</h4>
            <div class="intro-bd">
                <a href="" class="btn btn-theme btn-sm">btn-sm</a>
                <a href="" class="btn btn-theme btn-md">btn-md</a>
                <a href="" class="btn btn-theme btn-lg">btn-lg</a>
                <a href="" class="btn btn-theme btn-lg">btn-theme</a>
                <a href="" class="btn btn-default btn-lg radius active">btn-default</a>
                <a href="" class="btn btn-success btn-lg">btn-success</a>
                <a href="" class="btn btn-danger btn-lg">btn-danger</a>
                <span href="" class="btn btn-warm btn-lg">btn-warm</span>
                <span href="" class="btn btn-disabled btn-lg">btn-disabled</span>
                <a href="" class="btn btn-link btn-lg">btn-link&gt;&gt;</a>
            </div>
        </div>
        <div class="intro-item hide">
            <h4 class="intro-hd highlight">btn-group</h4>
            <div class="intro-bd">
                <span class="btn-group btn-group-sm">
                    <a href="" class="btn btn-default">btn</a>
                    <a href="" class="btn btn-default">btn</a>
                    <a href="" class="btn btn-default">btn</a>
                </span>
                <span class="btn-group btn-group-sm radius">
                    <a href="" class="btn btn-default">btn</a>
                    <a href="" class="btn btn-default">btn</a>
                    <a href="" class="btn btn-default">btn</a>
                </span>
                <br>
                <span class="btn-group btn-group-md">
                    <a href="" class="btn btn-default">btn</a>
                    <a href="" class="btn btn-default">btn</a>
                    <a href="" class="btn btn-default">btn</a>
                </span>
                <span class="btn-group btn-group-md radius">
                    <a href="" class="btn btn-default">btn</a>
                    <a href="" class="btn btn-default">btn</a>
                    <a href="" class="btn btn-default">btn</a>
                </span>
                <br>
                <span class="btn-group btn-group-lg">
                    <a href="" class="btn btn-default">btn</a>
                    <a href="" class="btn btn-default">btn</a>
                    <a href="" class="btn btn-default">btn</a>
                </span>
                <span class="btn-group btn-group-lg radius">
                    <a href="" class="btn btn-default">btn</a>
                    <a href="" class="btn btn-default">btn</a>
                    <a href="" class="btn btn-default">btn</a>
                </span>
            </div>
        </div>
        <div class="intro-item hide">
            <h4 class="intro-hd highlight">input</h4>
            <div class="intro-bd">
                <input type="text" class="input input-md input-50" placeholder="50px">
                <input type="text" class="input input-md input-100" placeholder="100px">
                <input type="text" class="input input-md input-150" placeholder="150px">
                <input type="text" class="input input-md input-200" placeholder="200px">
                <input type="text" class="input input-md input-250 error" placeholder="250px">
                <input type="text" class="input input-md input-300" placeholder="md:300px*26px">
                <br><br>
                <input type="text" class="input input-lg input-50" placeholder="50px">
                <input type="text" class="input input-lg input-100" placeholder="100px">
                <input type="text" class="input input-lg input-150" placeholder="150px">
                <input type="text" class="input input-lg input-200" placeholder="200px">
                <input type="text" class="input input-lg input-250" disabled placeholder="250px">
                <input type="text" class="input input-lg input-300" placeholder="lg:300px*36px">
            </div>
        </div>
        <div class="intro-item">
            <h4 class="intro-hd highlight">form</h4>
            <div class="intro-bd">
                <div class="form-group">
                    <div class="form-item">
                        <label class="form-label">姓名：</label>
                        <input type="text" readonly class="input input-md input-300" value="**刚">
                        <span class="form-tips form-tips-right">温馨提示</span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-item">
                        <label class="form-label form-label-multiple">Register Number Bank Info：</label>
                        <input type="text" class="input input-lg input-300">
                        <span class="form-tips form-tips-bottom">请查收手机尾号为9120短信</span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-item">
                        <label class="form-label form-label-multiple">Register Number Bank Info：</label>
                        <input type="text" class="input input-md input-100">
                        <a class="btn btn-md btn-default" href="">获取验证码</a>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-item">
                        <label class="form-label form-label-multiple">Register Number Bank Info：</label>
                        <input type="text" class="input input-lg input-100">
                        <a class="btn btn-lg btn-disabled" href=""><i>58</i>s后重新获取</a>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-item">
                        <label class="form-label">地址：</label>
                        <div class="dropdown">
                            <span class="dropdown-value" data-value="-1">省份</span>
                            <i class="iconfont">&#xe654;</i>
                            <dl class="dropdown-options">
                                <dd class="dropdown-tips" data-value="-1">请选择</dd>
                                <dd class="option" data-value="0">中国</dd>
                                <dd class="option" data-value="1">United State</dd>
                                <dd class="option" data-value="2">英国</dd>
                                <dd class="option" data-value="3">法国</dd>
                            </dl>
                        </div>
                        <div class="dropdown dropdown-150">
                            <span class="dropdown-value" data-value="-1">城市</span>
                            <i class="iconfont">&#xe654;</i>
                            <dl class="dropdown-options">
                                <dd class="dropdown-tips" data-value="-1">请选择</dd>
                                <dd class="option" data-value="0">中国</dd>
                                <dd class="option" data-value="1">美国</dd>
                                <dd class="option" data-value="2">英国</dd>
                                <dd class="option" data-value="3">法国</dd>
                            </dl>
                        </div>
                        <div class="dropdown dropdown-200">
                            <span class="dropdown-value" data-value="-1">区域</span>
                            <i class="iconfont">&#xe654;</i>
                            <dl class="dropdown-options">
                                <dd class="dropdown-tips" data-value="-1">请选择</dd>
                                <dd class="option" data-value="0">中国</dd>
                                <dd class="option" data-value="1">美国</dd>
                                <dd class="option" data-value="2">英国</dd>
                                <dd class="option" data-value="3">法国</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-item">
                        <label class="form-label">单选框：</label>
                        <div class="radio-group">
                            <input class="radio-input" type="hidden" value="1">
                            <div class="radio radio-success radio-active">
                                <i class="iconfont">&#xe655;</i>
                                <span data-value="1">10后</span>
                            </div>
                            <div class="radio radio-warm">
                                <i class="iconfont">&#xe6c9;</i>
                                <span data-value="2">00后</span>
                            </div>
                            <div class="radio radio-danger">
                                <i class="iconfont">&#xe6c9;</i>
                                <span data-value="3">90后</span>
                            </div>
                            <div class="radio">
                                <i class="iconfont">&#xe6c9;</i>
                                <span data-value="4">80后</span>
                            </div>
                            <div class="radio radio-danger radio-disabled">
                                <i class="iconfont">&#xe6c9;</i>
                                <span data-value="0">上世纪</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-item">
                        <label class="form-label">复选框：</label>
                        <div class="checkbox-group">
                            <input class="checkbox-input" type="hidden" value="1">
                            <div class="checkbox checkbox-success checkbox-active">
                                <i class="iconfont">&#xe612;</i>
                                <span data-value="1">读书</span>
                            </div>
                            <div class="checkbox checkbox-warm">
                                <i class="iconfont">&#xe60f;</i>
                                <span data-value="2">电影</span>
                            </div>
                            <div class="checkbox checkbox-danger">
                                <i class="iconfont">&#xe60f;</i>
                                <span data-value="3">吃鸡</span>
                            </div>
                            <div class="checkbox">
                                <i class="iconfont">&#xe60f;</i>
                                <span data-value="4">睡觉</span>
                            </div>
                            <div class="checkbox checkbox-danger checkbox-disabled">
                                <i class="iconfont">&#xe60f;</i>
                                <span data-value="0">Whatever</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-item">
                        <label class="form-label">开关：</label>
                        <div class="switch"><span data-text="ON/OFF"></span><i></i></div>
                        <div class="switch switch-success switch-active"><span data-text="选择/不选"></span><i></i></div>
                        <div class="switch switch-warm switch-active"><span data-text="打开/取消"></span><i></i></div>
                        <div class="switch switch-danger switch-active"><span data-text="开启/关闭"></span><i></i></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-item">
                        <label class="form-label">文本域：</label>
                        <div class="form-textarea">
                            <textarea class="textarea" name="" id="" placeholder="请输入"></textarea>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-item">
                        <label class="form-label"></label>
                        <a href="" class="btn btn-theme btn-md">提&nbsp;交</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="intro-item">
            <h4 class="intro-hd highlight">breadcrumb</h4>
            <div class="intro-bd">
                <div class="breadcrumb">
                    <i class="iconfont icon-triangle-right">&#xe623;</i>
                    <a class="link" href="/">Home</a><i class="trianele">&gt;</i>
                    <a href="#" class="link">Development Tools</a><i class="trianele">&gt;</i>
                    <a href="" class="link">Peripheral Modules</a><i class="trianele">&gt;</i>
                    <span class="nav-current">RF &amp; Wireless Modules</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

未完待续，2018/10/22备份

wx_lidysun
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HQUI css/js前端框架
10-22
一个前端css/js UI快速成型框架， 基于Sass Jquery 兼容IE7，未完待续
构建属于自己的vue-ui组件库
最新发布
qq_45702207的博客
08-28 2317
构建属于自己的ui组件库，手把手教学，适用于有vue基础的读者
国产智多晶FPGA开发软件HqFPGA下载和安装方法
zgmxs的专栏
07-23 1487
智多晶FPGA 设计开发软件HQFPGA软件安装说明
国产智多晶FPGA基于Verilog的设计开发流程
zgmxs的专栏
07-23 1528
这里给大家介绍国产FPGA厂家“西安智多晶”微电子的FPGA基于Verilog进行逻辑设计的开发流程，步骤详细，可作为大家的评估参考。
mysql 管理、备份、还原及查询的图形化gui工具
dielucui7698的博客
09-16 157
mysql-workbench sudo apt-get install mysql-workbench 转载于:https://www.cnblogs.com/welhzh/p/5876735.html
Javascript正则匹配文件名和文件后缀
热门推荐
刚刚好
10-23 1万+
//去除字符串前后空格 String.prototype.trim = function() { return this.replace(/(^\s+)|(\s+$)/g, ''); }; //11位手机号格式化 function telFormat(tel, space) { space = space ? space : ' '; return String(tel)...
js数组求和、最大、最小值
刚刚好
06-29 8129
<script> window.onload=function(){ var i; var x=0; var arr = new Array(); for(i=1;i<=10;i++){ arr[i-1]=i; document.write("i的当前循环值是："+arr[i-1]+
Bootstrap
刚刚好
10-13 5425
终于下定决心来学习bootstrap了，2016-10-03。bootstrap安装 先看CDN：<!-- 放在head标签内 --> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"><!-- 可选的Bo
深入理解ES6箭头函数里的this，看这篇就够了
刚刚好
02-25 3903
一，了解前须知 1，箭头函数：出现的作用除了让函数的书写变得很简洁，可读性很好外；最大的优点是解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题。 2，我们常见的window属性和方法有alter，document，parseInt，setTimeout，setI...
webpack傻瓜入门教程
刚刚好
02-13 3887
webpack傻瓜入门教程
js闭包在实际开发中的应用
刚刚好
03-09 3788
js闭包实际开发中应用 闭包简单来说就是函数中的函数，也可以把它理解为一种现象，就是说一个函数要访问另外一个目标函数内部的变量，就要在目标函数中再定义一个函数（以此来把作用域链往下延长一段，目的就是为了利用js在找自由变量时,会沿着作用域链一级一级往上找的特点），并将这个定义的函数return出来，供外部使用。在实际开发中，闭包主要是用来封装变量，收敛权限 。 代码 function ...
express连接mysql
刚刚好
03-28 3363
安装并引入mysql var mysql = require('mysql') npm install mysql var mysql = require('mysql'); 创建连接配置 createConnection var connection = mysql.createConnection({ host: 'localhost', //数据库地址 port: '3306',/...
css js 打印背景图
刚刚好
04-03 2933
如果不对浏览器设置，直接打印时是无法打印背景图的。 方法一 ：css @media print { body{ -webkit-print-color-adjust:exact; -moz-print-color-adjust:exact; -ms-print-color-adjust:exact; print-c...
原生移动端滑动js
刚刚好
09-21 2825
移动端滑动js
js数组查找
刚刚好
07-06 2577
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>array</title> <meta name="description" content=""> <meta name="keywords" conte
滑动验证插件，兼容IE8
刚刚好
05-29 2139
废话不多说，直接砸代码！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑动验证</title> <style> .ui-slider-wrap { back...
js/jq模拟点击事件
刚刚好
07-28 1563
js/jq模拟点击事件
原生js实现jQuery parentsUntil 和 closest方法
刚刚好
03-26 1401
需求很简单，如下图：点击表格内每行的删除按钮时删除该行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo2</title> <style> *{margin:0;paddin...
css万能居中方法
刚刚好
07-06 1366
CSS万能居中
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值