phone底部彈出插件製做

前言

最近製做了一個手機底部彈出的插件，來和小夥伴們分享一波 主要內容是分爲考慮多個按鈕，以及一個按鈕兩個按鈕時如何出現按鈕以及觸發事件如何分辨，以及按鈕的上色，若是喜歡的話能夠點波贊/關注，支持一下，但願你們看完本文能夠有所收穫。 

git連接

下面是實現效果 

 思考以及實現步驟 

首先咱們看下使用方式來思考思路

1.使用的時候直接使用BBsg變量裏面的EjecatAlertL

2.注入咱們要出現的按鈕名稱以及按鈕顏色

3.回調的使用

思考。

咱們在ok數組裏面注入多個，怎麼實現呢？，回調怎麼實現呢？

經過咱們經常使用的JQ插件方法

仍是同樣咱們先會有一個大的class的父類

;(function(){
    //initializing是爲了解決咱們以前說的繼承致使原型有多餘參數的問題。當咱們直接將父類的實例賦值給子類原型時。是會調用一次父類的構造函數的。因此這邊會把真正的構造流程放到init函數裏面，經過initializing來表示當前是否是處於構造原型階段，爲true的話就不會調用init。
    //fnTest用來匹配代碼裏面有沒有使用super關鍵字。對於一些瀏覽器`function(){xyz;}`會生成個字符串，而且會把裏面的代碼弄出來，有的瀏覽器就不會。`/xyz/.test(function(){xyz;})`爲true表明瀏覽器支持看到函數的內部代碼，因此用`/\b_super\b/`來匹配。若是不行，就無論三七二十一。全部的函數都算有super關鍵字，因而就是個一定匹配的正則。
    var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

    // The base Class implementation (does nothing)
    // 超級父類
    this.Class = function(){};

    // Create a new Class that inherits from this class
    // 生成一個類，這個類會具備extend方法用於繼續繼承下去
    Class.extend = function(prop) {
        //保留當前類，通常是父類的原型
        //this指向父類。初次時指向Class超級父類
        var _super = this.prototype;

        // Instantiate a base class (but only create the instance,
        // don't run the init constructor) //開關 用來使原型賦值時不調用真正的構成流程 initializing = true; var prototype = new this(); initializing = false; // Copy the properties over onto the new prototype for (var name in prop) { // Check if we're overwriting an existing function
            //這邊其實就是很簡單的將prop的屬性混入到子類的原型上。若是是函數咱們就要作一些特殊處理
            prototype[name] = typeof prop[name] == "function" &&
            typeof _super[name] == "function" && fnTest.test(prop[name]) ?
                (function(name, fn){
                    //經過閉包，返回一個新的操做函數.在外面包一層，這樣咱們能夠作些額外的處理
                    return function() {
                        var tmp = this._super;

                        // Add a new ._super() method that is the same method
                        // but on the super-class
                        // 調用一個函數時，會給this注入一個_super方法用來調用父類的同名方法
                        this._super = _super[name];

                        // The method only need to be bound temporarily, so we
                        // remove it when we're done executing //由於上面的賦值，是的這邊的fn裏面能夠經過_super調用到父類同名方法 var ret = fn.apply(this, arguments); //離開時 保存現場環境，恢復值。 this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; } // 這邊是返回的類，其實就是咱們返回的子類 function Class() { // All construction is actually done in the init method if ( !initializing && this.init ) this.init.apply(this, arguments); } // 賦值原型鏈，完成繼承 Class.prototype = prototype; // 改變constructor引用 Class.prototype.constructor = Class; // 爲子類也添加extend方法 Class.extend = arguments.callee; return Class; }; })(); 複製代碼

var EjectAlert = Class.extend({ //alert
    bind: function (that) {//默認綁定
    	var html = ''
    	html+= '<div class="t-alert-content"><div class="t-company-add t-alert-transform">'
    	if (that.len==1) {
    		html+= '<div class="t-company-Determine t-company-ok" data-index="0" style="color:'+this.content[0].color+'">'+this.content[0].title+'</div>'
    	}else{
    		if (that.len==2) {
    			html+= '<div class="t-company-Determine-left t-company-ok" data-index="0" style="color:'+this.content[0].color+'">'+this.content[0].title+'</div>'
    			html+= '<div class="t-company-Determine-right t-company-ok" data-index="1" style="color:'+this.content[1].color+'">'+this.content[1].title+'</div>'
    		}else{
    			for (var i = 0; i < that.len; i++) {
	    			if (i==0) {
	    				html+= '<div class="t-company-Determine-left t-company-ok" data-index="'+i+'" style="color:'+this.content[i].color+'">'+this.content[i].title+'</div>'
	    			}else{
	    				if (i==that.len-1) {
	    					html+= '<div class="t-company-Determine-right t-company-ok" data-index="'+i+'" style="color:'+this.content[i].color+'">'+this.content[i].title+'</div>'
	    				}else{
	    					html+= '<div class="t-company-Determine-center t-company-ok" data-index="'+i+'" style="color:'+this.content[i].color+'">'+this.content[i].title+'</div>'
	    				}
	    			}
    			}
    		}
    	}
		html+= '<div class="t-company-cancal">取消</div></div></div>'
        $("body").append(html);
        setTimeout(function(){
			$(".t-company-add").removeClass('t-alert-transform')
        },100)
        $('.t-company-cancal').on('click',function () {
            setTimeout(function(){
                $('.t-alert-content').remove()
            },200)
            $(".t-company-add").addClass('t-alert-transform')
        });
        $('.t-alert-content').on('click',function () {
            setTimeout(function(){
                $('.t-alert-content').remove()
            },200)
            $(".t-company-add").addClass('t-alert-transform')
        });
        $('.t-company-ok').on('click',function () {
        	that.ok($(this).data().index)
        	$('.t-alert-content').remove()
        });
    },
    init:function(options){//默認加載
    	this.content = options.ok;
    	this.color = options.color;
    	this.len = options.ok.length;
        this.ok = options.suss;           //ok的方法
        if (options.close) {
        	this.close = options.close;     //取消的方法
        }
        this.show()
    },
    show: function () {
        this.bind(this)
    },
    ok: function (index) {    //點擊肯定
        return index
    },
    close : function () { //點擊取消
        return true
    }
});
var BBsg = (function () {
    return {
        EjectAlertL:function (res) {//綁定alert
            return new EjectAlert(res);
        }
    }
}());複製代碼

咱們定義一個子類爲EjectAlertL 而後把他賦予給BBsg的使用

.t-alert-content{
	box-sizing: border-box;
	top: 0;
	left: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	background:rgba(4,4,15,0.4);
}
.t-alert-transform{
	transform: translate3d(0,100%,0); 
}
.t-company-add{
	box-sizing: border-box;
	padding: 10px;
	width: 100%;
	/*height: 200px;*/
	position: fixed;
	bottom: 0;
	left: 0;
	transition: transform 0.2s;
	z-index: 10
}
.t-company-Determine{
	box-sizing: border-box;
	width: 100%;
	padding: 16px;
	border-radius: 14px;
	font-size: 20px;
	background:rgba(248,248,248,0.82);
	text-align: center;
	color: #007AFF;
	font-weight: bold;
	margin-bottom: 10px 
}
.t-company-cancal{
	box-sizing: border-box;
	width: 100%;
	padding: 16px;
	font-size: 20px;
	border-radius: 14px;
	background: white;
	text-align: center;
	color: #007AFF;
	font-weight: bold;
}
.t-company-Determine-left{
	box-sizing: border-box;
	width: 100%;
	padding: 16px;
	font-size: 20px;
	background:rgba(248,248,248,0.82);
	border-radius: 14px 14px 0 0 ;
	text-align: center;
	color: #007AFF;
	font-weight: bold;
	border-bottom: 1px solid #04040F; 
}
.t-company-Determine-right{
	box-sizing: border-box;
	width: 100%;
	padding: 16px;
	font-size: 20px;
	background:rgba(248,248,248,0.82);
	border-radius: 0 0 14px 14px;
	text-align: center;
	color: #007AFF;
	font-weight: bold;
	margin-bottom: 10px 
}
.t-company-Determine-center{
	box-sizing: border-box;
	width: 100%;
	padding: 16px;
	font-size: 20px;
	background:rgba(248,248,248,0.82);
	text-align: center;
	color: #007AFF;
	font-weight: bold;
	border-bottom: 1px solid #04040F; 
}
複製代碼