摘要:構造函數的原型方法合并自定義參數移除已存在的彈窗原型中提供了和方法。方法可以接受參數,也是一個參數對象,與在構造函數中的方法一樣,主要是為了方便更改彈窗功能。
簡易彈窗 開發說明
項目使用原型對象的方式實現彈窗的基本功能
項目依賴jquery,如果使用zepto,可能需要改動代碼,未測試,有問題請反饋,及時解決
項目提供了可定制彈窗,可以自定義按鈕,標題,以及對應按鈕的回調函數
樣式完全可以按照自己的需求自定義,很靈活。
css樣式/*dialog*/ body.locked{overflow-y:hidden;} .dialog-box{ width:100%;height:100%;max-width:720px;position: fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.3);z-index:1000;display:none;} .dialog-box .dialog-content{width:460px;padding:30px 10px;height:auto;border-radius:10px; background: #ffffff;min-height:100px;position:absolute;top:50%;left:50%; transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);z-index:1001;} .dialog-box .dialog-title,.dialog-box .dialog-btn{color:#666666;font-size: 30px;text-align:center;} .dialog-box .dialog-title{padding:0 12px;} .dialog-box .dialog-btns{text-align:center;} .dialog-box .dialog-btn{display:inline-block;width:130px;margin:28px 44px 0;border-radius: 4px;height:56px;line-height: 56px;} .dialog-box .dialog-cancel-btn{background: #ffffdffffd;} .dialog-box .dialog-confirm-btn{background: #9cbf42;color:#ffffff;} .store-switch-tip{color:#9cbf42;font-size: 30px;padding:0 6px;} 基本樣式設置,可以根據自己的需求自定義樣式彈窗構造函數
Dialog = function( options ){ var defaultOptions = { container : "dialog-box", btns : [ { klass : "dialog-cancel-btn", txt:"取消"}, { klass : "dialog-confirm-btn", txt : "確認"} ] }; // 合并自定義參數 this.options = $.extend({}, defaultOptions, options || {}); }; 1. options : 參數對象,如果不傳則系統默認,參數類型必須是對象,與定義的defaultOptions格式一致 2. $.extend() :合并參數,不知道其用法的,請查閱相關資料。構造函數的原型方法
Dialog.prototype = { $body : $("body"), constructor : Dialog, show : function( title ){ var _self = this, args = Array.prototype.slice.apply(arguments), options = _self.options; args.shift(); _self.$body.addClass("locked"); setTimeout(function(){ $("." + options.container ).show().find(".dialog-title").html( title ); $.each(options.btns,function( k, v ){ $("." + v.klass ).data( "fn",args[k] || function(){} ); }); },30); }, init : function(opt){ var _self = this, options = $.extend({}, _self.options, opt || {}) , // 合并自定義參數 btnsHTML = "", node = $("." + options.container ).remove(); // 移除已存在的彈窗 node = null; $.each( options.btns, function( k, v ){ btnsHTML += "" + v.txt + ""; }); $("組件的使用" + " ").appendTo("body"); _self._event(); return _self; }, _event : function(){ var _self = this; var options = _self.options; $("." + options.container ).on("click", ".dialog-btn", function(e){ e.stopPropagation(); _self.$body.removeClass("locked"); $("." + options.container ).hide(); $(this).data("fn")(); }); } }; 1.原型中提供了init和show方法。 init方法可以接受參數,也是一個參數對象,與在構造函數中的方法一樣,主要是為了方便更改彈窗功能。 show方法主要是做顯示處理,需要傳標題,和相應按鈕的回調函數,并將回調函數綁定在相應的按鈕上,以待按鈕觸發事件時回調。 2.按鈕回調函數的綁定是通過jquery中的 data 方法實現的,可以查閱相關的資料" + "" + "" + "" + btnsHTML + "" + "
// 實例化彈窗對象 var dialog = new Dialog(); // var dialog = new Dialog({ // 可以配置相應的參數,也可以不配置使用默認,默認是一個確認一個取消,注意參數格式,請參照默認參數配置 // }); dialog.init(); // 初始化彈窗 dialog.show("我是標題",function(){ alert("按鈕1觸發后的回調!") },function(){ console.log("按鈕2的回調函數!"); }[,...]);// 注意回調函數要和按鈕一一對應。 當然你也可以連著寫 如:dialog.init().show(); 如果需要的話,你也可以在彈窗初始話的時候傳參,修改默認配置參數。在實例化后,是雙按鈕,然后有需要一個但按鈕。 這時你無需在創建一個彈窗實例,直接調用實例的init方法,配置相應的參數即可。你可以這樣使用: dialog.init({ btns : [ { klass : "dialog-confirm-btn", txt : "知道了"} ] }).show("我只有一個按鈕哈",function(){alert("點擊我的回調哈")});
如在使用過程中遇到任何問題,或者有更好的方案歡迎留言,謝謝!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89566.html
摘要:構造函數的原型方法合并自定義參數移除已存在的彈窗原型中提供了和方法。方法可以接受參數,也是一個參數對象,與在構造函數中的方法一樣,主要是為了方便更改彈窗功能。 簡易彈窗 開發說明 項目使用原型對象的方式實現彈窗的基本功能 項目依賴jquery,如果使用zepto,可能需要改動代碼,未測試,有問題請反饋,及時解決 項目提供了可定制彈窗,可以自定義按鈕,標題,以及對應按鈕的回調函數 樣式...
移動端彈窗插件第二版,包括常見的 alert、confirm、toast、notice 四種類型彈窗,支持 jQuery 和 Zepto 庫。 特性 支持常見的 alert、confirm、toast、notice 四種類型彈窗 可選擇使用 IOS 或者 Material Design 風格的彈窗 可自定義按鈕的文字、樣式、回調函數,支持多個按鈕 多個彈窗狀態改變回調函數 同時支持 jQuery...
摘要:在隨后的版本中,團隊一直在修改原生彈窗的表現。所以這種原生彈窗的最大用處不是用來提示用戶信息,而是傷害用戶。團隊在中移除了對彈窗的支持。獲取用戶輸入可以用中的元素。作為的元素,目前除了和以外,其它瀏覽器均未支持。 自 1995 年 JavaScript 誕生之初,就包含了 3 個方法 alert()、confirm() 和 prompt()。在隨后的 Chrome 版本中,Chrome...
摘要:三更新內容在原來項目的基礎上,做了如下更新數據庫重新設計,改成以用戶分組的數據庫結構應數據庫改動,所有接口重新設計,并統一采用和網易立馬理財一致的接口風格刪除原來游客模式,增加登錄注冊功能,支持彈窗登錄。 這個項目最初其實是fork別人的項目。當初想接觸下mongodb數據庫,找個例子學習下,后來改著改著就面目全非了。后臺和數據庫重構,前端增加了登錄注冊功能,僅保留了博客設置頁面,但是...
閱讀 3813·2021-10-12 10:11
閱讀 3637·2021-09-13 10:27
閱讀 2540·2019-08-30 15:53
閱讀 1972·2019-08-29 18:33
閱讀 2189·2019-08-29 14:03
閱讀 994·2019-08-29 13:27
閱讀 3316·2019-08-28 18:07
閱讀 763·2019-08-26 13:23