一步步开发自己的博客 .NET版（10、前端对话框和消息框的实现）

关于前端对话框、消息框的优秀插件多不胜数。造轮子是为了更好的使用轮子，并不是说自己造的轮子肯定好。所以，这个博客系统基本上都是自己实现的，包括日志记录、响应式布局、评论功能等等一些本可以使用插件的。好了，废话不多时。我们来实现自己的对话框和消息框。

对话框

要求：可拖动、点击按钮后可回调

  • 画一个简单的模型框
<div class="hi-dialog-box clearfix">
        <div class="hi-dialog-title">系统提示</div>
        <div class="hi-dialog-content">
        </div>
        <div class="hi-dialog-foot">
            <input type="button" class="hi-dialog-determine" value="确定" />
            <input type="button" class="hi-dialog-cancel" value="取消" />
        </div>
</div>

 

  • 添上基本的样式
 div.hi-dialog-box {
            border: 1px #808080 solid;
            width: 350px;
            height: 200px;                    
            border-radius: 3px;
        }

            div.hi-dialog-box div.hi-dialog-title {
                border: 1px #808080 solid;
                margin: 1px;
                padding: 1px;
                background-color: #dedcdc;
                height: 14%;
                cursor: move;
                font-size: 20px;
            }

            div.hi-dialog-box div.hi-dialog-content {
                height: 65%;
                margin: 5px;            
            }

            div.hi-dialog-box div.hi-dialog-foot {
                margin: 1px;
                padding: 1px;
                height: 14%;
            }

                div.hi-dialog-box div.hi-dialog-foot input {
                    float: right;
                    margin-left: 5px;
                    font-size: 16px;
                }
View Code

效果图：

是不是像那么回事了，不过现在还不能拖动。拖动，说白了就是在鼠标移动的时候不停的修改绝对定位。

首先修改以下样式：

用js代码实现拖动效果：

//鼠标按下时
        $("div.hi-dialog-title").mousedown(function (event) {
            $("html").unbind();//首先清除事件方法
            var click_clientX = event.clientX;//记录鼠标按下时相对当前窗口的 x 坐标
            var click_clientY = event.clientY;//记录鼠标按下时相对当前窗口的 y 坐标
            //取的对话框容器
            var dialogBox = $(this).closest("div.hi-dialog-box");
            //记录对话框容器当前位置
            var dialogBoxX = parseInt($(dialogBox).css("left"));
            var dialogBoxY = parseInt($(dialogBox).css("top"));
            //鼠标移动时
            $("html").mousemove(dialog_mousemove = function (event) {
                //鼠标按下后移动量加上原来的位置
                var top = event.clientY - click_clientY + dialogBoxY;
                var left = event.clientX - click_clientX + dialogBoxX;
                //修改对话框位置（这里就实现了移动效果了）
                $(dialogBox).css({ "left": left, "top": top });
            });
            //鼠标按键松开时
            $("html").mouseup(function () {
                //清除鼠标移动事件
                $("html").unbind("mousemove", dialog_mousemove);
            });
        });

如果使用jquery.min.js，拖动一句代码搞定： $("div.hi-dialog-title").draggable(); 

 

以上js代码就实现了对话框的拖动效果。首先，只有当鼠标在对话框标题区域按下鼠标才可以拖动，然后鼠标移动的的时候实时计算和改变容器的位置，最后如果鼠标按键松开这清除鼠标移动事件。

  • 点击按钮后可回调

很多时候，我们点击确定或取消的时候我们需要执行回调（比如“您是否删除”，点击了确定后肯定需要做删除操作）。

如此，我们点击确定的时候会自动关闭对话框并可以执行自己需要执行的一些操作。可以，有同学会说，你这算什么狗屁对话框啊，html代码全都需要直接编码。是的，这只是简单的说下思路，下面我们来简单整理下。

效果图：

