skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

Ajaxにコンテンツを読み込むjavascript「jQuery ajaxContent」

｜ ｜ ｜ ｜ ｜ ｜ ｜

Web2.0と言われ、外部コンテンツをAjaxに表示するようなサイトが増えました。
jQuery ajaxContentはそれを可能にするjavascriptです。

使用方法
jQuery ajaxContentからjquery.ajaxContent.pack.jsをjQueryからjquery.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.ajaxContent.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.class名').ajaxContent();
});
</script>
上記を記述し、表示させたいコンテンツを以下の通りにすれば完成です。
<a class="class名" href="読み込むコンテンツ（htmlなど）">テキスト</a>
またオプションとして以下のようなものがあります。
<script type="text/javascript">
$(document).ready(function(){
$('.class名').ajaxContent({
event:'mouseover', //表示をマウスオーバー時に
loaderType:'img', //ローディングメッセージを画像に
loadingMsg:'ajax-loader.gif', //ローディングメッセージ（画像）の指定
target:'#id名' //表示位置の指定
});
});
</script>
Ajaxにコンテンツを読み込むjavascript「jQuery ajaxContent」サンプル

記事作成：2008年01月19日

前の記事：prototypeでFisheyeメニューを作成するjavascript「Fisheye」
次の記事：ショートカットキーを作成するjavascript「shortKeys」