四川少妇丰满A级毛片免费看,www.sz,www.欧美成

主頁(yè) > 知識(shí)庫(kù) > 基于.Net實(shí)現(xiàn)前端對(duì)話框和消息框

基于.Net實(shí)現(xiàn)前端對(duì)話框和消息框

關(guān)于前端對(duì)話框、消息框的優(yōu)秀插件多不勝數(shù)。造輪子是為了更好的使用輪子，并不是說(shuō)自己造的輪子肯定好。所以，這個(gè)博客系統(tǒng)基本上都是自己實(shí)現(xiàn)的，包括日志記錄、響應(yīng)式布局等等一些本可以使用插件的。好了，廢話不多時(shí)。我們來(lái)實(shí)現(xiàn)自己的對(duì)話框和消息框。

對(duì)話框

要求：可拖動(dòng)、點(diǎn)擊按鈕后可回調(diào)

畫一個(gè)簡(jiǎn)單的模型框

div class="hi-dialog-box clearfix">
    div class="hi-dialog-title">系統(tǒng)提示/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;
        }

效果圖：

是不是像那么回事了，不過(guò)現(xiàn)在還不能拖動(dòng)。拖動(dòng)，說(shuō)白了就是在鼠標(biāo)移動(dòng)的時(shí)候不停的修改絕對(duì)定位。

首先修改以下樣式：

用js代碼實(shí)現(xiàn)拖動(dòng)效果：

//鼠標(biāo)按下時(shí)
    $("div.hi-dialog-title").mousedown(function (event) {
      $("html").unbind();//首先清除事件方法
      var click_clientX = event.clientX;//記錄鼠標(biāo)按下時(shí)相對(duì)當(dāng)前窗口的 x 坐標(biāo)
      var click_clientY = event.clientY;//記錄鼠標(biāo)按下時(shí)相對(duì)當(dāng)前窗口的 y 坐標(biāo)
      //取的對(duì)話框容器
      var dialogBox = $(this).closest("div.hi-dialog-box");
      //記錄對(duì)話框容器當(dāng)前位置
      var dialogBoxX = parseInt($(dialogBox).css("left"));
      var dialogBoxY = parseInt($(dialogBox).css("top"));
      //鼠標(biāo)移動(dòng)時(shí)
      $("html").mousemove(dialog_mousemove = function (event) {
        //鼠標(biāo)按下后移動(dòng)量加上原來(lái)的位置
        var top = event.clientY - click_clientY + dialogBoxY;
        var left = event.clientX - click_clientX + dialogBoxX;
        //修改對(duì)話框位置（這里就實(shí)現(xiàn)了移動(dòng)效果了）
        $(dialogBox).css({ "left": left, "top": top });
      });
      //鼠標(biāo)按鍵松開(kāi)時(shí)
      $("html").mouseup(function () {
        //清除鼠標(biāo)移動(dòng)事件
        $("html").unbind("mousemove", dialog_mousemove);
      });
    });

以上js代碼就實(shí)現(xiàn)了對(duì)話框的拖動(dòng)效果。首先，只有當(dāng)鼠標(biāo)在對(duì)話框標(biāo)題區(qū)域按下鼠標(biāo)才可以拖動(dòng)，然后鼠標(biāo)移動(dòng)的的時(shí)候?qū)崟r(shí)計(jì)算和改變?nèi)萜鞯奈恢茫詈笕绻髽?biāo)按鍵松開(kāi)這清除鼠標(biāo)移動(dòng)事件。

點(diǎn)擊按鈕后可回調(diào)

很多時(shí)候，我們點(diǎn)擊確定或取消的時(shí)候我們需要執(zhí)行回調(diào)（比如“您是否刪除”，點(diǎn)擊了確定后肯定需要做刪除操作）。

如此，我們點(diǎn)擊確定的時(shí)候會(huì)自動(dòng)關(guān)閉對(duì)話框并可以執(zhí)行自己需要執(zhí)行的一些操作。可以，有同學(xué)會(huì)說(shuō)，你這算什么狗屁對(duì)話框啊，html代碼全都需要直接編碼。是的，這只是簡(jiǎn)單的說(shuō)下思路，下面我們來(lái)簡(jiǎn)單整理下。