全部代码：（当然，这只是简单实现。还有很多需要继续细化的效果，如：背景遮罩、如果实现点击多次对话框）

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title></title>
  6     <style type="text/css">
  7         * {
  8             box-sizing: border-box;
  9         }
 10 
 11         .clearfix:after {
 12             content: ' ';
 13             display: table;
 14             clear: both;
 15         }
 16 
 17         .clearfix {
 18             *zoom: 1;
 19         }
 20 
 21         div.hi-dialog-box {
 22             border: 1px #808080 solid;
 23             width: 350px;
 24             height: 200px;
 25             position: absolute;
 26             top: 200px;
 27             left: 40%;
 28             border-radius: 3px;
 29         }
 30 
 31             div.hi-dialog-box div.hi-dialog-title {
 32                 border: 1px #808080 solid;
 33                 margin: 1px;
 34                 padding: 1px;
 35                 background-color: #dedcdc;
 36                 height: 14%;
 37                 cursor: move;
 38                 font-size: 20px;
 39             }
 40 
 41             div.hi-dialog-box div.hi-dialog-content {
 42                 height: 65%;
 43                 margin: 5px;
 44                 overflow: auto;
 45             }
 46 
 47             div.hi-dialog-box div.hi-dialog-foot {
 48                 margin: 1px;
 49                 padding: 1px;
 50                 height: 14%;
 51             }
 52 
 53                 div.hi-dialog-box div.hi-dialog-foot input {
 54                     float: right;
 55                     margin-left: 5px;
 56                     font-size: 16px;
 57                 }
 58     </style>
 59 </head>
 60 <body>
 61     <input value="对话框（确定）" onclick="click1();" type="button" />
 62     <input value="对话框（确定、取消）" onclick="click2();" type="button" />
 63     <div class="messg" style="margin: 10px; color: red; font-size: 23px"></div>
 64 
 65     <script src="../../Scripts/jquery-1.8.2.js"></script>
 66     <script type="text/javascript">
 67         var hiDialog = {
 68             init: function (title, messg, determineCallback, cancelCallback) {
 69 
 70                 title = title || "系统提示";
 71                 var determine = "", cancel = "";
 72                 if (typeof (determineCallback) == "function")
 73                     determine = '<input type="button" class="hi-dialog-determine" value="确定" />';
 74                 if (typeof (cancelCallback) == "function")
 75                     cancel = '<input type="button" class="hi-dialog-cancel" value="取消" />';
 76 
 77                 if (!$("div.hi-dialog-box").length) {
 78                     var hi_dialog_box = '<div class="hi-dialog-box clearfix">\
 79                                     <div class="hi-dialog-title"></div>\
 80                                     <div class="hi-dialog-content">\
 81                                     </div>\
 82                                     <div class="hi-dialog-foot">\
 83                                     </div>\
 84                                 </div>';
 85                     $("body").append(hi_dialog_box);
 86                 }
 87 
 88                 var $box = $("div.hi-dialog-box");
 89                 $box.find("div.hi-dialog-title").html(title);
 90                 $box.find("div.hi-dialog-content").html(messg);
 91                 $box.find("div.hi-dialog-foot").html(determine + cancel);
 92                 $("div.hi-dialog-box").show();
 93 
 94                 $box.find(".hi-dialog-determine").click(function () {
 95                     determineCallback();
 96                     hiDialog.close();
 97                 });
 98                 $box.find(".hi-dialog-cancel").click(function () {
 99                     cancelCallback();
100                     hiDialog.close();
101                 });
102 
103                 //鼠标按下时
104                 $("div.hi-dialog-title").mousedown(function (event) {
105                     $("html").unbind();
106                     var click_clientX = event.clientX;
107                     var click_clientY = event.clientY;
108                     var dialogBox = $(this).closest("div.hi-dialog-box");
109                     var dialogBoxX = parseInt($(dialogBox).css("left"));
110                     var dialogBoxY = parseInt($(dialogBox).css("top"));
111                     //鼠标移动时
112                     $("html").mousemove(dialog_mousemove = function (event) {
113                         var top = event.clientY - click_clientY + dialogBoxY;
114                         var left = event.clientX - click_clientX + dialogBoxX;
115                         $(dialogBox).css({ "left": left, "top": top });
116                     });
117                     //鼠标按键松开时
118                     $("html").mouseup(function () {
119                         $("html").unbind("mousemove", dialog_mousemove);
120                     });
121                 });
122             },
123             close: function () {
124                 $("div.hi-dialog-box").hide();
125             }
126         }
127     </script>
128     <script type="text/javascript">
129         function click1() {
130             hiDialog.init("系统提示！", "测试", function () {
131                 //点击确定后的回调执行
132                 $(".messg").text("点击了确定");
133             });
134         }
135 
136         function click2() {
137             hiDialog.init("系统对话框~~", "什么乱七八糟的啊...", function () {
138                 $(".messg").text("点击了确定~~~");
139             }, function () {
140                 $(".messg").text("点击了取消~~");
141             });
142         }
143     </script>
144 </body>
145 </html>
View Code

 

消息框

要求：自动定时关闭消息框、有消息分类（如：警告、错误、成功等）

  • 画一个简单的模型框
