界面控件DevExpress WinForms HTML &amp; CSS模板-輕松創(chuàng)建警報(bào)通知

最新的DevExpress WinForm版本中，開發(fā)者可以使用WinForm產(chǎn)品線（通過DevExpress AlertControl和ToastNotificationManager）創(chuàng)建兩種類型的通知/警報(bào)，最近技術(shù)團(tuán)隊(duì)還推薦使用DevExpress ToastNotificationManager來顯示原生 Windows 10+ 通知。

DevExpress Universal Subscription官方最新版免費(fèi)下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)

盡管自定義選項(xiàng)有些有限（toast 僅提供九個(gè)布局模板），但ToastNotificationManager 代表了比傳統(tǒng)的基于面板的AlertControl更好、更現(xiàn)代的替代方案。

在最新版中為AlertControl發(fā)布的HTML & CSS 模板，允許開發(fā)人員創(chuàng)建時(shí)尚的警告通知，同時(shí)可利用AlertControl 本身的簡單性。下圖說明了技術(shù)團(tuán)隊(duì)提供的一些示例模板（查找您喜歡的模板并將其復(fù)制到項(xiàng)目中）：

大多數(shù)通知只是一個(gè)帶有幾個(gè)文本塊、圖像和按鈕的矩形，設(shè)計(jì)這樣簡單的對象對每個(gè)人來說都應(yīng)該相對容易——無論您有 HTML 和 CSS 經(jīng)驗(yàn)，還是開始在WinForms 應(yīng)用程序中利用其潛力。例如以下模板創(chuàng)建一個(gè)帶有圖標(biāo)、標(biāo)題、描述和“確定”按鈕的通知。

<div class="container">
<div class="popup">
<img src="${SvgImage}" class="image" />
<div class="caption">Notification Title</div>
<div class="text">This notification uses a web-inspired template.</div>
<div id="okButton" class="ok-button">OK</div>
</div>
</div>

請注意，在此示例標(biāo)記中，通知標(biāo)題和說明是靜態(tài)字符串。如果您要為用戶顯示一條消息，此解決方案就可以正常工作。

當(dāng)然我們的數(shù)據(jù)綁定功能提供了更大的靈活性——您可以創(chuàng)建一個(gè)模板并將不同的數(shù)據(jù)對象傳遞給它。因此，您可以為多個(gè)通知消息重用一個(gè)模板。

如果您更喜歡此選項(xiàng)，請使用 ${Data_property_name} 占位符，如下所示：

<div class="text">${Caption}</div>
<div class="text">${Text}</div>

“Caption”和“Text”是標(biāo)準(zhǔn)占位符，可以通過 AlertControl.Show 重載直接替換：

alertControl1.Show(this, "Sample caption", "Sample notification text");

您可以添加模板設(shè)計(jì)所需的任意數(shù)量的占位符，但請記住處理 AlertControl.BeforeFormShow 事件并將數(shù)據(jù)對象傳遞給 e.HtmlPopup.DataContext 屬性。例如，下面的代碼使用 div 元素來顯示由五個(gè)占位符組合而成的字符串：兩個(gè)用于字符串值（FullName、Ticker），兩個(gè)用于數(shù)字（Percentage、Price），一個(gè)用于自定義 Direction 枚舉值。

<div class="message-text">
${FullName} ({Ticker}) {Direction} {Percentage}%. The current price is ${Price}.
</div>

通知圖像也在運(yùn)行時(shí)檢索，img 標(biāo)簽使用占位符替代靜態(tài) src 屬性值。

<img src="${StockImage}" class="message-image" />

此示例應(yīng)用程序使用 StockInfo 類對象作為數(shù)據(jù)項(xiàng)。

public class StockInfo {
public StockInfo(string ticker, string fullName, Direction direction,
double percentage, double price, SvgImage img) {
Ticker = ticker;
FullName = fullName;
Direction = direction;
Percentage = percentage;
Price = price;
StockImage = img;
}

public string Ticker { get; set; }
public string FullName { get; set; }
public Direction Direction { get; set; }
public double Percentage { get; set; }
public double Price { get; set; }
public SvgImage StockImage { get; set; }
}

