站点固定:为多个服务通知旋转覆盖图标

分享于 

10分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

Site Pinning提供了一种独特的方式,通过out-of-browser通知来构建与你的用户的联系。 之前,我讨论了如何使用IE9′s站点钉住API插件来实现覆盖图标来增强用户通知。 演示集中于如何显示数值 icon 以指示什么时候发生特定事件( 比如: 已经发生收件箱中的邮件。

带覆盖 icon的固定站点

这是一个非常好的方法让你的用户知道有挂起的信息,它们检查。 但是如果你的站点提供多种类型的通知,会发生什么情况? 现在,通过提供多种类型的通知,从朋友请求和事件提醒到新消息和游戏邀请。

旋转多个覆盖图标

站点钉住API是非常灵活的,并且通过一些JavaScript魔术,你可以轻松地显示多个服务的图标。 在这个演示中,我希望通过 3个不同的覆盖图标来提醒用户挂起的消息。请求和操作。

以前一样,我不得不通过使用图标编辑器创建覆盖图标flex我的一些艺术天赋。 我创建了 5个,这是前三个外观的方式:

代码从最后一个演示中稍微改变,以容纳每个获取数据的多位数据。 以前,我只获取一个数据 Fragment,在这个演示中,我返回 3,每个通知类型有一个:

myPin.init([{ "data" : [{ "label" : "Messages", "ntype" : "M", "num": 2 }, { "label" : "Requests", "ntype" : "R", "num": 1 }, { "label" : "Actions", "ntype" : "A", "num": 3 }] },
{ "data" : [{ "label" : "Messages", "ntype" : "M", "num": 1 }, { "label" : "Requests", "ntype" : "R", "num": 5 }, { "label" : "Actions", "ntype" : "A", "num": 2 }] },
{ "data" : [{ "label" : "Messages", "ntype" : "M", "num": 5 }, { "label" : "Requests", "ntype" : "R", "num": 1 }, { "label" : "Actions", "ntype" : "A", "num": 4 }] }
]);

作为提醒,getData()的方法模拟获取远程数据。 因这里,如果我们查看数据 上面,我们可以模拟三个不同的数据。 这就是我们使用setInterval每 10秒调用一次方法的原因。 这允许我们查看通知在一段时间内的外观。

setInterval(function () { myPin.getData() }, 10000);

接下来的事情是使用定时器来允许在渲染覆盖图标时稍有延迟。 使用 setTimeout() 提供足够的延迟,使用户在转移到下一个 icon 之前可以看到个人覆盖 icon。 如果我们没有这个延迟,旋转会太快,无法提供任何有用的通知。 如果查看以下图像,可以看到通知的外观:

覆盖 icon 显示数字通知

这是通过下面的代码实现的:

// Grab the current set of data...currData = this.dataBin[this.currIndex++].data; /* We're going to display a new overlay every x number of seconds to display a new overlay icon so
let's loop through the data elements for the current set of data... */for (var i=0; i < currData.length; i++ ){
(function(idx) { setTimeout( function(){ myPin.dispOverlay( currData[idx] ); }, 1000 * idx); }( i )); 
}

这里是发生的事情。在第一行中,我获取了保存所有通知信息(。消息,请求&操作)的当前数据集。 这些数据如下所示:

[{ "label" : "Messages", "ntype" : "M", "num": 2 },
{ "label" : "Requests", "ntype" : "R", "num": 1 },
{ "label" : "Actions", "ntype" : "A", "num": 3 }]

在每个数据组中循环,使用 setTimeout() 分配一个计时器,在 ~1 秒间隔内调用 dispOverlay()。 这就是让我在前面提到的逐步 icon 呈现延迟的神奇代码。 预期的功能是,"邮件"icon 后面会呈现"请求"icon 1,然后是 finally的"操作"icon。

现在,你可能想知道为什么我有一个匿名函数包装 setTimeout()。 因为在setTimeout中有一个闭包,这可能导致一个公共作用域问题,其中,用于抓取当前数据的变量'i',将只更新当前数据的索引值。 在Padolsey上有一个很好的解释,感谢 John 帮助我解决这个问题。

final 更改在 dispOverlay() 中,我需要确定需要显示哪个覆盖 icon。 由于现在有三种不同类型的通知,因此需要有条件语句来确定类型并生成正确的icon 名称:

if (theData.ntype == "M") {
oImg = "images/messages-" + theData.num + ".ico";
} elseif (theData.ntype == "R") {
oImg = "images/requests-" + theData.num + ".ico";
} elseif (theData.ntype == "A") {
oImg = "images/actions-" + theData.num + ".ico";
}

这将检查类型,并根据该类型的类型和通知数来提供右 icon。

演示和 final 代码

你可以通过在IE9中查看演示来查看演示:

http://reybango.com/demos/sprotate/index.html

当页面呈现时,将标签拖到你的任务栏并将它的固定。 你应该会看到新的窗口出现在新锁定的站点上。 接下来,你将看到覆盖图标出现在任务栏中,它们应该在每 10秒开始循环。

下面是完整的源代码。 你也可以下载这里的所有内容。

<!DOCTYPEhtml><html><head><title>Pinned Site - Rotating Overlay Icons</title><linkrel="shortcut icon"type="image/ico"href="favicon.ico"/><metaname="application-name"content="Pinned Site Test"/><metaname="msapplication-starturl"content="http://reybango.com/demos/sprotate/index.html"/><metaname="msapplication-navbutton-color"content="#3480C0"/><metaname="msapplication-window"content="width=1024;height=768"/><metaname="msapplication-tooltip"content="Testing the Pinned Site API"/><style>body {background: none repeat scroll 0 0 #4492CE;font: 440%/1.4em 'Segoe Light',Segoe,'Segoe UI','Meiryo Regular','Meiryo',sans-serif;color: #EDEFF4;}</style></head><body><div><h1>Pinned Sites</h1><p>Rotating Overlay Icons</p></div><script>var myData = [];var myPin = {
currIndex: 0,
dataBin: [],
getData: function () {var idx = 0, currData = [], cntr = 0, theData;// Determines whether the current page was launched as a pinned site...if (window.external.msIsSiteMode()) {// Grab the current set of data...currData = this.dataBin[this.currIndex++].data; /* We're going to display a new overlay every x number of seconds to display a new overlay icon so
let's loop through the data elements for the current set of data... */for (var i=0; i <currData.length; i++ ){
(function(idx) { setTimeout( function(){ myPin.dispOverlay( currData[idx] ); }, 1e3 * idx); }( i )); 
}if (this.currIndex> 2) { this.currIndex = 0 }
}
},
dispOverlay: function (theData) {var oImg = "";// Is there any data?if (theData) {// Clear any preexisting overlay iconwindow.external.msSiteModeClearIconOverlay();// Render the overlay icon based on the data returned...if (theData.ntype == "M") {
oImg = "images/messages-" + theData.num + ".ico";
} elseif (theData.ntype == "R") {
oImg = "images/requests-" + theData.num + ".ico";
} elseif (theData.ntype == "A") {
oImg = "images/actions-" + theData.num + ".ico";
} // Go ahead and create the overlay image and it's label...this.setOverlay(oImg, theData.label);
}
},
setOverlay: function (icon, desc) {// Sets the overlay icons...window.external.msSiteModeSetIconOverlay(icon, desc);
window.external.msSiteModeActivate();
},
init: function (myData) {this.dataBin = myData;this.getData();
}
};// This clears out any previously set overlay icons...window.external.msSiteModeClearIconOverlay();// Run it once to kick everything off...myPin.init([{ "data" : [{ "label" : "Messages", "ntype" : "M", "num": 2 }, { "label" : "Requests", "ntype" : "R", "num": 1 }, { "label" : "Actions", "ntype" : "A", "num": 3 }] },
{ "data" : [{ "label" : "Messages", "ntype" : "M", "num": 1 }, { "label" : "Requests", "ntype" : "R", "num": 5 }, { "label" : "Actions", "ntype" : "A", "num": 2 }] },
{ "data" : [{ "label" : "Messages", "ntype" : "M", "num": 5 }, { "label" : "Requests", "ntype" : "R", "num": 1 }, { "label" : "Actions", "ntype" : "A", "num": 4 }] }
]);// This is only here because I want to simulate pulling data on a regular interval...setInterval(function () { myPin.getData() }, 10000);</script></body></html>

服务  notification  ICO  icon  图标  覆盖  
相关文章