<div class="hi-message-box">
        <img class="hi-message-type" src="" />
        <span class="hi-message-messg">你不爱我了~~</span>
    </div>

 

  • 添上基本样式
<style type="text/css">
        div.hi-message-box {
            padding: 10px;
            padding-top: 15px;
            padding-bottom: 20px;
            background-color: #aee0c1;         
            min-width: 200px;
            max-width: 500px;
            font-size: 19px;
            border-radius: 3px;
        }
 </style>

 

效果图：

看上去是不是很简单呢？下面我们给它加上定时关闭消息功能。

  • 定时关闭消息（表骂我，就是这么简单。我也想写复杂的。）
 setTimeout(function () {
            $("div.hi-message-box").fadeOut("slow");
}, 1200);

 

效果图：

  • 加上消息类型（其实就是根据参数加不同的图片而已）
 setTimeout(function () {
            $("div.hi-message-box").fadeOut("slow");
        }, 1200);
  var $box = $("div.hi-message-box");
  $box.find("img.hi-message-type").attr("src", "imgs/Warning_24px.png")

 

 效果图：

加上图标是不是更像那么回事了？

如上，我们同样需要稍微整理下实现代码：

效果图：

全部代码：（同样，消息框也只是进行了简单实现。还有太多没有考虑，如（参数定位消息框位置、设置定时关闭时间、多次触发消息框））

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         * {
 8             box-sizing: border-box;
 9         }
10 
11         .clearfix:after {
12             content: ' ';
13             display: table;
14             clear: both;
15         }
16 
17         .clearfix {
18             *zoom: 1;
19         }
20 
21         div.hi-message-box {
22             padding: 10px;
23             padding-top: 15px;
24             padding-bottom: 20px;
25             background-color: #aee0c1;
26             position: absolute;
27             min-width: 200px;
28             max-width: 500px;
29             font-size: 19px;
30             border-radius: 3px;
31             top:200px;
32             left:45%;
33         }
34 
35             div.hi-message-box img {
36                 vertical-align: bottom;
37             }
38     </style>
39 </head>
40 <body>
41     <input type="button" onclick="success();" value="成功消息" />
42     <input type="button" onclick="error();" value="失败消息" />
43     <input type="button" onclick="warn();" value="警告消息" />
44     <script src="../../Scripts/jquery-1.8.2.js"></script>
45     <script type="text/javascript">
46         var hiMessageBox = {
47             init: function (type, messg) {
48                 var hiMessageBox = '<div class="hi-message-box">\
49                                     <img class="hi-message-type" src="" />\
50                                     <span class="hi-message-messg"></span>\
51                                 </div>';
52 
53 
54                 if (!$("div.hi-message-box").length) {
55                     $("body").append(hiMessageBox);
56                 }
57                 var $box = $("div.hi-message-box");
58                 $box.find(".hi-message-messg").text(messg);
59                 switch (type) {
60                     case 0://success 成功
61                         $box.find("img.hi-message-type").attr("src", "imgs/Tick_24px.png")
62                         break;
63                     case 1://warn 警告
64                         $box.find("img.hi-message-type").attr("src", "imgs/Warning_24px.png")
65                         break;
66                     case 2://
67                         $box.find("img.hi-message-type").attr("src", "imgs/Delete_24px.png")
68                         break;
69                 }
70                 $("div.hi-message-box").fadeIn("slow")
71                 setTimeout(function () {
72                     $("div.hi-message-box").fadeOut("slow");
73                 }, 1200);
74             },
75             success: function (messg) {
76                 this.init(0, messg); 
77             },
78             warn: function (messg) {
79                 this.init(1, messg);
80             },
81             error: function (messg) {
82                 this.init(2, messg);
83             }
84         };      
85     </script>
86     <script type="text/javascript">
87         function success() {
88             hiMessageBox.success("成功");
89         }
90         function error() {
91             hiMessageBox.error("失败");
92         }
93         function warn() {
94             hiMessageBox.warn("警告");
95         }
96     </script>
97 </body>
98 </html>
View Code

 

演示地址：对话框演示地址  消息框演示地址

 

《一步步搭建自己的博客》

关于简单实现自己的对话框和消息框就到这里了。感谢您的阅读，希望对您有一点点作用。

文章首链：http://www.cnblogs.com/zhaopei/p/MessageBox_DialogBox.html

 

posted @ 2016-07-11 08:37  农码一生  阅读(4568)  评论(14)  编辑  收藏  举报
.