FullSize:一個新的IMG標簽屬性(附帶jQuery實現)

作者: IIduce  來源: css9.net  發布時間: 2009-12-21 15:14  閱讀: 3784 次  推薦: 0   原文鏈接   [收藏]  

“img標簽添加了一個新屬性么?”,看到標題你也許會驚奇的問。呵呵,千萬莫誤會,這只是一位國外Web設計師的主張而已。為了推銷他的想法,他建立了這個主題網站(你可以在這個頁面的下方簽名,表示支持),而且用Jquery插件模擬了它。他的這個想法真的很有意思,也很有意義。我這里對它的想法做個簡單翻譯,略表支持。

FullSize屬性是什么?

我們在網頁設計中,經常會使用這樣一種解決方案:當點擊頁面中的某否圖片時,使用Javascript/Ajax技術用彈出層等方式獲取這張圖片的原始圖片(或大尺寸圖片)。我們可以注意到,這在當前的網頁設計中,尤其是圖片展示站點的設計中被廣泛應用。既然這樣,為什么這項功能不能成為一個標準,為什么不是由瀏覽器實現而是讓設計師費盡心思去設計。所以我建議能夠在img標簽中添加一個fullsize屬性,可以用來指定”src”中圖片的大尺寸圖片,瀏覽器可以原生支持點擊圖片時彈出大尺寸的圖片。

我希望這樣一個提議能夠得到W3C組織的關注,在下一個html版本中的img標簽中添加fullsize屬性,從而使他成為一個標準。我認為這絕不僅是一個貌似好聽的主意,它將對Web設計師有很大的幫助。如果你有什么好的想法或更好的建議,可以在Fullsize Google Group中討論。

關于Fullsize屬性設想的一些問答

-為什么要添加Fullsize屬性,而不是用javascript實現?

Fullsize屬性是希望這樣一個常用功能能夠輕松實現。當我們想實現這個功能時,僅僅是記住在img標簽中加入fullsize屬性就可以了。當然,如果你不愿意使用fullsize屬性,你也可以自己用javascript實現。

-如果Javascript被禁用,fullsize屬性會不會失效?

我的建議是fullsize屬性可以得到瀏覽器的原生支持,所以它與javascript是否禁用是不相干的。

-我不需要瀏覽器加入這樣的功能,因為我對圖片的彈出樣式無法控制?

如果fullsize屬性可以加入到下個版本的html中,它也應當能得到css的支持。如果你不喜歡瀏覽器這樣去實現你也可以自己使用javascript實現。雖然能夠得到css的支持會更好些,但我認為它并不是十分必要。

模擬這一想法的jQuery插件

盡管這一想法目前還不能通過html實現,不過我創建了一個jquery插件可以實現它。因為目前img標簽中沒有fullsize屬性,我使用longdesc(不知道img中的longdesc屬性?了解一下)來代替它。longdesc是img標簽的合法屬性,它原本是用來指向一個圖片詳細描述的url。這款Jquery插件非常容易就可以上手的,而且它在Safari,Firefox,Chrome,IE8,IE7,IE6中都測試通過。

下載這款插件:Fullsize Jquery Plugin [大小:23.59 KB - 下載次數:125]

它的壓縮版本僅有8kb!注釋版本是12kb。如何使用它:

1.   下載插件后,引用插件包中的js和css文件(當然,在這之前你要引用jquery代碼文件),如下:

 

 
<link href="your_path_here/fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="your_path_here/fullsize/jquery.fullsize.js"></script>

2.   為頁面中所有img標簽綁定fullsize功能:

 

 

 
$("img").fullsize();

3.   在html的img標簽中指定longdesc屬性,例如:

 

 

 
<img src="me.jpg" alt="me" longdesc="me-big.jpg" />

 

這款插件同時可以設定一些參數,例如彈出圖片是否有陰影,圖片彈出速度等等,詳細內容可以在作者網站找到

我這里做了一個例子,可以直觀的看一下它的效果。

例子的源代碼下載:Fullsize Plugin Example

0
0
 
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()