手把手教你書寫對話框（構造函數&原型模式）

時間 2019-11-30

標籤手把手書寫對話框構造函數原型模式简体版

原文原文鏈接

分享點代碼，班門弄斧下，但願剛入門前端的能夠少走點彎路。javascript

該對話框是適合於手機端&pc端，基於微信weui修改而成。css

廢話少說，先看效果，貼代碼吧。html

這是alert效果圖，其實其餘都是同樣的。前端

開始貼代碼java

dialog.js部分jquery

  1 window.DialogBox=(function(){
  2  //三部曲
  3     //構造函數
  4     var WindowAlert=function(){
  5         this.cfg={
  6             content:"",
  7             btnCancle:null,
  8             btnSure:null,
  9             title:'舒適提示',
 10             sure:'我知道了',
 11             type:'text',
 12             cancle:'取消',
 13             template:''
 14         }
 15     }
 16     //定義方法
 17     WindowAlert.prototype={
 18 
 19         alert:function(cfg){
 20             var CFG=$.extend(this.cfg,cfg);            
 21             var boundingBox=$('<div class="weui_dialog_alert">'
 22             +'<div class="weui_mask"></div>'
 23             +'<div class="weui_dialog">'
 24             +'<div class="weui_dialog_hd"><strong class="weui_dialog_title">'
 25             +CFG.title
 26             +'</strong></div>'
 27             +'<div class="weui_dialog_bd">'
 28             +CFG.content
 29             +'</div>'
 30             +'<div class="weui_dialog_ft">'
 31             +'<a href="javascript:;" class="weui_btn_dialog primary" id="alert_sure">'
 32             +CFG.sure
 33             +'</a></div></div></div>');
 34             boundingBox.appendTo('body');
 35             btnSure=boundingBox.find('#alert_sure')
 36             btnSure.click(function(){
 37                 CFG.btnSure&&CFG.btnSure();
 38                 boundingBox.remove();
 39             })
 40         },
 41         confirm:function(cfg){
 42             var CFG=$.extend(this.cfg,cfg);            
 43             var boundingBox=$('<div class="weui_dialog_confirm">'
 44             +'<div class="weui_mask"></div>'
 45             +'<div class="weui_dialog">'
 46             +'<div class="weui_dialog_hd"><strong class="weui_dialog_title">'
 47             +CFG.title
 48             +'</strong></div>'
 49             +'<div class="weui_dialog_bd">'
 50             +CFG.content
 51             +'</div>'
 52             +'<div class="weui_dialog_ft">'
 53             +'<a href="javascript:;" class="weui_btn_dialog default" id="confirm_cancle">'
 54             +CFG.cancle
 55             +'</a>'
 56             +'<a href="javascript:;" class="weui_btn_dialog primary" id="confirm_sure">'
 57             +CFG.sure
 58             +'</a></div></div></div>');
 59             boundingBox.appendTo('body');
 60             btnSure=boundingBox.find('#confirm_sure')
 61             btnCancle=boundingBox.find('#confirm_cancle')
 62 
 63             btnSure.click(function(){
 64                 CFG.btnSure&&CFG.btnSure();
 65                 boundingBox.remove();
 66             })
 67              btnCancle.click(function(){
 68                 CFG.btnCancle&&CFG.btnCancle();
 69                 boundingBox.remove();
 70             })
 71         },
 72         prompt:function(cfg){
 73             var CFG=$.extend(this.cfg,cfg);            
 74             var boundingBox=$('<div class="weui_dialog_confirm">'
 75             +'<div class="weui_mask"></div>'
 76             +'<div class="weui_dialog">'
 77             +'<div class="weui_dialog_hd"><strong class="weui_dialog_title">'
 78             +CFG.title
 79             +'</strong></div>'
 80             +'<div class="weui_dialog_bd">'
 81             +'<form>'
 82             +'<input class="form-control" id="input-value" type="'
 83             +CFG.type
 84             +'"></form>'
 85             +'</div>'
 86             +'<div class="weui_dialog_ft">'
 87             +'<a href="javascript:;" class="weui_btn_dialog default" id="prompt_cancle">'
 88             +CFG.cancle
 89             +'</a>'
 90             +'<a href="javascript:;" class="weui_btn_dialog primary" id="prompt_sure">'
 91             +CFG.sure
 92             +'</a></div></div></div>');
 93             boundingBox.appendTo('body');
 94             btnSure=boundingBox.find('#prompt_sure')
 95             btnCancle=boundingBox.find('#prompt_cancle')
 96             btnSure.click(function(){
 97                 CFG.btnSure&&CFG.btnSure();
 98                 boundingBox.remove();
 99             })
100              btnCancle.click(function(){
101                 CFG.btnCancle&&CFG.btnCancle();
102                 boundingBox.remove();
103             })
104         }
105     }    
106     return WindowAlert;
107 })()

