IE8的Activities,WebSlices示例--ie8.taobao.com
声明:本文内容只做技术研究和学习,并未用于商业用途,呵呵。
在“开心就好”的这篇文章中,做了一些IE8 Beta2的介绍,其中关于淘宝的链接:http://ie8.taobao.com
上述链接页面中的安装activity 的js代码如下:
上面js中的activities/taobao-search.xml内容如下:
下面是白皮书的相关xml结点说明:
display(必需):下列元素的容器元素。
name (必需): 显示给用户的活动名称。命名规则为以动词开头,后跟应用程序。
例如:“Map on Windows Live”或“Define with Encarta”。
icon (可选): 活动的 16x16 像素图标 URL。
description (可选):功能的简要描述。
activity(必需):功能的容器元素
activityAction(必需): 一项活动可以在一个或多个数据类型中进行操作。每个 activityAction 都会根据数据
类型指定功能。其中包括 preview 元素和 execute 元素。
preview(可选):用户选择活动后会显示的活动 HTML 窗口。
execute(必需):用户调用活动时使用的主要功能。
category="Find" 表示其属于查找分类,Internet Explorer 支持的几种类别以及现有的服务示例如下。
map:Windows Live Map、Google Maps、Yahoo!Maps、Mapquest
blog:Windows Live Spaces、Windows Live Writer、Blogger
define:Encarta、Wikipedia、Dictionary.com
add:Del.icio.us、Reddit、Google Reader
translate:Windows Live Translation、Babelfish、Google Translation
如果您的活动不适合使用推荐类别,则可自行设定。以下为定义类别“分享”的示例:
<activity category="share">
当点击查找更多活动时,IE8会跳转到链接http://ie.microsoft.com/activities/zh-chs/default.aspx,
该页面中所罗列的是网民最喜欢的“活动”的列表,因为这里的排列顺序是计算机根据特定算法列出的,
而不是人为编辑的(如果是人为干预,就不会是BAIDU了,如上图)。
Activity开发白皮书:http://go.microsoft.com/fwlink/?LinkId=110264
**********************************************************************
webslice允许用户预订 Web 页面的多个部分,下面是其中一个slice的一段内容:
下面是webslice白皮书中的内容介绍(对应上面的html代码)
基本内容
WebSlice 的基本属性是 WebSlice 容器、条目标题和条目内容。
WebSlice
- 必需。
- 使用类名称 hslice。
- WebSlice 元素必须包括一个 ID。
- 表示 WebSlice 的整个区域,包括主题、描述和其他 WebSlice 属性。
条目标题
- 必需。
- 使用 hAtom Microformat 中定义的类名称 entry-title。
- 条目标题可以有多个实例。
条目内容
- 可选。
- 使用 hAtom Microformat 中定义的类名称 entry-content。
- 如果条目内容丢失,则认为它是空字符串。
- 条目内容可以有多个实例。
源 URL
- 可选。
- 使用 rel 名称 feedurl。
- 表示客户端应预订以获取更新的备用源。
- 备用源的 URL 被指定为 ref 属性的值。
我们可以在上面html代码中找到hslice,entry-title,entry-content,feedurl 相对应的内容:)
下面是Webslice的开发白皮书下载链接:)
http://go.microsoft.com/fwlink/?LinkId=110265
在“开心就好”的这篇文章中,做了一些IE8 Beta2的介绍,其中关于淘宝的链接:http://ie8.taobao.com
(跳转到http://ie8.taobao.com/list.php)。正好做为一个对着白皮书进行学习例子。
首先看一下运行效果:
上述链接页面中的安装activity 的js代码如下:
<script type="text/javascript">
function addActivity() {
if (navigator.userAgent.indexOf('MSIE 8') == -1) {
alert('请首先安装IE8.');
} else {
window.external.addService('activities/taobao-search.xml');
}
}
</script>
function addActivity() {
if (navigator.userAgent.indexOf('MSIE 8') == -1) {
alert('请首先安装IE8.');
} else {
window.external.addService('activities/taobao-search.xml');
}
}
</script>
上面js中的activities/taobao-search.xml内容如下:
<?xml version="1.0" encoding="UTF-8" ?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
<homepageUrl>http://www.taobao.com</homepageUrl>
<display>
<name>淘宝搜索</name>
<icon>http://www.taobao.com/favicon.ico</icon>
</display>
<activity category="Find">
<activityAction context="selection">
<preview action="http://ie8.taobao.com/activities/preview.php?query={selection}" />
<execute method="get" action="http://ie8.taobao.com/list.php?query={selection}" />
</activityAction>
</activity>
</openServiceDescription>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
<homepageUrl>http://www.taobao.com</homepageUrl>
<display>
<name>淘宝搜索</name>
<icon>http://www.taobao.com/favicon.ico</icon>
</display>
<activity category="Find">
<activityAction context="selection">
<preview action="http://ie8.taobao.com/activities/preview.php?query={selection}" />
<execute method="get" action="http://ie8.taobao.com/list.php?query={selection}" />
</activityAction>
</activity>
</openServiceDescription>
下面是白皮书的相关xml结点说明:
homepageUrl(必需): 活动的主 URL,在其中,用户可以通过浏览方式访问服务。以此格式表示的所有 URL 均必
须与 homepageUrl 的域相匹配。
display(必需):下列元素的容器元素。
name (必需): 显示给用户的活动名称。命名规则为以动词开头,后跟应用程序。
例如:“Map on Windows Live”或“Define with Encarta”。
icon (可选): 活动的 16x16 像素图标 URL。
description (可选):功能的简要描述。
activity(必需):功能的容器元素
activityAction(必需): 一项活动可以在一个或多个数据类型中进行操作。每个 activityAction 都会根据数据
类型指定功能。其中包括 preview 元素和 execute 元素。
preview(可选):用户选择活动后会显示的活动 HTML 窗口。
execute(必需):用户调用活动时使用的主要功能。
category="Find" 表示其属于查找分类,Internet Explorer 支持的几种类别以及现有的服务示例如下。
map:Windows Live Map、Google Maps、Yahoo!Maps、Mapquest
blog:Windows Live Spaces、Windows Live Writer、Blogger
define:Encarta、Wikipedia、Dictionary.com
add:Del.icio.us、Reddit、Google Reader
translate:Windows Live Translation、Babelfish、Google Translation
如果您的活动不适合使用推荐类别,则可自行设定。以下为定义类别“分享”的示例:
<activity category="share">
当点击查找更多活动时,IE8会跳转到链接http://ie.microsoft.com/activities/zh-chs/default.aspx,
如下图:
该页面中所罗列的是网民最喜欢的“活动”的列表,因为这里的排列顺序是计算机根据特定算法列出的,
而不是人为编辑的(如果是人为干预,就不会是BAIDU了,如上图)。
Activity开发白皮书:http://go.microsoft.com/fwlink/?LinkId=110264
**********************************************************************
下面再说一下taobao在webslice方面的应用:http://ie8.taobao.com/list.php, 首先看一下其运行图:
webslice允许用户预订 Web 页面的多个部分,下面是其中一个slice的一段内容:
<tr class="hslice" id="item_1">
<td width="20%" valign="middle" align="center" height="90" class="entry-content">
<img src="http://img02.taobaocdn.com/bao/uploaded/i2/T19WFXXkNGREyR1K70_035136.jpg_sum.jpg"
border="0" title="【钻石新版包邮】STORYBOARD[(美)温迪·特米勒罗]" />
</td>
<td width="60%" height="90" class="entry-title">
<a target="_blank" href="http://auction1.taobao.com/auction/0/item_detail-">
【钻石新版包邮】STORYBOARD[(美)温迪·特米勒罗]</a>
</td>
<td width="20%" height="90" align="center" class="entry-content">一口价
<span class="price"><sup style="color:#111;">¥</sup>38.90</span>
<a style="display:none;" rel="feedurl" href="webslice/feed.php?itemID=
653a5ea6f1e5e665546af194e2144e45&xID=0db2">订阅到 WebSlice</a>
</td>
</tr>
<td width="20%" valign="middle" align="center" height="90" class="entry-content">
<img src="http://img02.taobaocdn.com/bao/uploaded/i2/T19WFXXkNGREyR1K70_035136.jpg_sum.jpg"
border="0" title="【钻石新版包邮】STORYBOARD[(美)温迪·特米勒罗]" />
</td>
<td width="60%" height="90" class="entry-title">
<a target="_blank" href="http://auction1.taobao.com/auction/0/item_detail-">
【钻石新版包邮】STORYBOARD[(美)温迪·特米勒罗]</a>
</td>
<td width="20%" height="90" align="center" class="entry-content">一口价
<span class="price"><sup style="color:#111;">¥</sup>38.90</span>
<a style="display:none;" rel="feedurl" href="webslice/feed.php?itemID=
653a5ea6f1e5e665546af194e2144e45&xID=0db2">订阅到 WebSlice</a>
</td>
</tr>
其webslice效果如下:
下面是webslice白皮书中的内容介绍(对应上面的html代码)
基本内容
WebSlice 的基本属性是 WebSlice 容器、条目标题和条目内容。
WebSlice
- 必需。
- 使用类名称 hslice。
- WebSlice 元素必须包括一个 ID。
- 表示 WebSlice 的整个区域,包括主题、描述和其他 WebSlice 属性。
条目标题
- 必需。
- 使用 hAtom Microformat 中定义的类名称 entry-title。
- 条目标题可以有多个实例。
条目内容
- 可选。
- 使用 hAtom Microformat 中定义的类名称 entry-content。
- 如果条目内容丢失,则认为它是空字符串。
- 条目内容可以有多个实例。
源 URL
- 可选。
- 使用 rel 名称 feedurl。
- 表示客户端应预订以获取更新的备用源。
- 备用源的 URL 被指定为 ref 属性的值。
我们可以在上面html代码中找到hslice,entry-title,entry-content,feedurl 相对应的内容:)
下面是Webslice的开发白皮书下载链接:)
http://go.microsoft.com/fwlink/?LinkId=110265
参考文章:IE8 Beta 2即将发布,您的网站准备好了吗? 作者:王洪超
好了,今天的内容就先到这里了。
tag:IE8,Webslice,Activities
作者:代震军,daizhj
原文链接:http://www.cnblogs.com/daizhj/archive/2008/08/13/1266879.html