jquery—components.prototype把经常复用的东西提出来

html:

js:

function components() {}

components.prototype={
    //dialog
    myDialog:function (message) {
        var myDialogLen=$("#myDialog").length;
        if(!myDialogLen) {   //如果界面上没有这个弹窗，就拼接
            var dialogString='';
            dialogString+='
';
            dialogString+='
';
            dialogString+='
'+message+'
';
            dialogString+='
确定
';
            dialogString+='
';
            dialogString+='
';
            $('body').append(dialogString);
        }

        $(".dialog-btn").on('click',function() {
            $("#myDialog").remove();
        });

    },
    //toast
    myToast:function (message,time) {
        var toast=$('#myToast').length;
        if(!toast) {   //如果界面上没有这个弹窗，就拼接
            var toastString = '';
            toastString += '
';
            toastString += '
';
            toastString += '
' + message + '
';
            toastString += '
';
            toastString += '
';
            $('body').append(toastString);

        }
       //如果界面上有这个弹窗，就显示隐藏
        $('.toast-mess').html(message);
        $('#myToast').fadeIn();
        setTimeout("$('#myToast').fadeOut()",time)
    },

    //白弹窗
    myPopup:function (message,time) {
        var popup=$('#myPopup').length;
        if(!popup) {
            var popupString = '';
            popupString += '
';
            popupString += '
';
            popupString += '
';
            popupString += '';
            popupString += '
';
            popupString += '
' + message + '
';
            popupString += '
';
            popupString += '
';
            $('body').append(popupString);

        }
        $('.popup-mess').html(message);
        $('#myPopup').fadeIn();
        setTimeout("$('#myPopup').fadeOut()",time)
    },

    // touch
    myTouch:function(color,pageX,pageY,uName){
        var touch=$('#myTouch').length;
        if(!touch){
            touchStyle = ''
            $($('head')[0]).append(touchStyle);
            var touchString = '';
            touchString += '
';
            touchString += '
';
            touchString += '
';
            touchString += '
';
            touchString += '
';
            touchString += '
';
            touchString += '
';
            touchString += '
'+ uName +'
';
            touchString += '
';
            touchString += '
';
            $('body').append(touchString);
        }
        $('#myTouch .touch-box').show();
        $('.touch-box .touch-name').css('background',color);
        $('.touch-box .touch-circle-dot').css('background',color);
        $('.touch-box .touch-circle-dot').css('box-shadow','0 0 5px 2px '+ color);
        $('.touch-box .touch-circle-big').css('border-color',color);
        $('.touch-box .touch-circle-pulse').css('background',color);
        $('.touch-box').css('left',pageX);
        $('.touch-box').css('top',pageY);
        $('.touch-box .touch-name').html(uName);
    }

}

css:

/********** component **********/
/* topWrapper: the full screen transparent backgrond*/
.top-wrapper{
    top:0;
    position:absolute;
    z-index:11;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.2);
    color:#333;
}

/* dialog */
.c-dialog{
    position:absolute;
    top:50%;
    left:50%;
    padding:0;
    width:280px;
    height:140px;
    border-radius:3px;
    background:#fff;
    font-size:16px;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* toast */
.c-toast{
    position:absolute;
    top:50%;
    left:50%;
    padding:20px 20px;
    width:180px;
    line-height:20px;
    border-radius:3px;
    background:rgba(0,0,0,0.5);
    box-shadow:0 0 2px 1px #333;
    font-size:16px;
    text-align:center;
    color: #fff;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 20;
}
.c-dialog .dialog-mess{
    padding:35px 20px;
    width:auto;
    height:auto;
    text-align:left;
    line-height:20px;
}
.c-dialog .dialog-btn{
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding:0;
    width: 70px;
    height: 30px;
    line-height: 30px;
    color: #4170b4;
    text-align: center;
    border-radius: 3px;
}
.c-dialog .dialog-btn:active{
    background:#eee;
}

/* myPopup */
.c-popup{
    position:absolute;
    top:50%;
    left:50%;
    width:320px;
    height:150px;
    border-radius:5px;
    background:#fff;
    font-size:16px;
    text-align:center;
    color: #fff;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 20;
}
.c-popup .popup-mess{
    color:#404040;
    font-size: 20px;
}
.c-popup .popup-img{
    width:70px;
    height:70px;
    border-radius: 50%;
    overflow: hidden;
    margin:20px auto 10px;
}
.c-popup .popup-img>img{
    width:100%;
    height:100%;
}

代码链接：
https://pan.baidu.com/s/1bGKCUU