实例讲解IE8新特性之webSlices

<div style="border-right: teal 1px dotted; font-size: 9pt; border-top: teal 1px dotted; float: right; border-left: teal 1px dotted; color: teal; border-bottom: teal 1px dotted; text-align: center;">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/webSlicesLogo.gif"><br>
IE8新特性</div>
<center style="margin-bottom: 15px;">
<h3>乱世</h3>
笑问天下谁人主宰？<br>
九尾探索各执千秋。<br>
待到八爷横空出世，<br>
一统江湖无人其右。 </center>
<p>IE8虽然还只是beta1阶段，但是一些爱好新奇的朋友就已经开始琢磨起来了。而且IE8的确也是个令人充满惊喜的新玩意哦——Activities、WebSlicess、更多的CSS2的支持……</p>
<p>实例讲解IE8新特性系列文章，将通过一个个简单实际的小例子，给IE8的一些新特性抛抛砖，希望能引起你思维的火花……为此系列，还非常狗腿的做了首打油诗 :-)</p>
<h4>WebSlices简介</h4>
<p>这次，我们先来讲讲IE8的一个比较有意思的新玩意WebSlices，直译就是网页片段。但是这个玩意到底是做啥用的呢？还待我慢慢道来。</p>
<p>遥想当年，为了第一时间知道一个网站的更新情况，总是要不停的访问这个网页，不停的刷新。但是，结果往往还令人失望。毕竟人的精力有限，谁能和网站这样耗着呢？</p>
<p>于是RSS出现了。这样可好了，通过RSS阅读器，我就可以第一时间知道我关注的网站的更新情况了哦。RSS果然是个好东西呀。但是，我还是需要打开RSS阅读器才能知道呀，而且，RSS对于订阅者的可定制性太差了些呀。例如，对于我的博客，我并不想定于文章的更新列表，而是想订阅最新的用户评论……还有一点就是，如果我想订阅一个网站的更新列表，我还必须知道他的RSS订阅地址……但是，那些网页设计者总是花里胡哨的装扮着他们的RSS订阅图标和地址，害的我老是找不到……</p>
<p>于是WebSlices出现了，WebSlices允许你定于网页的任意一块内容，而且提供非常直观快捷的订阅方式，而且订阅的情况直接反映在IE的收藏栏中，方便、直接、快速的查看网页块的更新情况。</p>
<p>如果，你现在使用的正是IE8浏览器，你可以访问 <a title="WebSlicess" href="http://ie8.ebay.com" target="_blank">http://ie8.ebay.com</a>，来快速的获得WebSlices的使用体验哦。在“Start a WebSlice enabled search”随便搜索一个商品（例如book），然后将鼠标移动页面的商品列表中，你就能看到WebSlices的图标哦。</p>
<div class="floatMPic">
<a title="WebSlices" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="WebSlices" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_1q/WebSlices01.gif"></a><br>
WebSlicess订阅图标</div>
<p>点击这个图标，会弹出一个对话框，询问你是否定于这个网页片段。点击“add”就可以订阅这个商品的信息了。</p>
<div class="floatMPic">
<a title="WebSlices" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="WebSlices" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_1q/WebSlices02.gif"></a><br>
传说中的WebSlicess订阅对话框</div>
<p>即使离开了ebay网站，当这个商品的信息有更新时（收藏栏中会以粗体显示），只要打开IE8就能第一时间知道商品的更新情况了（不要告诉我你很少使用浏览器哦）。</p>
<div class="floatMPic">
<a title="WebSlices" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="WebSlices" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_1q/WebSlices03.jpg"></a><br>
只要打开IE8，立刻就可以知道网站片段的更新情况哦</div>
<h4>如何实现WebSlices功能</h4>
<p>如此华丽的功能，实现起来却惊人的简单！只需要3个class就可以了！而且这三个class你可以需要自己决定是否添加样式哦。下面就是一个最简单的实现示例——<a title="WebSlices示例" href="http://file.hjbbs.com/ayi/test/ws.html" target="_blank">点击此处访问webSlices示例页面</a></p>
<div class="hiddenArea">
<div id="divHaF_1" class="haContracted">
<img class="imgContracted" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif"><span class="showText">点击此处展开示例网页源码</span>
</div>
<div id="divHaS_1" class="haExpanded">
<div class="haHiddenAreaOpration"><img class="imgExpanded" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif"></div>
<div class="haMain">
<div style="border-right: #cccccc 1px solid; padding-right: 5px; padding-left: 4px; font-size: 13px; border-top: #cccccc 1px solid; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #0000ff;">&lt;!</span><span style="color: #ff00ff;">DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">html</span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta</span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;">content</span><span style="color: #0000ff;">="text/html;charset=utf-8"</span><span style="color: #ff0000;"></span><span style="color: #0000ff;">/&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta</span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="Keywords"</span><span style="color: #ff0000;">content</span><span style="color: #0000ff;">="YES!B/S!,web标准,杨正祎,博客园,实例代码"</span><span style="color: #ff0000;"></span><span style="color: #0000ff;">/&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta</span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="Description"</span><span style="color: #ff0000;">content</span><span style="color: #0000ff;">="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/"</span><span style="color: #ff0000;"></span><span style="color: #0000ff;">/&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;">YES!B/S!文章示例页面</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">style</span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">&gt;</span><span style="color: #800000; background-color: #f5f5f5;"><br>
#hsliceTest</span><span style="color: #000000; background-color: #f5f5f5;">{</span><span style="color: #ff0000; background-color: #f5f5f5;"><br>
width</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;">200px</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;"><br>
height</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;">200px</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;"><br></span><span style="color: #000000; background-color: #f5f5f5;">}</span><span style="color: #800000; background-color: #f5f5f5;"><br>
#hsliceTesth3</span><span style="color: #000000; background-color: #f5f5f5;">{</span><span style="color: #ff0000; background-color: #f5f5f5;"><br>
background-color</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;">#ccc</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;"><br></span><span style="color: #000000; background-color: #f5f5f5;">}</span><span style="color: #800000; background-color: #f5f5f5;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="hslice"</span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="hsliceTest"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">h3</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="entry-title"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;">webSlices标题</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="entry-content"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br>
这是一个关于webSlices的示例。来自</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">a</span><span style="color: #ff0000;">target</span><span style="color: #0000ff;">="_blank"</span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://justinyoung.cnblogs.com/"</span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">="webSlices"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;">YES!B/S!</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span><span style="color: #008000;">&lt;!--</span><span style="color: #008000;">end:entry-content</span><span style="color: #008000;">--&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span><span style="color: #008000;">&lt;!--</span><span style="color: #008000;">end:hslice</span><span style="color: #008000;">--&gt;</span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span>
</div>
</div>
&lt;!--end: haMain --&gt;
</div>
</div>
&lt;!--end: hiddenArea --&gt;
<p>就是这么简单，将你提供webSlices订阅的网页内容，放在一个class为“entry-content”的容器内，当浏览器将鼠标移动到这个区域就会出现webSlices的订阅图标。</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_1q/WebSlices04.jpg"></a><br>
webSlices示例效果图</div>
<h4>webSlices的注意事项</h4>
<ul style="margin: 15px 2px 15px 25px;">
<li>不要在本地用静态页面测试webSlices示例页面。没有效果的，必须上传到服务器上才能有效果。
    </li>
