リンクをクリックすることで外部のデータを読み込みその場に表示する方法です。
デモ: クリックで↓にデータを読み込みます。
設定
↓を記述した xxxxx.js を作成します。ローディングイメージがいらないのであれば#loadingのところは削除してOK。
|
1 2 3 4 5 6 7 8 9 |
$(function() { $("#open01").click(function(){ $("#loading").show(); $("#data01").load('hello1.html .hoge001', function(){ $("#loading").fadeOut(); $("#data01").fadeIn(); }); }); }); |
↑hello1.html 内のクラス.hoge001を表示。 ※動作しない場合$をjQueryに変更。
↓を読み込ませます。
|
1 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
|
1 |
<script type="text/javascript" src="xxxxx.js"></script> |
発動させるスイッチと表示場所を挿入します。ローディングイメージがいらないのであれば#loadingは削除してOK。
|
1 2 3 |
<a href="javascript:void(0);" id="open01">クリック</a> <div id="loading"><img src="/images/loading.gif"></div> <div id="data01"></div> |
リンクをクリックすると <div id="data01">…</div> にhello1.html内のクラス .hoge001が表示されます。
ローディングの表示位置を調整します。スタイルシートに↓を追加。
|
1 2 3 4 5 6 7 8 |
#data01{display:none;} #loading{ display:none; position: absolute; padding-top: 20px; padding-left: 20px; } |
ローディングイメージ
いろんなプリローダー（アニメーションGIF）を簡単に作成することができます。