效果圖：

全部代碼：（當(dāng)然，這只是簡(jiǎn)單實(shí)現(xiàn)。還有很多需要繼續(xù)細(xì)化的效果，如：背景遮罩、如果實(shí)現(xiàn)點(diǎn)擊多次對(duì)話框）

!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;
      width: 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="對(duì)話框（確定）" onclick="click1();" type="button" />
  input value="對(duì)話框（確定、取消）" 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 || "系統(tǒng)提示";
        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();
        });
        //鼠標(biāo)按下時(shí)
        $("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"));
          //鼠標(biāo)移動(dòng)時(shí)
          $("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 });
          });
          //鼠標(biāo)按鍵松開(kāi)時(shí)
          $("html").mouseup(function () {
            $("html").unbind("mousemove", dialog_mousemove);
          });
        });
      },
      close: function () {
        $("div.hi-dialog-box").hide();
      }
    }
  /script>
  script type="text/javascript">
    function click1() {
      hiDialog.init("系統(tǒng)提示！", "測(cè)試", function () {
        //點(diǎn)擊確定后的回調(diào)執(zhí)行
        $(".messg").text("點(diǎn)擊了確定");
      });
    }
    function click2() {
      hiDialog.init("系統(tǒng)對(duì)話框~~", "什么亂七八糟的啊...", function () {
        $(".messg").text("點(diǎn)擊了確定~~~");
      }, function () {
        $(".messg").text("點(diǎn)擊了取消~~");
      });
    }
  /script>
/body>
/html>

消息框

要求：自動(dòng)定時(shí)關(guān)閉消息框、有消息分類（如：警告、錯(cuò)誤、成功等）

畫一個(gè)簡(jiǎn)單的模型框

div class="hi-message-box">
    img class="hi-message-type" src="" />
    span class="hi-message-messg">你不愛(ài)我了~~/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>

效果圖：

看上去是不是很簡(jiǎn)單呢？下面我們給它加上定時(shí)關(guān)閉消息功能。

定時(shí)關(guān)閉消息（表罵我，就是這么簡(jiǎn)單。我也想寫復(fù)雜的。）

復(fù)制代碼代碼如下:

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

效果圖：

加上消息類型（其實(shí)就是根據(jù)參數(shù)加不同的圖片而已）

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

效果圖：

加上圖標(biāo)是不是更像那么回事了？

如上，我們同樣需要稍微整理下實(shí)現(xiàn)代碼：

效果圖：

全部代碼：（同樣，消息框也只是進(jìn)行了簡(jiǎn)單實(shí)現(xiàn)。還有太多沒(méi)有考慮，如（參數(shù)定位消息框位置、設(shè)置定時(shí)關(guān)閉時(shí)間、多次觸發(fā)消息框））

!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-message-box {
      padding: 10px;
      padding-top: 15px;
      padding-bottom: 20px;
      background-color: #aee0c1;
      position: absolute;
      min-width: 200px;
      max-width: 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>

演示地址：對(duì)話框演示地址消息框演示地址

以上所述是基于基于.Net實(shí)現(xiàn)前端對(duì)話框和消息框的全部敘述，希望對(duì)大家有所幫助，如果大家想了解更多內(nèi)容，敬請(qǐng)關(guān)注腳本之家！

您可能感興趣的文章:

C#實(shí)現(xiàn)客戶端彈出消息框封裝類實(shí)例
ASP.NET中彈出消息框的幾種常見(jiàn)方法
.net 彈出消息框后導(dǎo)致頁(yè)面樣式變亂解決方法
一個(gè)可攜帶附加消息的增強(qiáng)消息框MessageBoxEx

標(biāo)簽：臨夏甘肅海西中衛(wèi) 清遠(yuǎn) 聊城慶陽(yáng)

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《基于.Net實(shí)現(xiàn)前端對(duì)話框和消息框》，本文關(guān)鍵詞基于,.Net,實(shí)現(xiàn),前端,對(duì)話框,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。