自動単語リンクプラグインを使ってみよう
それでは、完成したプラグインを実際に使ってみましょう。
いつもどおり、最初にjQueryライブラリファイルを読み込ませたあと、プラグインファイルを読み込ませます。
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/adlink.js"></script>
次に、ページが読み込まれた後に自動リンク機能が実行されるように、スクリプトを書きます。ID名が「sampleDoc」のエレメントだけにリンクを追加するには、以下のようにします。
<script type="text/javascript"><!--
$(function () {
$("#sampleDoc").addlink();
});
// --></script>
ページ全体に対してリンクを追加する場合、以下のように書きます。
$("body").addlink();
動作を確認して、単語にWikipediaのリンクが追加されていれば完成です。改造例としては、プラグインが読み込まれたら常にページ全体に適用されるようにすると便利でしょう。また、配列部分は別ファイルを読み込むようにておくと、プログラムファイルを修理することなく単語の追加・削除ができます。さらにJSON形式にしておけば、他のサーバー上にある単語ファイルを読み込む、といったことも可能になります。いろいろ試してみましょう。
![]() |
|---|
| 自動リンクプラグインを組み込む前(上)と組み込んだ後(下) |
明日は、写真画像の横に撮影場所などのGoogleマップを表示するプラグインを作成します。お楽しみに。
■もっと勉強したい人のためのオススメBOOK(Amazon.co.jp)
この特集の記事
- 最終日:リンク先のサムネイルを自動的に表示しよう
- 4日目:写真の横にGoogleマップを表示しよう
- 2日目:顔文字を顔画像に変換しよう
- 1日目:難しい漢字にふりがなをつけよう
- 0日目:jQueryプラグイン作成の基礎知識
- この特集の一覧へ


















![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM] Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif)




