• TOP
  • WordPress
    • まとめ
    • JavaScript
    • 記事
    • 画像/動画
    • 管理
    • アクセス/SEO対策
    • カテゴリ
    • サイドバー/ヘッダー
    • アイキャッチ
    • パスワード
    • コメント
  • プラグイン
  • CSS
  • ユーザー限定
Plus WordPress ワードプレスの基本・応用テクニックを紹介
ホーム › JavaScript › クリックで外部データを表示

クリックで外部データを表示

リンクをクリックすることで外部のデータを読み込みその場に表示する方法です。

デモ: クリックで↓にデータを読み込みます。

 

設定

↓を記述した 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)を簡単に作成することができます。

https://preloaders.net/

preloaders

タグ: 外部データ
カテゴリー: JavaScript

コメントを残す コメントをキャンセル

関連記事
Webページ全体をフェードイン、フェードアウト
管理画面の投稿一覧で記事内の文字数を表示
投稿ページ、固定ページのテンプレートを作る
非表示、置換テクニック
特定のカテゴリや投稿だけに、個別の表示
記事データの一括検索、一括置換
人気記事
高機能でオシャレな実用的メニュー(HTMLテンプレート)
Webページ全体をフェードイン、フェードアウト
投稿、固定ページ内にウィジェットを挿入
記事の続きを読むを消す
コメントに画像を挿入できるようにする
最新記事を自動でスライドショー
指定したカテゴリIDのカテゴリ名のみ取得
フリーの高機能HTMLテンプレート
記事ごとに個別のCSSやJavaScriptを追加
特定のカテゴリに個別のCSSを適応させる
カテゴリ別に違うカテゴリ(テンプレート)を表示
phpMyAdminのユーザー名とパスワードの確認方法
Contact Form7の送信完了画面をカスタマイズ
画像や動画をポップアップし再生
タイトルや本文からタグを自動生成
非表示、置換テクニック
カテゴリー別に違うサイドバーを出す
CSSやJavaScriptのハンドル名(id)を確認
CSS3のみで画面外からメニューをスライド表示
管理画面の投稿一覧で投稿IDを表示する
アイキャッチ(サムネイル)を呼び出す
スライドショー Meteor Slides
ページごとに違うヘッダーを読み込む
カテゴリに別々のアイコンを表示
背景をスライドショーにする
CSS3 角を丸くする
レスポンシブなLightbox jQuery プラグイン Strip
コメントのメールアドレス入力覧を消す
記事をランダムに表示させる
スライドショー Skitter Slideshow
パスワードを間違えると一定時間ログインできないようにする
購読者にパスワードを変更させない
管理画面の投稿一覧へアイキャッチを表示
個別にJavaScriptを振り分ける
Contact Form7に画像認証機能を追加
ショートコードを追加するプラグイン
リンクの表示順を並べ替える
JavaScriptで画面外からメニューをスライド表示
サイト全体のサムネイルサイズを変更
指定した日付や時間を基準に振り分け
    メルマガ購読
  • メールマガジンではWordPressのおもしろい使い方を紹介しています。またユーザー限定ページとも連動しているので、そちらも自由に観覧できるようになります。
  • 登録フォーム
PlusWordPress
  • お問い合わせ
  • このサイトについて
Link
  • 人気ブログランキング
  • 使えるWordPressテーマ
背景変更
  • デフォルト
  • ホワイト
  • ブラック
  • グレー
  • Facebook
  • RSS Feed
  • Google Plus
© 2023 Plus WordPress