執行個體講解IE8新特性之webSlices

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章目錄

亂世

IE8新特性

亂世

笑問天下誰人主宰？
九尾探索各執千秋。
待到八爺橫空出世，
一統江湖無人其右。

IE8雖然還只是beta1階段，但是一些愛好新奇的朋友就已經開始琢磨起來了。而且IE8的確也是個令人充滿驚喜的新玩意哦——Activities、WebSlicess、更多的CSS2的支援……

執行個體講解IE8新特性系列文章，將通過一個個簡單實際的小例子，給IE8的一些新特性拋拋磚，希望能引起你思維的火花……為此系列，還非常狗腿的做了首打油詩

WebSlices簡介

這次，我們先來講講IE8的一個比較有意思的新玩意WebSlices，直譯就是網頁片段。但是這個玩意到底是做啥用的呢？還待我慢慢道來。

遙想當年，為了第一時間知道一個網站的更新情況，總是要不停的訪問這個網頁，不停的重新整理。但是，結果往往還令人失望。畢竟人的精力有限，誰能和網站這樣耗著呢？

於是RSS出現了。這樣可好了，通過RSS閱讀器，我就可以第一時間知道我關注的網站的更新情況了哦。RSS果然是個好東西呀。但是，我還是需要開啟RSS閱讀器才能知道呀，而且，RSS對於訂閱者的可定製性太差了些呀。例如，對於我的部落格，我並不想定於文章的更新列表，而是想訂閱最新的使用者評論……還有一點就是，如果我想訂閱一個網站的更新列表，我還必須知道他的RSS訂閱地址……但是，那些網頁設計者總是花裡胡哨的裝扮著他們的RSS訂閱表徵圖和地址，害的我老是找不到……

於是WebSlices出現了，WebSlices允許你定於網頁的任意一塊內容，而且提供非常直觀快捷的訂閱者式，而且訂閱的情況直接反映在IE的收藏欄中，方便、直接、快速的查看網頁塊的更新情況。

如果，你現在使用的正是IE8瀏覽器，你可以訪問 http://ie8.ebay.com，來快速的獲得WebSlices的使用體驗哦。在“Start a WebSlice enabled search”隨便搜尋一個商品（例如book），然後將滑鼠移動頁面的商品列表中，你就能看到WebSlices的表徵圖哦。

WebSlicess訂閱表徵圖

點擊這個表徵圖，會彈出一個對話方塊，詢問你是否定於這個網頁片段。點擊“add”就可以訂閱這個商品的資訊了。

傳說中的WebSlicess訂閱對話方塊

即使離開了ebay網站，當這個商品的資訊有更新時（收藏欄中會以粗體顯示），只要開啟IE8就能第一時間知道商品的更新情況了（不要告訴我你很少使用瀏覽器哦）。

只要開啟IE8，立刻就可以知道網站片段的更新情況哦如何?WebSlices功能

如此華麗的功能，實現起來卻驚人的簡單！只需要3個class就可以了！而且這三個class你可以需要自己決定是否添加樣式哦。下面就是一個最簡單的實現樣本——點擊此處訪問webSlices樣本頁面

點擊此處展開樣本網頁源碼<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="YES!B/S!,web標準,楊正禕,部落格園,執行個體代碼" />
    <meta name="Description" content="這是一個簡單YES!B/S!文章樣本頁面,來自楊正禕的部落格,http://justinyoung.cnblogs.com/" />
    <title>YES!B/S!文章樣本頁面</title>
<style type="text/css">
#hsliceTest{
    width:200px;
    height:200px;
}
#hsliceTest h3{
    background-color:#ccc;
}
</style>
</head>
<body>

<div class="hslice" id="hsliceTest">
    <h3  class="entry-title">webSlices標題</h3>
    <div class="entry-content">
        這是一個關於webSlices的樣本。來自<a target="_blank" href="http://justinyoung.cnblogs.com/" title="webSlices">YES!B/S!</a>
    </div>
</div>

</body>
</html>

就是這麼簡單，將你提供webSlices訂閱的網頁內容，放在一個class為“entry-content”的容器內，當瀏覽器將滑鼠移動到這個地區就會出現webSlices的訂閱表徵圖。

webSlices樣本webSlices的注意事項

不要在本地用靜態頁面測試webSlices樣本頁面。沒有效果的，必須上傳到伺服器上才能有效果。
entry-content容器不能包含form表單。webSlices只能用來展現資料，不能進行互動性操作。（希望以後能支援互動性操作。想一想，如果能夠訂閱部落格園社區發快閃記憶體的那塊，發快閃記憶體是不是很方便呀！）
如果你原來的結構已經包含了class，那如何加上這些額外的class呢？其實很簡單，只要兩個class之間用空格隔一下就可以了。例如:<div class="my_oldclass entry-content">
如果你不想在頁面上顯示webSlices訂閱標題（entry-title裡面的內容），你可以將其display:none掉。這樣，網頁上便看不到這個webSlices訂閱標題了，但是並不影響它在IE8收藏欄中的標題效果。（看了部落格園dudu的做法才知道的。呵呵～）
如果，你對此有興趣，可以去下載webSlices的開發人員白皮書。你可以到：《IE8開發人員白皮書（pdf格式，附下載）》下載那些開發人員白皮書。
現在IE8還只是beta1階段，所以webSlices還有進一步修改和完善的可能性。
（此條為2008-03-18文章發表1天后補充：向大家推薦nfa2dfa的文章《IE8 WebSlice 嘗鮮》，其中有關於webslices更多、更深入的相關資料。推薦大家閱讀。感謝dfa2dfa的留言提醒。）

第一個使用webSlices的網站？？

剛寫完這篇文章，然後到部落格園首頁看發布的結果的時候。突然，發現在部落格園首頁的側邊欄，發現了一處，竟然出現了webSlices訂閱表徵圖。呵呵～看來dudu也是個喜歡嘗鮮的傢伙哦。

我以前只知道ebay、facebook、yahoo、msn等網站提供了webSlices測試功能。中文的網站還真不知道有誰使用了webSlices功能，不知道部落格園算不算中文網站中吃webSlices這個螃蟹的第一人呢？

webSlices樣本相關文章列表

《IE8開發人員白皮書（pdf格式，附下載）》
《IE6、IE7、IE8共存方法》
向大家推薦nfa2dfa兄的《IE8 WebSlice 嘗鮮》這篇文章，這篇文章更系統和有條理的介紹了webslice技術。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More