public.jsweb

 1 window.PublicFunc=(function(){
 2     var PublicFunc=function(){
 3       
 4     }
 5 
 6     PublicFunc.prototype={
 7 /** 
 8 * 彈出對話框 
 9 */            
10 alert:function(o) {
11     var o = o || {};
12     /*初始化變量*/
13     var content = o.content || '內容爲空',
14         title = o.title || '舒適提示',
15         success = o.success || function(){},
16         sure = o.sure || '我知道了';
17     var alertResult = G_DialogBox.alert({
18         content: content,
19         title: title,
20         sure: sure,
21         btnSure: function() {
22             success(true);
23         }
24     })
25 
26 },
27 /** 
28 * 彈出確認對話框 
29 */    
30 confirm:function(o) {
31     var o = o || {};
32     /*初始化變量*/
33     var content = o.content || '內容爲空',
34         title = o.title || '舒適提示',
35         sure = o.sure || '我知道了',
36         cancle = o.cancle || '取消',
37         success = o.success || function(){};
38     G_DialogBox.confirm({
39         content: content,
40         title: title,
41         sure: sure,
42         cancle: cancle,
43         btnSure: function() {
44             success(true);
45         },
46         btnCancle: function() {
47             success(false);
48         },
49     });
50 },
51 /** 
52 * 彈出文本對話框 
53 */    
54  prompt:function(o) {
55     var o = o || {};
56     /*初始化變量*/
57     var content = o.content || '',
58         title = o.title || '舒適提示',
59         sure = o.sure || '我知道了',
60         type = o.type || 'text',
61         cancle = o.cancle || '取消',
62         success = o.success || function(){};
63     G_DialogBox.prompt({
64         content: content,
65         title: title,
66         sure: sure,
67         cancle: cancle,
68         type:type,
69         btnSure: function() {
70             var data = $('#input-value').val();
71             o.success(true, data);
72         },
73         btnCancle: function() {
74             o.success(false, '');
75         },
76     });
77 }
78     }
79     return PublicFunc;
80 })()

html部分微信

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7     </head>
 8 
 9     <body>
10 
11         <button id="alert">
12             alert
13         </button>
14         <button id="confirm">
15             confirm
16         </button>
17         <button id="prompt">
18             prompt
19         </button>
20         <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>        
21         <script type="text/javascript">
22             var G_DialogBox = new DialogBox(); //初始化對話框
23             var G_publicFunc = new PublicFunc(); //從這裏調用
24 
25             //調用alert 傳遞一個對象
26             $('#alert').bind('click',function(){
27                     G_publicFunc.alert({
28                 title: '這是標題',
29                 content: '這是內容',
30                 sure: '我知道了'
31             });
32             })
33             //調用confirm 傳遞一個對象
34             $('#confirm').bind('click',function(){
35                     G_publicFunc.confirm({
36                 title: '這是標題',
37                 content: '這是內容',
38                 sure: '肯定',
39                 cancle: '取消'
40             });
41             })
42             //調用prompt 傳遞一個對象
43             $('#prompt').bind('click',function(){
44                     G_publicFunc.prompt({
45                 title: '這是標題',
46                 type: 'text',
47                 sure: '肯定',
48                 cancle: '取消'
49             });
50             })        
51         </script>
52     </body>
53 
54 </html>

css部分app

  1 .weui_dialog {
  2   position: fixed;
  3   z-index: 5000;
  4   width: 85%;
  5   top: 50%;
  6   left: 50%;
  7   transform: translate(-50%, -50%);
  8   -webkit-transform: translate(-50%, -50%);
  9   background-color: #fafafc;
 10   text-align: center;
 11   border-radius: 3px;
 12   -webkit-border-radius: 3px;
 13   overflow: hidden;
 14 }
 15 .weui_dialog_confirm .weui_dialog .weui_dialog_hd {
 16   padding: 1.2em 20px .5em;
 17 }
 18 .weui_dialog_confirm .weui_dialog .weui_dialog_bd {
 19   text-align: left;
 20 }
 21 .weui_dialog_hd {
 22   padding: 1.2em 0 .5em;
 23 }
 24 .weui_dialog_title {
 25   font-weight: 400;
 26   font-size: 17px;
 27 }
 28 .weui_dialog_bd {
 29   padding: 0 20px;
 30   font-size: 15px;
 31   color: #888888;
 32   word-wrap: break-word;
 33   word-break: break-all;
 34   /*輸入框*/
 35 }
 36 .weui_dialog_bd .form-control {
 37   display: block;
 38   width: 100%;
 39   height: 28px;
 40   font-size: 14px;
 41   line-height: 1.42857143;
 42   color: #555;
 43   background-color: #fff;
 44   background-image: none;
 45   border: 1px solid #ccc;
 46   border-radius: 4px;
 47   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 48   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 49   -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
 50   -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 51   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 52 }
 53 .weui_dialog_ft {
 54   position: relative;
 55   line-height: 42px;
 56   margin-top: 20px;
 57   font-size: 17px;
 58   display: flex;
 59   display: -webkit-box;
 60   display: -webkit-flex;
 61 }
 62 .weui_dialog_ft a {
 63   display: block;
 64   flex: 1;
 65   -webkit-box-flex: 1;
 66   -webkit-flex: 1;
 67   color: #3cc51f;
 68   text-decoration: none;
 69   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 70 }
 71 .weui_dialog_ft a:active {
 72   background-color: #eeeeee;
 73 }
 74 .weui_dialog_ft:after {
 75   content: " ";
 76   position: absolute;
 77   left: 0;
 78   top: 0;
 79   width: 100%;
 80   height: 1px;
 81   border-top: 1px solid #d5d5d6;
 82   color: #d5d5d6;
 83   transform-origin: 0 0;
 84   transform: scaleY(0.5);
 85   -webkit-transform-origin: 0 0;
 86   -webkit-transform: scaleY(0.5);
 87 }
 88 .weui_dialog_confirm .weui_dialog_ft a {
 89   position: relative;
 90 }
 91 .weui_dialog_confirm .weui_dialog_ft a:after {
 92   content: " ";
 93   position: absolute;
 94   left: 0;
 95   top: 0;
 96   width: 1px;
 97   height: 100%;
 98   border-left: 1px solid #d5d5d6;
 99   color: #d5d5d6;
100   transform-origin: 0 0;
101   transform: scaleX(0.5);
102   -webkit-transform-origin: 0 0;
103   -webkit-transform: scaleX(0.5);
104 }
105 .weui_dialog_confirm .weui_dialog_ft a:first-child:after {
106   display: none;
107 }
108 .weui_btn_dialog.default {
109   color: #353535;
110 }
111 .weui_btn_dialog.primary {
112   color: #0BB20C;
113 }
114 @media screen and (min-width: 1024px) {
115   .weui_dialog {
116     width: 35%;
117   }
118 }