界面控件DevExpress WinForms HTML &amp; CSS模板-轻松创建警报通知

最新的DevExpress WinForm版本中，开发者可以使用WinForm产品线（通过DevExpress AlertControl和ToastNotificationManager）创建两种类型的通知/警报，最近技术团队还推荐使用DevExpress ToastNotificationManager来显示原生 Windows 10+ 通知。

DevExpress Universal Subscription官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下载-慧都网

尽管自定义选项有些有限（toast 仅提供九个布局模板），但ToastNotificationManager 代表了比传统的基于面板的AlertControl更好、更现代的替代方案。

在最新版中为AlertControl发布的HTML & CSS 模板，允许开发人员创建时尚的警告通知，同时可利用AlertControl 本身的简单性。下图说明了技术团队提供的一些示例模板（查找您喜欢的模板并将其复制到项目中）：

大多数通知只是一个带有几个文本块、图像和按钮的矩形，设计这样简单的对象对每个人来说都应该相对容易——无论您有 HTML 和 CSS 经验，还是开始在WinForms 应用程序中利用其潜力。例如以下模板创建一个带有图标、标题、描述和“确定”按钮的通知。

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

请注意，在此示例标记中，通知标题和说明是静态字符串。如果您要为用户显示一条消息，此解决方案就可以正常工作。

当然我们的数据绑定功能提供了更大的灵活性——您可以创建一个模板并将不同的数据对象传递给它。因此，您可以为多个通知消息重用一个模板。

如果您更喜欢此选项，请使用 ${Data_property_name} 占位符，如下所示：

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

“Caption”和“Text”是标准占位符，可以通过 AlertControl.Show 重载直接替换：

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

您可以添加模板设计所需的任意数量的占位符，但请记住处理 AlertControl.BeforeFormShow 事件并将数据对象传递给 e.HtmlPopup.DataContext 属性。例如，下面的代码使用 div 元素来显示由五个占位符组合而成的字符串：两个用于字符串值（FullName、Ticker），两个用于数字（Percentage、Price），一个用于自定义 Direction 枚举值。

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

通知图像也在运行时检索，img 标签使用占位符替代静态 src 属性值。

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

此示例应用程序使用 StockInfo 类对象作为数据项。

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
}

当数据项的 "Price" 值在短时间内发生显着变化时会触发通知，相应的项目分配给 AlertControl.BeforeFormShow 事件处理程序中的 e.HtmlPopup.DataContext 属性。

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

因此，通知会从指定为 DataContext 的数据项中检索其 ${Field_Name} 占位符的数据。请注意，边条的颜色会根据 "Direction" 枚举值而变化。

DevExpress WinForm

DevExpress WinForm拥有180+组件和UI库，能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序，无论是Office风格的界面，还是分析处理大批量的业务数据，它都能轻松胜任！

载说明：原创不易，未经授权，谢绝任何形式的转载

有时候，我们需要通过JavaScript在网站上播放通知声音。本文将介绍如何实现这一功能。

使用Audio构造函数在网站上播放通知声音

我们可以通过使用Audio构造函数创建一个音频播放器对象来在网站上使用JavaScript播放通知声音。

例如，如果我们有以下按钮：

<button>Play</button>

然后，我们可以通过编写以下代码来使用Audio构造函数，在点击按钮时播放音频剪辑：

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

});

这段代码定义了一个名为`playAudio`的函数，它接受一个URL参数，用于指定要播放的音频文件的路径。当调用`playAudio`函数时，它会创建一个新的`Audio`对象并播放指定的音频文件。

接下来，使用`querySelector`方法获取网页中的一个ID为`play-button`的元素，并将其存储在`button`变量中。然后，使用`addEventListener`方法为`button`元素添加一个`click`事件监听器。当按钮被点击时，触发回调函数。在回调函数中，我们定义了一个名为`audioUrl`的常量，它存储了所需的音频文件的URL。然后，我们调用`playAudio`函数并将`audioUrl`作为参数传递给它，以便播放指定的音频文件。最后，我们将一条消息记录到控制台，指示正在播放哪个音频文件。

结束

我们可以使用JavaScript通过使用Audio构造函数创建一个音频播放器对象来在网站上播放通知声音。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

.背景：
即时通讯、桌面端app开发、当用户和用户聊天，当发送聊天消息时，须要作收到消息通知，因为用到的技术栈是electron、它也有自己的通知模块、因为其他的原因暂时用不了最后查到HTML5新增的 Notification API的通知功能。即便将浏览器窗口最小化，依然会收到消息通知、所以就先用它吧、后面再后话处理一下。

2.通知权限：
2.1 首先须要看浏览器是否支持 Notification ，支持才有下文，不然就此止步；
2.2 经过 Notification.permission 检测用户是否容许通知：

// Notification.permission === 'granted' 用户容许
// Notification.permission === 'denied' 用户拒绝
// Notification.permission === 'denied' 不知道用户的选择，默认

if(Notification.permission === 'granted'){
    console.log('用户容许通知');
    instance_init(title, options);
}else if(Notification.permission === 'denied'){
    console.log('用户拒绝通知');
}else{
    console.log('用户还没选择，去向用户申请权限吧');
    Notification.requestPermission(function(status) {
    	if(status=='granted'){
    		console.log('用户容许通知');
    		instance_init(title, options);
    	}else if(status=='denied'){
    		console.log('用户拒绝通知');
    	}else{
    		console.log('用户还没选择');
    	}
    });
}

3. 主要用到的参数。其他参数了解：notification - Web API 接口参考 | MDNMDN Web DocsMDN logoMozilla logo

title：通知的标题
options：通知的设置选项（可选）。
	body：通知的内容。
	tag：表明通知的一个识别标签，相同tag时只会打开同一个通知窗口。
	icon：要在通知中显示的图标的URL。
	image：要在通知中显示的图像的URL。
	data：想要和通知关联的任务类型的数据。
	requireInteraction：通知保持有效不自动关闭，默认为false。

4.代码实现

4.1原生html5方式

<html>

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

	<body>
		<script type="text/javascript">
			// 调用通知方法
			showMsgNotification('状态更新提醒','你的朋友圈有3条新状态，快去查看吧');
			/**
			 * H5通知功能 
			 */
			function showMsgNotification(out_title, out_msg) {
				var title = out_title ? out_title : '更新状态标题';
				var options = {
					body: out_msg ? out_msg : "更新状态内容", // 通知主体
					requireInteraction: true, // 不自动关闭通知
					icon: 'http://img18.house365.com/newcms/2017/03/16/148964317858ca26aacf7b5.jpg', // 通知图标 
					tag: 'hangge',
				};
				var Notification = window.Notification || window.mozNotification || window.webkitNotification; // 浏览器作兼容处理
				if(Notification) { //支持桌面通知
					if(Notification.permission == "granted") { //已经容许通知
						instance_init(title, options);
					} else {
						//第一次询问或已经禁止通知(若是用户以前已经禁止显示通知，那么浏览器不会再次询问用户的意见，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');
							// 关闭通知
							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方式、调用即可

在线咨询

上一篇：Spring Boot：实现MyBatis分页
下一篇：web前端学习教程，html蓝色大气全屏登录页面开发

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

界面控件DevExpress WinForms HTML &amp;amp; CSS模板-轻松创建警报通知

使用Audio构造函数在网站上播放通知声音

结束

您的项目需求

界面控件DevExpress WinForms HTML & CSS模板-轻松创建警报通知