zoukankan      html  css  js  c++  java
  • 基于.Net实现前端对话框和消息框

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

    对话框

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

    画一个简单的模型框

    <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;
           350px;
          height: 200px;         
          border-radius: 3px;
        }
          div.hi-dialog-box div.hi-dialog-title {
            border: 1px #808080 solid;
            margin: 1px;
            padding: 1px;
             padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#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;
            }

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

    首先修改以下样式:

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

    点击按钮后可回调

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

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

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <title></title>

      <style type="text/css">

        * {

          box-sizing: border-box;

        }

        .clearfix:after {

          content: ' ';

          display: table;

          clear: both;

        }

        .clearfix {

          *zoom: 1;

        }

        div.hi-dialog-box {

          border: 1px #808080 solid;

          350px;

          height: 200px;

          position: absolute;

          top: 200px;

          left: 40%;

          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;

            overflow: auto;

          }

          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;

            }

      </style>

    </head>

    <body>

      <input value="对话框(确定)" onclick="click1();" type="button" />

      <input value="对话框(确定、取消)" onclick="click2();" type="button" />

      <div class="messg" style="margin: 10px; color: red; font-size: 23px"></div>

      <script src="../../Scripts/jquery-1.8.2.js"></script>

      <script type="text/javascript">

        var hiDialog = {

          init: function (title, messg, determineCallback, cancelCallback) {

            title = title || "系统提示";

            var determine = "", cancel = "";

            if (typeof (determineCallback) == "function")

              determine = '<input type="button" class="hi-dialog-determine" value="确定" />';

            if (typeof (cancelCallback) == "function")

              cancel = '<input type="button" class="hi-dialog-cancel" value="取消" />';

            if (!$("div.hi-dialog-box").length) {

              var hi_dialog_box = '<div class="hi-dialog-box clearfix">

                      <div class="hi-dialog-title"></div>

                      <div class="hi-dialog-content">

                      </div>

                      <div class="hi-dialog-foot">

                      </div>

                    </div>';

              $("body").append(hi_dialog_box);

            }

            var $box = $("div.hi-dialog-box");

            $box.find("div.hi-dialog-title").html(title);

            $box.find("div.hi-dialog-content").html(messg);

            $box.find("div.hi-dialog-foot").html(determine + cancel);

            $("div.hi-dialog-box").show();

            $box.find(".hi-dialog-determine").click(function () {

              determineCallback();

              hiDialog.close();

            });

            $box.find(".hi-dialog-cancel").click(function () {

              cancelCallback();

              hiDialog.close();

            });

            //鼠标按下时

            $("div.hi-dialog-title").mousedown(function (event) {

              $("html").unbind();

              var click_clientX = event.clientX;

              var click_clientY = event.clientY;

              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);

              });

            });

          },

          close: function () {

            $("div.hi-dialog-box").hide();

          }

        }

      </script>

      <script type="text/javascript">

        function click1() {

          hiDialog.init("系统提示!", "测试", function () {

            //点击确定后的回调执行

            $(".messg").text("点击了确定");

          });

        }

        function click2() {

          hiDialog.init("系统对话框~~", "什么乱七八糟的啊...", function () {

            $(".messg").text("点击了确定~~~");

          }, function () {

            $(".messg").text("点击了取消~~");

          });

        }

      </script>

    </body>

    </html>

    消息框

    要求:自动定时关闭消息框、有消息分类(如:警告、错误、成功等)

    画一个简单的模型框

    <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- 200px;

          max- 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);

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

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

     

    <!DOCTYPE html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title></title>
      <style type="text/css">
        * {
          box-sizing: border-box;
        }
        .clearfix:after {
          content: ' ';
          display: table;
          clear: both;
        }
        .clearfix {
          *zoom: 1;
        }
        div.hi-message-box {
          padding: 10px;
          padding-top: 15px;
          padding-bottom: 20px;
          background-color: #aee0c1;
          position: absolute;
          min- 200px;
          max- 500px;
          font-size: 19px;
          border-radius: 3px;
          top:200px;
          left:45%;
        }
          div.hi-message-box img {
            vertical-align: bottom;
          }
      </style>
    </head>
    <body>
      <input type="button" onclick="success();" value="成功消息" />
      <input type="button" onclick="error();" value="失败消息" />
      <input type="button" onclick="warn();" value="警告消息" />
      <script src="../../Scripts/jquery-1.8.2.js"></script>
      <script type="text/javascript">
        var hiMessageBox = {
          init: function (type, messg) {
            var hiMessageBox = '<div class="hi-message-box">
                      <img class="hi-message-type" src="" />
                      <span class="hi-message-messg"></span>
                    </div>';
            if (!$("div.hi-message-box").length) {
              $("body").append(hiMessageBox);
            }
            var $box = $("div.hi-message-box");
            $box.find(".hi-message-messg").text(messg);
            switch (type) {
              case 0://success 成功
                $box.find("img.hi-message-type").attr("src", "imgs/Tick_24px.png")
                break;
              case 1://warn 警告
                $box.find("img.hi-message-type").attr("src", "imgs/Warning_24px.png")
                break;
              case 2://
                $box.find("img.hi-message-type").attr("src", "imgs/Delete_24px.png")
                break;
            }
            $("div.hi-message-box").fadeIn("slow")
            setTimeout(function () {
              $("div.hi-message-box").fadeOut("slow");
            }, 1200);
          },
          success: function (messg) {
            this.init(0, messg);
          },
          warn: function (messg) {
            this.init(1, messg);
          },
          error: function (messg) {
            this.init(2, messg);
          }
        };  
      </script>
      <script type="text/javascript">
        function success() {
          hiMessageBox.success("成功");
        }
        function error() {
          hiMessageBox.error("失败");
        }
        function warn() {
          hiMessageBox.warn("警告");
        }
      </script>
    </body>
    </html>
     
    <!DOCTYPE html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title></title>
      <style type="text/css">
        * {
          box-sizing: border-box;
        }
        .clearfix:after {
          content: ' ';
          display: table;
          clear: both;
        }
        .clearfix {
          *zoom: 1;
        }
        div.hi-dialog-box {
          border: 1px #808080 solid;
           350px;
          height: 200px;
          position: absolute;
          top: 200px;
          left: 40%;
          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;
            overflow: auto;
          }
          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;
            }
      </style>
    </head>
    <body>
      <input value="对话框(确定)" onclick="click1();" type="button" />
      <input value="对话框(确定、取消)" onclick="click2();" type="button" />
      <div class="messg" style="margin: 10px; color: red; font-size: 23px"></div>
      <script src="../../Scripts/jquery-1.8.2.js"></script>
      <script type="text/javascript">
        var hiDialog = {
          init: function (title, messg, determineCallback, cancelCallback) {
            title = title || "系统提示";
            var determine = "", cancel = "";
            if (typeof (determineCallback) == "function")
              determine = '<input type="button" class="hi-dialog-determine" value="确定" />';
            if (typeof (cancelCallback) == "function")
              cancel = '<input type="button" class="hi-dialog-cancel" value="取消" />';
            if (!$("div.hi-dialog-box").length) {
              var hi_dialog_box = '<div class="hi-dialog-box clearfix">
                      <div class="hi-dialog-title"></div>
                      <div class="hi-dialog-content">
                      </div>
                      <div class="hi-dialog-foot">
                      </div>
                    </div>';
              $("body").append(hi_dialog_box);
            }
            var $box = $("div.hi-dialog-box");
            $box.find("div.hi-dialog-title").html(title);
            $box.find("div.hi-dialog-content").html(messg);
            $box.find("div.hi-dialog-foot").html(determine + cancel);
            $("div.hi-dialog-box").show();
            $box.find(".hi-dialog-determine").click(function () {
              determineCallback();
              hiDialog.close();
            });
            $box.find(".hi-dialog-cancel").click(function () {
              cancelCallback();
              hiDialog.close();
            });
            //鼠标按下时
            $("div.hi-dialog-title").mousedown(function (event) {
              $("html").unbind();
              var click_clientX = event.clientX;
              var click_clientY = event.clientY;
              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);
              });
            });
          },
          close: function () {
            $("div.hi-dialog-box").hide();
          }
        }
      </script>
      <script type="text/javascript">
        function click1() {
          hiDialog.init("系统提示!", "测试", function () {
            //点击确定后的回调执行
            $(".messg").text("点击了确定");
          });
        }
        function click2() {
          hiDialog.init("系统对话框~~", "什么乱七八糟的啊...", function () {
            $(".messg").text("点击了确定~~~");
          }, function () {
            $(".messg").text("点击了取消~~");
          });
        }
      </script>
    </body>
    </html>

    消息框

    要求:自动定时关闭消息框、有消息分类(如:警告、错误、成功等)

    画一个简单的模型框

    1
    2
    3
    4
    <div class="hi-message-box">
        <img class="hi-message-type" src="" />
        <span class="hi-message-messg">你不爱我了~~</span>
      </div>

    添上基本样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style type="text/css">
        div.hi-message-box {
          padding: 10px;
          padding-top: 15px;
          padding-bottom: 20px;
          background-color: #aee0c1;    
          min- 200px;
          max- 500px;
          font-size: 19px;
          border-radius: 3px;
        }
     </style>

    效果图:

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

    定时关闭消息(表骂我,就是这么简单。我也想写复杂的。)

    复制代码代码如下:
    setTimeout(function () { $("div.hi-message-box").fadeOut("slow");}, 1200);

     

     

    效果图:

    加上消息类型(其实就是根据参数加不同的图片而已)

    1
    2
    3
    setTimeout(function () {
          $("div.hi-message-box").fadeOut("slow");
    }, 1200);

    效果图:

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

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

    效果图:

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

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

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

    以上所述是基于基于.Net实现前端对话框和消息框的全部叙述,希望对大家有所帮助,如果大家想了解更多内容,敬请关注脚本之家!

     

    最新评论

    评论(0人参与0条评论)
     
     
     
    还没有评论,快来抢沙发吧!
     
     
     
  • 相关阅读:
    RocketMQ中Producer消息的发送源码分析
    VS等待调试
    Window&Linux遍历某一文件夹
    遍历当前USB设备信息
    批处理常用符号详解
    Windows 批处理(bat)语法大全
    Windows CMD命令大全(值得收藏)
    遍历文件夹
    ASCII,UTF-8,Unicode字符串相互转换
    shellexecute的使用和X64判断
  • 原文地址:https://www.cnblogs.com/sjqq/p/6362627.html
Copyright © 2011-2022 走看看