問題討論區


【JavaScript 語法】文章精華區


【教學】 [jQuery]幫外部連結加上自訂的圖示



[jQuery]幫外部連結加上自訂的圖示
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106

有時為了方便讓瀏覽者能一眼就看出內部跟外部連結,因此會在外部連結後面加上一個  圖示。但~~如果要我們一一自行加上這樣的圖示是不可能的!!雖然我們在「依連結的檔案類型顯示圖示」有學到如何使用 jQuery依連結的副檔名來加上相對應的圖示,不過要用在此次的效果時,整個程式就會變的比較複雜,所以我們要改用另一種方式來達成。

廢話就不多說了,讓我們直接來看 HTML 的部份



<ul>
    <
li><a href="https://www.google.com">Google</a></li>
    <
li><a href="http://abgne.tw/apply-jquery/jquery-puzzle.html">圖片拼圖化</a></li>
    <
li><a href="http://www.flycan.com">飛肯]計學苑</a></li>
    <
li><a href="http://abgne.tw/apply-jquery/jquery-animate-menu-1.html">動畫賀聯式選單</a></li>
</
ul>

這邊看到的就是很簡單的 ulli 的使用,然後我們再用 CSS 來修飾一下



ul
, li {
    
margin: 0;
    
padding: 0;
    list-
style: none;
}
a {
    
text-decoration: none;
}
a:hover {
    
text-decoration: underline;
}

我把 ulli邊界、距都設成 0,並且把樣式都取消,然後讓我們的超連結預設是沒有底線的,只有當滑鼠移到連結時才會顯示底線來。先看一下預覽樣式:

在開始動手寫 Script 之前,先讓我們看一下超連結基本屬性



<a href="http://abgne.tw/apply-jquery/jquery-puzzle.html">圖片拼圖化</a>

其中的 blog.xuite.net 就是所謂的主機名稱(hostname),且在超連結中要使用 http(s) 開頭才行,所以我們要判斷是否為外部連結的話,只要判斷超連結的 hostname 跟目前網站的 hostname 是否一樣就可以了。

因此,我們現在使用 jQueryfilter() 來對超連結進行篩選



$(function(){
    
// 過濾 ul 中的 a 元素
    
$("ul a").filter(function(){
        
// 如果有 hostname 且 hostname 跟現在的 hostname 不一樣時
        
return this.hostname && this.hostname != 'abgne.tw';
    }).
after(" <img src='external.png' alt='外部連結' align='absmiddle' />");
});

我們這邊就是先篩選出有 hostname 且 hostname 跟目前網站的 hostname 不一樣的超連結,當已經篩選出外部連結之後,我們只要在它後面插入  圖示就可以囉。

讓我們來看看效果是如何:

這樣是不是簡單又容易讓瀏覽者一眼就分辨出來呢!但是啊~~如果把滑鼠移到  圖示上會顯示出外部連結的提示,不過我比較想要讓它能有超連結的效果耶。雖然我們能幫  圖示再加上超連結,不過這樣就~太超過了。所以我就改用另一種方式來表達:

只需要修改 jQuery 的語法就好,其它 HTMLCSS 都不用動


$(function(){
    
// 過濾 ul 中的 a 元素
    
$("ul a").filter(function(){
        
// 如果有 hostname 且 hostname 中沒有 abgne.tw 的內容時
        
return this.hostname && this.hostname.indexOf('abgne.tw') < 0;
    }).
css({
        
background: "url(external.png) no-repeat right",
        
paddingRight: 15
    
}).attr("target", "_blank");    // 新視窗開啟
});

一樣是要先篩選出超連結,只是篩選出來後,我們這次不是在它後面插入  圖示,而是把  圖示當成超連結的背景圖片(background-image),然後讓它出現在超連結的右邊,因為要讓它能正常顯示,所以我們同時要把它的 padding-right 往右推擠過去才行。同時還加入了讓外部連結能用開新視窗的方式來連結。

當我們完成後,如果把滑鼠移到  圖示時就會變成

有沒有看到啊~~現在  圖示就是跟超連結融合在一起囉!但缺點就是不會有外部連結的提示字串了,真是有一好沒兩好啊!!(要做到也是可以,只是會更麻煩一點)

另外,不知道各位有沒有注意到,我在篩選的過程中,是判斷超連結的 hostname 有沒有包含 xuite.net 的字串,而不是相等於 location.hostname。這是因為有可能我們本身有多個子網域可使用,雖然 hostname 可能是不一樣,但都一樣是屬於站內,所以我們可以透過這樣的方式來自訂更進階的篩選條件。

範例瀏覽:

http://demonstration.abgne.tw/jquery/0006/0006_1.html

http://demonstration.abgne.tw/jquery/0006/0006_2.html

以上內容於2009-06-26 09:57 發表在 http://abgne.tw/jquery/apply-jquery/jquery-external-icon.html


2009/6/26 13:03
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS