您的位置：首页 > 其它

IE 8.0 Beta1 新特性之—— WebSlice

2008-04-17 15:48 239 查看

WebSlices 允许用户订阅的网页部分内容。用户通常每天访问网站很多次以查看是否有新的更新。 RSS 源简化此体验：用户可以订阅更新并查看它们的摘要，而不必导航到每个站点。 IE 8 Beta 1 添加了 WebSlices的功能。
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

<%...@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebSlices.aspx.cs" Inherits="OpenServiceTest.WebSlices" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>WebSlices Test</title>

</head>

<body>

<h3 class="entry-title">WebSlices测试</h3>

WebSlices的简单的示例。来自<a target="_blank" href="http://bbs.csdn.net/" title="webSlices">CSDN.NET</a>

<p>This clip updates every <span class="ttl">15</span>minutes </p>

</div>

</body>

</html>

将需要提供webSlices订阅的网页内容，放在一个class为“entry-content”的容器内，当浏览器将鼠标移动到这个区域就会出现webSlices的订阅图标。

基本的元素：

1.WebSlice ：必须的；

2.Entry Title ：必须的；

3.Entry Content ：可选的；

其他一些可选的标记：

End Time：指定过期时间

在entry-content元素里添加如下的代码

<p>End time:<abbr class="endtime" title="2008-05-01T17:00:00">过期测试</abbr></p>

这里唤醒标记是".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：

<?xml version="1.0"?>

<description>Feed for auction item</description>

<item>

<description>high bidder: buyer1 …</description>

<mon:endtime>2008-02-28T17:00:00</mon:endtime>

</item>

</channel>

这个feed里只允许有一个item。而如果提供了feedurl,就以feed为准了，页面里的其他标记(title description link)不再起作用。

认证：Authenticated WebSlices

两种方式进行验证：永久 Cookie ；HTTP 身份验证。

发现机制

经过前面的介绍，大家应该了解WebSlice是如何被发现的了。但是除了之前的介绍以外，我们还可以为页面制定一个主WebSlice. 或是让即处发现按钮不会浮出(也许有人讨厌这个，比如影响他们自己定制的一些效果),或是用js来下达订阅命令。

主WebSlice

在ToolBar里的发现按钮是个(split button)，展开可以看到页面里所有的WebSlice，而如果指定了主WebSlice以后，直接点发现按钮就可以了，不需要从展开的split button找出来再点。指定主WebSlice的代码

<head>

</head>
rel type href这三个属性都是必须的。ref,type的值就是"default-slice"，"application/x-hatom"，这段代码的页面的地址是www.example.com，它指定的主WebSlice是"#auction.hslice"选出的。

禁用即处发现按钮

<head>

</head>

使用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收藏栏中的标题效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航