基于.Net實(shí)現(xiàn)前端對(duì)話框和消息框
更新時(shí)間：2016年07月11日 09:11:53 作者：農(nóng)碼一生
這篇文章主要介紹了基于.Net實(shí)現(xiàn)前端對(duì)話框和消息框的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
關(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)
畫(huà)一個(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)閉消息框、有消息分類(lèi)（如：警告、錯(cuò)誤、成功等）
畫(huà)一個(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)單。我也想寫(xiě)復(fù)雜的。）
復(fù)制代碼 代碼如下:
setTimeout(function () { $("div.hi-message-box").fadeOut("slow");}, 1200);
效果圖：
加上消息類(lèi)型（其實(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)注腳本之家！
相關(guān)文章
ASP.NET MVC5網(wǎng)站開(kāi)發(fā)我的咨詢列表及添加咨詢(十二)
這篇文章主要為大家詳細(xì)介紹了ASP.NET MVC5網(wǎng)站開(kāi)發(fā)我的咨詢列表及添加咨詢，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-09-09
頁(yè)面爬蟲(chóng)(獲取其他頁(yè)面HTML)加載到自己頁(yè)面示例
利用頁(yè)面爬蟲(chóng)(獲取其他頁(yè)面HTML)加載到自己頁(yè)面，實(shí)現(xiàn)所謂的小偷程序吧，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈2013-06-06
Asp.net動(dòng)態(tài)生成html頁(yè)面的方法分享
這篇文章介紹了Asp.net動(dòng)態(tài)生成html頁(yè)面的方法，有需要的朋友可以參考一下2013-10-10
這篇文章主要介紹了asp.net微信開(kāi)發(fā)中有關(guān)用戶分組管理的相關(guān)內(nèi)容，需要的朋友可以參考下2015-11-11
.NET Core單文件發(fā)布靜態(tài)編譯AOT CoreRT的方法詳解
這篇文章主要給大家介紹了關(guān)于.NET Core單文件發(fā)布靜態(tài)編譯AOT CoreRT的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
asp.net Checbox在GridView中的應(yīng)用實(shí)例分析
這篇文章主要介紹了asp.net Checbox在GridView中的應(yīng)用,結(jié)合實(shí)例形式分析了GridView中添加與使用Checbox的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
visual Studio 2017創(chuàng)建簡(jiǎn)單控制臺(tái)程序
這篇文章主要為大家詳細(xì)介紹了visual Studio 2017創(chuàng)建簡(jiǎn)單控制臺(tái)程序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
利用.net控件實(shí)現(xiàn)下拉導(dǎo)航菜單制作的具體方法
這篇文章介紹了利用.net控件實(shí)現(xiàn)下拉導(dǎo)航菜單制作的具體方法，有需要的朋友可以參考一下，希望對(duì)你有所幫助2013-07-07
Silverlight4 多語(yǔ)言實(shí)現(xiàn)的方法
這篇文章介紹了Silverlight4 多語(yǔ)言實(shí)現(xiàn)的方法，有需要的朋友可以參考一下2013-10-10
這篇文章主要介紹了用ASP.net判斷上傳文件類(lèi)型的三種方法,需要的朋友可以參考下2014-02-02