8のjQueryのすごいTIPS

微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。

target="_blank" のリンクの作成

XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。

$('a[@rel$='external']').click(function(){
	this.target = "_blank";
});

<a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a>

[to-R補足]
実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[以下のサンプルも同様の箇所があります。]
というか、XHTML 1.0 transitionalを採用すればいいだけだと思う。

要素の数を取得

$('element').size();

[to-R補足]
以下のコードでも取得できます。(けど、原文のサンプルのほうがjQueryっぽですね)

$('element').length;

画像のプリロード

画像をjavascriptで利用する場合、このコードで先読みしておこう。

jQuery.preloadImages = function()
{
	for(var i = 0; i<arguments.length; i++)
	{
		jQuery("<img>").attr("src", arguments[i]);
	}
};
 
// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

[to-R補足]
原文は<や>が実態参照化されていないのでソースコードで確認してください。

ブラウザごとにCSSを変更

jQueryを利用すればブラウザ毎にCSSを簡単に使い分けることが出来ます。

//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );
 
//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );
 
//C. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );
 
//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );

[to-R補足]
ブラウザ毎にbodyのclassなどを付加して、CSSはスタイルシートに記述したほうがよさそうな気がします。（ケースバイケースですが）

//A. Target Safari
if( $.browser.safari ) $("body").addClass("safali");

テキストから特定のワードを取り除く

var el = $('#id');
el.html(el.html().replace(/word/ig, ""))

再帰的に行いたい場合は以下のサイトを参考に

参考：ある要素内の文字列を置換する

ブロックレベルの高さを揃える

指定したブロックレベル要素の高さを揃える方法。

function equalHeight(group) {
	tallest = 0;
	group.each(function() {
		thisHeight = $(this).height();
		if(thisHeight > tallest) {
			tallest = thisHeight;
		}
	});
	group.height(tallest);
}
 
$(document).ready(function() {
	equalHeight($(".recent-article"));
	equalHeight($(".footer-col"));
});

[to-R補足]
この場合読み込み時の高さは揃えれますが、フォントサイズの変更やウィンドウサイズの変更などが行われた場合、整合性が保てなくなるので注意。

参考：ブロックレベル要素の高さを揃えるheightLine.js

フォントのリサイズ

最近ではフォントのリサイズは多くのサイトで見かけます。jQueryでリサイズを行う方法です。

$(document).ready(function(){
	// Reset Font Size
	var originalFontSize = $('html').css('font-size');
		$(".resetFont").click(function(){
		$('html').css('font-size', originalFontSize);
	});
	// Increase Font Size
	$(".increaseFont").click(function(){
		var currentFontSize = $('html').css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*1.2;
		$('html').css('font-size', newFontSize);
		return false;
	});
	// Decrease Font Size
	$(".decreaseFont").click(function(){
		var currentFontSize = $('html').css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*0.8;
		$('html').css('font-size', newFontSize);
		return false;
	});
});

[to-R補足]
以下のような要素をhtml上に配置しておけば利用できます。

<input type="button" value="デフォルト" class="resetFont" />
<input type="button" value="拡大" class="increaseFont" />
<input type="button" value="縮小" class="decreaseFont" />

右クリックのコンテキストメニューを非表示に

jQueryでは右クリックのコンテキストメニューの非表示が簡単に出来ます。

$(document).ready(function(){
	$(document).bind("contextmenu",function(e){
		return false;
	});
});

[to-R補足:追記]
通常のサイトではユーザビリティを下げるだけなので利用すべきではないですね。

スポンサードリンク

2009年3月17日 16:12
カテゴリー JavaScript

«jQueryでアコーディオンを設定する際の注意 | メイン | [書評]週間アスキー別冊「ビスタの超技100」»