<li>entry-content容器不能包含form表单。webSlices只能用来展现数据，不能进行互动性操作。（希望以后能支持互动性操作。想一想，如果能够订阅<a title="博客园社区" href="http://space.cnblogs.com" target="_blank">博客园社区</a>发闪存的那块，发闪存是不是很方便呀！）
    </li>
<li>如果你原来的结构已经包含了class，那如何加上这些额外的class呢？其实很简单，只要两个class之间用空格隔一下就可以了。例如:&lt;div class="my_oldclass entry-content"&gt;
    </li>
<li>如果你不想在页面上显示webSlices订阅标题（entry-title里面的内容），你可以将其display:none掉。这样，网页上便看不到这个webSlices订阅标题了，但是并不影响它在IE8收藏栏中的标题效果。（看了博客园dudu的做法才知道的。呵呵～）
    </li>
<li>如果，你对此有兴趣，可以去下载webSlices的开发者白皮书。你可以到：<a title="IE8开发者白皮书（pdf格式，附下载） " href="http://www.cnblogs.com/JustinYoung/archive/2008/03/10/ie8-whitepapers-download.html" target="_blank">《IE8开发者白皮书（pdf格式，附下载）》 </a>下载那些开发者白皮书。
    </li>
<li>现在IE8还只是beta1阶段，所以webSlices还有进一步修改和完善的可能性。
    </li>
<li>（<span style="color: #ff6600;">此条为2008-03-18文章发表1天后补充：向大家推荐nfa2dfa的文章<a title="IE8 WebSlice 尝鲜" href="http://www.cnblogs.com/huazhihao/archive/2008/03/09/1097920.html" target="_blank">《IE8 WebSlice 尝鲜》</a>，其中有关于webslices更多、更深入的相关资料。推荐大家阅读。感谢dfa2dfa的留言提醒。</span>） </li>
</ul>
<h4>第一个使用webSlices的网站？？</h4>
<p>刚写完这篇文章，然后到博客园首页看发布的结果的时候。突然，发现在<a title="博客园首页" href="http://www.cnblogs.com" target="_blank">博客园首页</a>的侧边栏，发现了一处，竟然出现了webSlices订阅图标。呵呵～看来dudu也是个喜欢尝鲜的家伙哦。</p>
<p>我以前只知道ebay、facebook、yahoo、msn等网站提供了webSlices测试功能。中文的网站还真不知道有谁使用了webSlices功能，不知道博客园算不算中文网站中吃webSlices这个螃蟹的第一人呢？</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_1q/WebSlices05.gif"></a><br>
webSlices示例效果图</div>
<h4>相关文章列表</h4>
<ul style="margin: 15px 2px 15px 25px;">
<li>
<a title="IE8开发者白皮书（pdf格式，附下载） " href="http://www.cnblogs.com/JustinYoung/archive/2008/03/10/ie8-whitepapers-download.html" target="_blank">《IE8开发者白皮书（pdf格式，附下载）》 </a>
    </li>
<li>
<a title="IE6、IE7、IE8共存方法  " href="http://www.cnblogs.com/JustinYoung/archive/2008/03/14/IE6_IE7_IE8.html" target="_blank">《IE6、IE7、IE8共存方法 》 </a>
    </li>
<li>向大家推荐<font>nfa2dfa</font>兄的<a title="IE8 WebSlice 尝鲜" href="http://www.cnblogs.com/huazhihao/archive/2008/03/09/1097920.html" target="_blank">《IE8 WebSlice 尝鲜》</a>这篇文章，这篇文章更系统和有条理的介绍了webslice技术。 </li>
</ul>