public enum Direction {
[Description("rises")]
Up,
[Description("falls")]
Down
}

當(dāng)數(shù)據(jù)項(xiàng)的 "Price" 值在短時(shí)間內(nèi)發(fā)生顯著變化時(shí)會觸發(fā)通知，相應(yīng)的項(xiàng)目分配給 AlertControl.BeforeFormShow 事件處理程序中的 e.HtmlPopup.DataContext 屬性。

void AlertControl1_BeforeFormShow(object sender, AlertFormEventArgs e) {
// TODO: Retrieve a data item
e.HtmlPopup.DataContext = myStockInfoInstance;
}

因此，通知會從指定為 DataContext 的數(shù)據(jù)項(xiàng)中檢索其 ${Field_Name} 占位符的數(shù)據(jù)。請注意，邊條的顏色會根據(jù) "Direction" 枚舉值而變化。

DevExpress WinForm

DevExpress WinForm擁有180+組件和UI庫，能為Windows Forms平臺創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForms能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

有時(shí)候，我們需要通過JavaScript在網(wǎng)站上播放通知聲音。本文將介紹如何實(shí)現(xiàn)這一功能。

使用Audio構(gòu)造函數(shù)在網(wǎng)站上播放通知聲音

我們可以通過使用Audio構(gòu)造函數(shù)創(chuàng)建一個(gè)音頻播放器對象來在網(wǎng)站上使用JavaScript播放通知聲音。

例如，如果我們有以下按鈕：

<button>Play</button>

然后，我們可以通過編寫以下代碼來使用Audio構(gòu)造函數(shù)，在點(diǎn)擊按鈕時(shí)播放音頻剪輯：

const playAudio = (url) => {

const audio = new Audio(url);

audio.play();

}

const button = document.querySelector('#play-button');

button.addEventListener('click', () => {

const audioUrl = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';

playAudio(audioUrl);

console.log(`Now playing audio from ${audioUrl}`);

});

這段代碼定義了一個(gè)名為`playAudio`的函數(shù)，它接受一個(gè)URL參數(shù)，用于指定要播放的音頻文件的路徑。當(dāng)調(diào)用`playAudio`函數(shù)時(shí)，它會創(chuàng)建一個(gè)新的`Audio`對象并播放指定的音頻文件。

接下來，使用`querySelector`方法獲取網(wǎng)頁中的一個(gè)ID為`play-button`的元素，并將其存儲在`button`變量中。然后，使用`addEventListener`方法為`button`元素添加一個(gè)`click`事件監(jiān)聽器。當(dāng)按鈕被點(diǎn)擊時(shí)，觸發(fā)回調(diào)函數(shù)。在回調(diào)函數(shù)中，我們定義了一個(gè)名為`audioUrl`的常量，它存儲了所需的音頻文件的URL。然后，我們調(diào)用`playAudio`函數(shù)并將`audioUrl`作為參數(shù)傳遞給它，以便播放指定的音頻文件。最后，我們將一條消息記錄到控制臺，指示正在播放哪個(gè)音頻文件。

結(jié)束

我們可以使用JavaScript通過使用Audio構(gòu)造函數(shù)創(chuàng)建一個(gè)音頻播放器對象來在網(wǎng)站上播放通知聲音。

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識，歡迎關(guān)注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。

.背景：
即時(shí)通訊、桌面端app開發(fā)、當(dāng)用戶和用戶聊天，當(dāng)發(fā)送聊天消息時(shí)，須要作收到消息通知，因?yàn)橛玫降募夹g(shù)棧是electron、它也有自己的通知模塊、因?yàn)槠渌脑驎簳r(shí)用不了最后查到HTML5新增的 Notification API的通知功能。即便將瀏覽器窗口最小化，依然會收到消息通知、所以就先用它吧、后面再后話處理一下。

2.通知權(quán)限：
2.1 首先須要看瀏覽器是否支持 Notification ，支持才有下文，不然就此止步；
2.2 經(jīng)過 Notification.permission 檢測用戶是否容許通知：

// Notification.permission === 'granted' 用戶容許
// Notification.permission === 'denied' 用戶拒絕
// Notification.permission === 'denied' 不知道用戶的選擇，默認(rèn)

