WebSlices 是一项新的功能为 Web 站点与用户进行连接,允许用户直接订阅网页内容。 WebSlices 行为就像是信息源(Feed),其中客户端可以订阅,以获取更新和更改的通知。
以下是EBay提供的WebSlice
这个是一个具体的实例
在搜索结果里订阅某一个商品的拍卖信息。订阅后IE8的Favorite Bar里便多了一个WebSlice按钮。当拍卖信息发生变化(比如说是有人出了更高的价钱),该WebSlice按钮会闪动,点击后便如上图一样展开,显示新的拍卖信息。
用户在整个WebSlices的使用过程中有四个步骤
- 发现
- 订阅
- 提示
- 预览
发现(Discovery )
当IE8发现页面中存在WebSlices时,Tool Bar中会出现一个紫色的发现按钮,点击展开可以看到此页面的所有Feed(包括Rss之类的)。
而当鼠标悬浮在使用了特殊标记的那部分html上时,左上角也会浮出这个即处(in-place)发现按钮。
订阅(Subscribe )
点击紫色的发现按钮就可以完成订阅。当然,会有一个确认的对话框。
订阅后,Favorite Bar里就会出现对应的WebSlice按钮。
提示(Notify )
订阅信息发生变化,该WebSlice按钮会闪动提示.预览(Preview)
点开Favorite Bar里的WebSlice按钮就可以预览订阅的信息。如何编写WebSlice
基本的元素:
1.WebSlice :必须的;
2.Entry Title :必须的 ;
3.Entry Content :可选的;
其他一些可选的标记:
End Time:指定过期时间
在entry-content元素里添加如下的代码
这里唤醒标记是".hslice[id] .endtime",有意义的值的是title属性的值,而格式使用的是abbr-design-pattern。设置这个标记的意义是,当接近过期的时候(比如说5分钟前),Favorite Bar里的WebSlice按钮会闪动。而真的过期了,WebSlice按钮上的文字就会变灰了。
Time to Live:更新频率,制定WebSlice的客户端更新的频率
意义和rss里的ttl(Time-to-Live)值的意义是一样的,使用的标记也是".hslice[id] .ttl",表示浏览器检查的时间间隔是多少。
Feed URL:
认证:Authenticated WebSlices
两种方式进行验证:永久 Cookie ;HTTP 身份验证。发现机制
经过前面的介绍,大家应该了解WebSlice是如何被发现的了。但是除了之前的介绍以外,我们还可以为页面制定一个主WebSlice. 或是让即处发现按钮不会浮出(也许有人讨厌这个,比如影响他们自己定制的一些效果),或是用js来下达订阅命令。
主WebSlice
在ToolBar里的发现按钮是个(split button),展开可以看到页面里所有的WebSlice,而如果指定了主WebSlice以后,直接点发现按钮就可以了,不需要从展开的split button找出来再点。指定主WebSlice的代码
rel type href这三个属性都是必须的。ref,type的值就是"default-slice","application/x-hatom",这段代码的页面 的地址是www.example.com,它指定的主WebSlice是"#auction.hslice"选出的。
禁用即处发现按钮
使用js订阅WebSlice
js里订阅和原来添加到收藏的函数一样addToFavoritesBar。
window.external.addToFavoritesBar(string URL, string Title, [optional] string Type)
唯一值得一提的是最后的参数string Type,如果订阅的是WebSlice的话,Type必须为"slice",然后弹出的就不是addToFavoritesBar的确认框,而是添加WebSlice的确认框。
刷新WebSlice的发现
当浏览器解析完html以后,会在WebSlice发现按钮的split button里列出所有的feed和WebSlice,不过当dom发生变化,被列出的feed和WebSlice是不会同步更新的,使用
window.external.contentDiscoveryReset()
手动更新。在ajax的页面里,回调的最后不要忘了这句。
其他
默认情况下,IE8对feed和WebSlice的更新频率是24小时。 WebSlice里的脚本不会被执行,form里的字段也不会起作用。 WebSlice的更新时会和本地的WebSlice进行对比,如果有不同,Favorites Bar里的WebSlice按钮字体会加粗。
几点注意
• 不要在本地用静态页面测试webSlices示例页面。没有效果的,必须上传到服务器上才能有效果。
• entry-content容器不能包含form表单。webSlices只能用来展现数据,不能进行互动性操作。
• 如果你原来的结构已经包含了class,那如何加上这些额外的class呢?其实很简单,只要两个class之间用空格隔一下就可以了。例如:<div class="my_oldclass entry-content">
• 如果你不想在页面上显示webSlices订阅标题(entry-title里面的内容),你可以将其display:none掉。这样,网页上便看不到这个webSlices订阅标题了,但是并不影响它在IE8收藏栏中的标题效果。