位置：首页>> 网络编程>> 网页设计>> css+JavaScript实现PDF、ZIP、DOC链接的标注

css+JavaScript实现PDF、ZIP、DOC链接的标注

作者：sexboy024　来源：176so　发布时间：2007-05-11 17:03:00　

标签：属性选择器,超链接,标注

内容摘要：本文介绍了使用CSS结合javascript来实现对超链接的类型进行标注，让浏览者明确是zip，doc,pdf或其它格式的文件。这样访问者就知道他所要点击的这个链接是下载而不是打开另一个页面了。

如果所有的人都使用IE7或者FF的话。我们完全可以使用[att$=val]属性选择器，寻找以特定值（比如.zip和.doc）结尾的属性。

a[href$=".pdf"] { padding-right: 19px; background: url(pdf.gif) no-repeat 100％ .5em; }
a[href$=".zip"] { padding-right: 17px; background: url(zip.gif) no-repeat 100％ .5em; }

不幸的是IE6以下浏览器不支持属性选择器。好在，可以通过在每个元素中添加类，使用JavaScript和DOM实现相似的效果。

下面给出了一个解决办法:

function fileLinks() {
    var fileLink;
    if (document.getElementsByTagName('a')) {
        for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
            if (fileLink.href.indexOf('.pdf') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'pdfLink';
            }
            if (fileLink.href.indexOf('.doc') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'docLink';
            }
            if (fileLink.href.indexOf('.zip') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'zipLink';
            }
        }
    }
}
window.onload = function() {
    fileLinks();
}

当然，你需要在你的css文件中，增加这几个css类：

.pdfLink { padding-right: 19px; background: url(pdf.gif) no-repeat 100％ .5em; }
.docLink { padding-right: 19px; background: url(doc.gif) no-repeat 100％ .5em; }
.zipLink { padding-right: 17px; background: url(zip.gif) no-repeat 100％ .5em; }

预览效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>PDF Link Labeling Example</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><script type="text/javascript">function fileLinks() { var fileLink; if (document.getElementsByTagName('a')) { for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) { if (fileLink.href.indexOf('.pdf') != -1) { fileLink.setAttribute('target', '_blank'); fileLink.className = 'pdfLink'; } if (fileLink.href.indexOf('.doc') != -1) { fileLink.setAttribute('target', '_blank'); fileLink.className = 'docLink'; } if (fileLink.href.indexOf('.zip') != -1) { fileLink.setAttribute('target', '_blank'); fileLink.className = 'zipLink'; } } }}window.onload = function() { fileLinks();}</script><style type="text/css">body { font: 12px/1.5 "Trebuchet MS", Trebuchet, sans-serif; width: 460px; margin: 20px; padding: 20px; border: 1px solid #C8D8C0; }a:hover { text-decoration: none; }.pdfLink { padding-right: 19px; background: url(/file/UploadPic/20078/2/200782151524639.gif) no-repeat 100％ .5em; }.docLink { padding-right: 19px; background: url(/file/UploadPic/20078/2/200782151533605.gif) no-repeat 100％ .5em; }.zipLink { padding-right: 17px; background: url(/file/UploadPic/20078/2/200782151533853.gif) no-repeat 100％ .5em; }a[href$=".pdf"] { padding-right: 19px; background: url(/file/UploadPic/20078/2/200782151524639.gif) no-repeat 100％ .5em; }a[href$=".zip"] { padding-right: 17px; background: url(/file/UploadPic/20078/2/200782151533853.gif) no-repeat 100％ .5em; }a[href$=".doc"] { padding-right: 19px; background: url(/file/UploadPic/20078/2/200782151533605.gif) no-repeat 100％ .5em; }</style></head><body><h1>PDF Link Labeling Example</h1><p>Lorem ipsum dolor sit amet, <a href="file.pdf">consectetuer</a> adipiscing elit. Pellentesque non magna. Vivamus felis elit, luctus non, hendrerit non, ultricies sed, lectus. Ut dolor magna, vehicula in, ultricies eu, tristique nec, est. Vivamus non wisi. Donec orci leo, posuere a, vulputate non, pretium sed, eros. Proin massa elit, mattis nec, tempus vel, gravida euismod, pede. Ut sit amet nibh. Donec pharetra. Donec eros. Aenean lacinia gravida massa. Aliquam erat volutpat. Quisque quis augue. Cras egestas, quam vel mattis auctor, wisi eros congue turpis, sed tincidunt lacus tortor ut elit. Nam volutpat arcu ac ligula.</p><p>Integer quis eros eu nunc rhoncus placerat. Integer elit magna, pulvinar sit amet, interdum eget, ultrices ut, urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sagittis. Maecenas ut ligula ac sem semper placerat. Duis id <a href="file.doc">quam</a>. Quisque pellentesque tincidunt arcu. Pellentesque ac dolor ut odio imperdiet feugiat. <a href="file.zip">Cras nulla</a>. Donec dignissim viverra nulla. Proin sed libero. Nullam massa. Curabitur iaculis magna id quam. Vestibulum eu mi vitae eros laoreet vestibulum.</p></body></html>

[提示：你可先修改部分代码，再按运行]

最后一点建议，你的小图标不要过分醒目，这会分散浏览者的注意力。

原文：http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/
翻译：http://www.176so.com/past/2007/3/17/pdf_links_labeling/

投稿

css+JavaScript实现PDF、ZIP、DOC链接的标注

猜你喜欢