if(Notification.permission === 'granted'){
    console.log('用戶容許通知');
    instance_init(title, options);
}else if(Notification.permission === 'denied'){
    console.log('用戶拒絕通知');
}else{
    console.log('用戶還沒選擇，去向用戶申請權(quán)限吧');
    Notification.requestPermission(function(status) {
    	if(status=='granted'){
    		console.log('用戶容許通知');
    		instance_init(title, options);
    	}else if(status=='denied'){
    		console.log('用戶拒絕通知');
    	}else{
    		console.log('用戶還沒選擇');
    	}
    });
}

3. 主要用到的參數(shù)。其他參數(shù)了解：notification - Web API 接口參考 | MDNMDN Web DocsMDN logoMozilla logo

title：通知的標(biāo)題
options：通知的設(shè)置選項(xiàng)（可選）。
	body：通知的內(nèi)容。
	tag：表明通知的一個(gè)識別標(biāo)簽，相同tag時(shí)只會打開同一個(gè)通知窗口。
	icon：要在通知中顯示的圖標(biāo)的URL。
	image：要在通知中顯示的圖像的URL。
	data：想要和通知關(guān)聯(lián)的任務(wù)類型的數(shù)據(jù)。
	requireInteraction：通知保持有效不自動關(guān)閉，默認(rèn)為false。

4.代碼實(shí)現(xiàn)

4.1原生html5方式

<html>

	<head>
		<meta charset="UTF-8">
		<title>H5通知功能 </title>
	</head>

	<body>
		<script type="text/javascript">
			// 調(diào)用通知方法
			showMsgNotification('狀態(tài)更新提醒','你的朋友圈有3條新狀態(tài)，快去查看吧');
			/**
			 * H5通知功能 
			 */
			function showMsgNotification(out_title, out_msg) {
				var title = out_title ? out_title : '更新狀態(tài)標(biāo)題';
				var options = {
					body: out_msg ? out_msg : "更新狀態(tài)內(nèi)容", // 通知主體
					requireInteraction: true, // 不自動關(guān)閉通知
					icon: 'http://img18.house365.com/newcms/2017/03/16/148964317858ca26aacf7b5.jpg', // 通知圖標(biāo) 
					tag: 'hangge',
				};
				var Notification = window.Notification || window.mozNotification || window.webkitNotification; // 瀏覽器作兼容處理
				if(Notification) { //支持桌面通知
					if(Notification.permission == "granted") { //已經(jīng)容許通知
						instance_init(title, options);
					} else {
						//第一次詢問或已經(jīng)禁止通知(若是用戶以前已經(jīng)禁止顯示通知，那么瀏覽器不會再次詢問用戶的意見，Notification.requestPermission()方法無效)
						Notification.requestPermission(function(status) {
							if(status === "granted") { //用戶容許
								instance_init(title, options);
							} else { //用戶禁止
								console.log('禁止')
								return false
							}
						});
					}
					/**
					 * Notification定義
					 * */
					function instance_init(title, options){
						var instance = new Notification(title, options);
						instance.onclick = function() {
							console.log('onclick');
							// 關(guān)閉通知
							instance.close();
						};
						instance.onerror = function() {
							console.log('onerror');
						};
						instance.onshow = function() {
							console.log('onshow');
						};
						instance.onclose = function() {
							console.log('onclose');
						};
					}
				} else { //不支持(IE等)
					console.log("不支持的瀏覽器")
				}
			}
		</script>
	</body>

</html>

4.2 electron方式、調(diào)用即可

在線咨詢

上一篇：Spring Boot：實(shí)現(xiàn)MyBatis分頁
下一篇：web前端學(xué)習(xí)教程，html藍(lán)色大氣全屏登錄頁面開發(fā)

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

界面控件DevExpress WinForms HTML &amp;amp; CSS模板-輕松創(chuàng)建警報(bào)通知

使用Audio構(gòu)造函數(shù)在網(wǎng)站上播放通知聲音

結(jié)束

您的項(xiàng)目需求

界面控件DevExpress WinForms HTML & CSS模板-輕松創(chuàng)建警報(bào)通知