10-08-24
外部リンクだけに新規ウィンドウ設定とアイコンを付加する
demo
- LabPad
- PozuPad
- sample.pdf （16.4KB）
memo
作業内容
webの専門誌 Web Designingのバックナンバー（2009年7月号）に、外部リンクの解析について書かれていたので試してみます。外部リンクであれば「target="_blank"」と「class="outlink"」を追加しています。pdfファイルへのリンクには「class="pdfIcon"」を追加しています。
なお今回、画像に対して外部リンクが設定されている場合は「class="outlink"」を追加しないよう設定しております。
--- jQuery設定 ---
<script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
var siteUri = 'http://otani-webs.com/lab/';
var windowOpen = true;
var externalClass = 'outlink';
var externalLinks = $('a[href^="http://"]').not('a[href^="' + siteUri + '"]');
if (windowOpen) {
externalLinks.click(function(){
window.open($(this).attr('href'), '_blank');
return false;
});
}
//外部リンクのうち、img要素を持たないものにclass="outlink"を追加
externalLinks.not(':has(img)').addClass(externalClass);
var pdfLinks = $('a[href$=".pdf"]');
pdfLinks.addClass('pdfIcon');
});
</script>
--- html設定 ---
<ul>
<li><a href="http://otani-webs.com/lab/">LabPad</a></li>
<li><a href="http://otani-webs.com/blog">PozuPad</a></li>
<li><a href="img/100824/sample.pdf">sample.pdf</a> <span class="date">（16.4KB）</span></li>
<li><a href="http://otani-webs.com/blog"><img src="img/100824/pozupad.gif" /></a></li>
</ul>
--- css設定 ---
#contents a.outlink{
margin-right:3px;
padding-right:16px;
background: url(../img/ico_outlink.gif) no-repeat right center;
}
#contents a.pdfIcon{
background:url(img/100824/ico_pdf.gif) no-repeat left center;
padding:0 0 0 18px;
}