Movable Type 備忘録

 jQuery でカンタンに外部ファイルを読込む（jquery.inc）

  • Oct012008
  • Vote:
    http://bizcaz.com/archives/2008/10/01-214901.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんばんわ^^

訪問者さんから教えてもらった jQuery プラグインで、Ajax による外部ファイル読込み( 表示 )に特化した、すっごく便利な( わたし的には久しぶりのお気に入り )プラグインだったのでご紹介です (●＞∀＜●)／
現時点( 2008.10.01 )ではバージョン 5 のようです。

ちょと体調も優れないのでサクッと説明しますね。

使い方

  1. 上記ページから jquery.inc-5.pack.js という JavaScript ファイルをダウンロードします。そして、各自の環境に合わせてサーバにアップロードします。
    当然ですが jQuery も必要ですので、持ち合わせてない人は合わせてダウンロードしてサーバにアップロードします。

  2. HTML ヘッダ中に以下を記述します。

    HTML ヘッダ

    1. <script type="text/javascript" src="http://●●●.com/js/jquery-1.2.6.min.js"></script>
    2. <script type="text/javascript" src="http://●●●.com/js/jquery.inc-5.js"></script>

    青字の部分を各自の環境に合わせて変更します。

  3. 外部ファイルを読込みたい( 表示したい )ところで以下のような記述を追加します。

    外部ファイル表示

    1. <div class="inc:ext.txt">ここに読込んだ ext.txt の内容が表示されます</div>

    青字の部分をプラグインが読み取って指定ファイルの読込みが行われます。
    フォーマットは必ず「inc:外部ファイル名称」という形式で、クラス名として指定します。

    上記例では ext.txt というテキストファイルが読込まれる( 表示される )ようになります。

    たとえば、onclick イベントと併用することも可能です。 その場合には以下のような記述になります。

    onclick イベント例

    1. <p onclick="$(this).inc('foo.php');">ここに foo.php の実行結果が表示されます。</p>

    上記例では読込みたいファイル名に PHP スクリプトを指定してます。
    PHP スクリプトを読込むことで、PHP スクリプトの実行結果が表示されます。

以上です。
お手軽だし、便利なので使ってみてください。

 Trackback Pings(1)

from かたつむりくんのWWW

通常のスタティックな Web サイトにおいて、Web ページの中で更新頻度の高いパーツを別ファイルにして、それをインクルードするシーンは多々あるかと思いま...

Tracked on November 10, 2008

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード