この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


ワードプレスでオリジナルプラグインを作ってみよう その7 JQuery UIをひととおり使ってみる

前回は「JQuery」「JQuery UI」を使ってテーマを使う準備をしました。今回はJQuery UIのテーマを使う方法です。
JQuery UIのテーマを使うにはある決まりがあります。その決まりの通りに設定すればテーマが適用されます。
まず「JQuery」「JQuery UI」が読み込まれていることが必須です。パスが通っていなかったり、ファイルがアップロードされていない場合は当然動きません。もし設定通りやっても動かなければここを疑ってみてください。

次に前回「CSS SCOPE」を決めてテーマをダウンロードしたと思いますが、親クラスが「my_mail_notice」になっていないとテーマが適用されません。ここも注意点です。

本講座作成した「My Mail notice」はシンプルなプラグインなので必要なUIパーツは、テキストフィールド(ボックス)とボタンの2つだけですが、せっかくなのでひと通り使い方を説明します。

まずよく使うボタンですが以下のようにして使います。

<h1>jQuery UI ボタンの使い方</h1>

<div class="my_mail_notice">
	<h2 class="demoHeaders">ボタン(テーマ適用)</h2>
	<button id="button">ボタン</button>

	<h2 class="demoHeaders">ボタン(テーマ非適用)</h2>
	<button id="button2">ボタン</button>
</div>


<script>

	jQuery( document ).ready( function( $ )
	{
		$( "body" ).addClass( "my_mail_notice" );
		$( "#button" ).button();
	});

</script>

▼ボタンのサンプル

解説すると、まず適用したい要素にIDまたはクラス名を付けます。IDを「button」にしたければ以下のようにします。

<button id="button">ボタン</button>

これだけでは適用されないので、JQuery UIのメソッド「.button()」を実行します。

<script>

	jQuery( document ).ready( function( $ )
	{
		$( "body" ).addClass( "my_mail_notice" );
		$( "#button" ).button();
	});

</script>

ここで注意したいのは「$」の扱いです。ワードプレスではJQuery定番の「$( “#button” )」という書き方をすると動きません。ワードプレスのJQueryは特殊で他のライブラリとかち合わないように「$記号」を使った記述ができないようになっています。知らないとハマります。

じゃあどうすればいいかというと「$」の代わりに本来の「jQuery」に変更すればOKです。

[note]× $( “#button” ).button();
○ jQuery( “#button” ).button();[/note]

ただしこれだとせっかく「$記号」ですっきり省略して書けるJQueryの良さがないので、定番の書き方があります。

jQuery( document ).ready( function( $ )
{
	$( "#button" ).button();
});

これで「$記号」が使えます。因みに以下の文は何かというと、スクリプトの読み込み待ち処理をしています。

jQuery( document ).ready( function( $ )
{
	//処理を書く
});

スクリプトもHTMLも基本的には上から読み込まれた順に実行されていきます。
上から順なので順番が狂うと使いたい時に使えないトラブルが発生します。
例えば、画像ファイルはHTMLよりも容量が大きいので、先にHTML部分が読み込まれて遅れて画像が読み込まれることが多々あります。画像はエラーを起こさないのでいいのですが、スクリプトファイルの場合はエラーとなります。

プログラムなど動的な処理の場合は、全て必要なものが読み込まれてから実行しないとエラーになる可能性が高いため、スクリプトの読み込みを待つ必要があります。それが上記の文です。

この時、ついでに「$記号」は「jQuery」と同じ意味だからね、という宣言をしているので、この文の「{}」内だけでは「$( “#button” )」といった書き方ができるのです。

話は戻って「.button()」ですが、これはJQuery UIのメソッドです。
以下のようにして使います。

$( "IDまたはクラス名" ).button();

もうお分かりだと思いますが、JQuery UIはこの法則性でテーマが適用できます。

もうひとつ「$( “body” ).addClass( “my_mail_notice” );」という記述ですが、「JQuery UI」をワードプレスで使う時は「<body>タグ」にクラス名「my_mail_notice」を追加しておきます。
そうしないと一部CSSが適用されないことがあります。ハマりやすいので覚えておいて下さい。

次にテキストフィールドですが、これはテーマがない? です。その代わりオートコンプリートという機能があります。これは入力時に候補一覧を表示する機能です。IMEや検索ボックスでよく見られますよね。
ただし候補は自分で登録します。AJAXで候補を読み込むと実用的です。

例えば「a」と入力すると登録した「Apple」という単語が表示されます。
例えば「こ」と入力すると登録した「こんにちは」という単語が表示されます。

テキストフィールド(オートコンプリート)は以下のようにして使います。

<h1>jQuery UI テキストフィールド(オートコンプリート)の使い方</h1>

<div class="my_mail_notice">
	<h2 class="demoHeaders">テキストフィールド オートコンプリート(テーマ適用)</h2>
	<input id="autocomplete">

	<h2 class="demoHeaders">テキストフィールド オートコンプリート(テーマ非適用)</h2>
	<input id="autocomplete2">
</div>


<script>

	jQuery( document ).ready( function( $ )
	{

		$( "body" ).addClass( "my_mail_notice" );

		var availableTags = [
			"Apple",
			"Box",
			"Cookie",
			"こんにちは",
			"さようなら",
			"またきてね",
			"(^v^)"
		];

		$( "#autocomplete" ).autocomplete({
			source: availableTags
		});

	});

</script>

▼テキストフィールドのサンプル

候補は配列で指定しています。「source: 配列名」で候補を指定します。簡単ですね。

次はラジオボタンです。ラジオボタンは選択肢をひとつだけ選択する時に使います。
ラジオボタンは以下のようにして使います。

<h1>jQuery UI ラジオボタンの使い方</h1>

<div class="my_mail_notice">
	<h2 class="demoHeaders">ラジオボタン(テーマ適用)</h2>
	<form style="margin-top: 1em;">
		<div id="radioset">
			<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
			<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
			<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
		</div>
	</form>

	<h2 class="demoHeaders">ラジオボタン(テーマ非適用)</h2>
	<form style="margin-top: 1em;">
		<div id="radioset2">
			<input type="radio" id="radio1" name="radio">Choice 1
			<input type="radio" id="radio2" name="radio" checked="checked">Choice 2
			<input type="radio" id="radio3" name="radio">Choice 3
		</div>
	</form>
</div>


<script>

	jQuery( document ).ready( function( $ )
	{
		$( "body" ).addClass( "my_mail_notice" );
		$( "#radioset" ).buttonset();
	});

</script>

▼ラジオボタンのサンプル

次にセレクトメニュー(プルダウンメニュー)の使い方です。
セレクトメニューは以下のようにして使います。

<h1>jQuery UI セレクトメニューの使い方</h1>

<div class="my_mail_notice">

	<h2 class="demoHeaders">セレクトメニュー(テーマ適用)</h2>
	<select id="selectmenu">
		<option>Slower</option>
		<option>Slow</option>
		<option selected="selected">Medium</option>
		<option>Fast</option>
		<option>Faster</option>
	</select>

	<h2 class="demoHeaders">セレクトメニュー(テーマ非適用)</h2>
	<select id="selectmenu2">
		<option>Slower</option>
		<option>Slow</option>
		<option selected="selected">Medium</option>
		<option>Fast</option>
		<option>Faster</option>
	</select>

</div>


<script>

	jQuery( document ).ready( function( $ )
	{
		$( "body" ).addClass( "my_mail_notice" );
		$( "#selectmenu" ).selectmenu();
	});

</script>

▼セレクトメニューのサンプル

セレクトメニューはシンプルですね。

次にメニューの使い方です。メニューはナビゲーションバーなどでよく見かけますね。
「JQuery UI」では「<ul>」タグを利用してなんとサブメニューも作れます。
メニューは以下のようにして使います。

<h1>jQuery UI メニューの使い方</h1>

<div class="my_mail_notice">

	<h2 class="demoHeaders">メニュー(テーマ適用)</h2>
	<ul style="width:100px;" id="menu">
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3
			<ul>
				<li>Item 3-1
					<ul>
						<li>Item 3-1-1</li>
						<li>Item 3-1-2</li>
						<li>Item 3-1-3</li>
						<li>Item 3-1-4</li>
						<li>Item 3-1-5</li>
					</ul>
				</li>
				<li>Item 3-2</li>
				<li>Item 3-3</li>
				<li>Item 3-4</li>
				<li>Item 3-5</li>
			</ul>
		</li>
		<li>Item 4</li>
		<li>Item 5</li>
	</ul>

	<h2 class="demoHeaders">メニュー(テーマ非適用)</h2>
	<ul style="width:100px;" id="menu2">
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3
			<ul>
				<li>Item 3-1
					<ul>
						<li>Item 3-1-1</li>
						<li>Item 3-1-2</li>
						<li>Item 3-1-3</li>
						<li>Item 3-1-4</li>
						<li>Item 3-1-5</li>
					</ul>
				</li>
				<li>Item 3-2</li>
				<li>Item 3-3</li>
				<li>Item 3-4</li>
				<li>Item 3-5</li>
			</ul>
		</li>
		<li>Item 4</li>
		<li>Item 5</li>
	</ul>

</div>


<script>

	jQuery( document ).ready( function( $ )
	{
		$( "body" ).addClass( "my_mail_notice" );
		$( "#menu" ).menu();
	});

</script>

▼メニューのサンプル

次にスピナーボックスの使い方です。スピナーボックスは▲と▼ボタンをクリックすることで数値を1ずつ増減できます。これは「JQuery UI」オリジナルです。
スピナーボックスは以下のようにして使います。

<h1>jQuery UI スピナーボックスの使い方</h1>

<div class="my_mail_notice">
	<h2 class="demoHeaders">スピナーボックス(テーマ適用)</h2>
	<input id="spinner">

	<h2 class="demoHeaders">スピナーボックス(テーマ非適用)</h2>
	<input id="spinner">

</div>


<script>

	jQuery( document ).ready( function( $ )
	{
		$( "body" ).addClass( "my_mail_notice" );
		$( "#spinner" ).spinner();
	});

</script>

▼スピナーボックスのサンプル

これも簡単ですね。

次にタブメニューの使い方です。タブは限られた画面領域を切り替えることができるのでスペースを有効活用できます。縦に長いページを要素ごとにタブで分けると使いやすくなります。
タブメニューは以下のようにして使います。

<h1>jQuery UI タブメニューの使い方</h1>

<div class="my_mail_notice">

	<h2 class="demoHeaders">タブメニュー(テーマ適用)</h2>
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">最初に</a></li>
			<li><a href="#tabs-2">次に</a></li>
			<li><a href="#tabs-3">最後に</a></li>
		</ul>
		<div id="tabs-1">最初に言いたいことはこんにちはです。</div>
		<div id="tabs-2">次に言いたいことはさよならです。</div>
		<div id="tabs-3">最後に言いたいことはまたきてねです。</div>
	</div>

	<h2 class="demoHeaders">タブメニュー(テーマ非適用)</h2>
	<div id="tabs2">
		<ul>
			<li><a href="#tabs-1">最初に</a></li>
			<li><a href="#tabs-2">次に</a></li>
			<li><a href="#tabs-3">最後に</a></li>
		</ul>
		<div id="tabs-1">最初に言いたいことはこんにちはです。</div>
		<div id="tabs-2">次に言いたいことはさよならです。</div>
		<div id="tabs-3">最後に言いたいことはまたきてねです。</div>
	</div>

</div>


<script>

	jQuery( document ).ready( function( $ )
	{
		$( "body" ).addClass( "my_mail_notice" );
		$( "#tabs" ).tabs();
	});

</script>

▼タブメニューのサンプル

タブメニューは「<div>」「<ul>」「<li>」タグを組合せて実現していますね。

次にアコーディオンメニューの使い方です。

アコーディオンメニューはタブが横に展開するのに対して縦に展開します。
アコーディオンメニューは以下のようにして使います。

<h1>jQuery UI アコーディオンメニューの使い方</h1>

<div class="my_mail_notice">

	<h2 class="demoHeaders">アコーディオンメニュー(テーマ適用)</h2>
	<div id="accordion">
		<h3>最初に</h3>
		<div>最初に言いたいことはこんにちはです。</div>
		<h3>次に</h3>
		<div>次に言いたいことはこんにちはです。</div>
		<h3>最後に</h3>
		<div>最後に言いたいことはまたきてねです。</div>
	</div>

	<h2 class="demoHeaders">アコーディオンメニュー(テーマ非適用)</h2>
	<div id="accordion2">
		<h3>最初に</h3>
		<div>最初に言いたいことはこんにちはです。</div>
		<h3>次に</h3>
		<div>次に言いたいことはこんにちはです。</div>
		<h3>最後に</h3>
		<div>最後に言いたいことはまたきてねです。</div>
	</div>

</div>


<script>

	jQuery( document ).ready( function( $ )
	{
		$( "body" ).addClass( "my_mail_notice" );
		$( "#accordion" ).accordion();
	});

</script>

▼アコーディオンメニューのサンプル

アコーディオンメニューは「<div>」と「<h3>」タグを組合せて実現していますね。

これで入力と選択系は大体説明しました。
次はプログラムと連動させる前提で使う特殊なUIです。

アイコンをスライドさせて使うスライダーの使い方です。

スライダーは以下のようにして使います。

<h1>jQuery UI スライダーの使い方</h1>

<div class="my_mail_notice">

	<h2 class="demoHeaders">スライダー(テーマ適用)</h2>
	<div id="slider"></div>
	<br />
	<input id="num" type="text" size="3" readonly />(スライド値)

	<h2 class="demoHeaders">スライダー(テーマ非適用)</h2>
	<div id="slider2"></div>

</div>


<script>

	jQuery( document ).ready( function( $ )
	{
		$( "body" ).addClass( "my_mail_notice" );

		$('#slider').slider({

			min: 0,		//最小値
			max: 100,	//最大値
			step: 2,	//スライド間隔
			value: 10,	//初期値

			//スライダー時にテキストボックスに現在の値を表示
			change: function( e , ui )
			{
				$( "#num" ).val( ui.value );
				alert( ui.value + " です。" );
			},

			//初期のスライダーの値をテキストボックスに表示
			create: function( e , ui )
			{
				$( "#num" ).val( $(this).slider( 'option' , 'value' ) );
			}

		});
	});

</script>

▼スライダーのサンプル

基本的にプログラムと連動するので、「change」メソッドにスライダー変更後の処理を書きます。

次にダイアログウインドウの使い方です。
ダイアログウインドウは「alert( ‘Hello’ );」でお馴染みですが、これだとOSやブラウザによってウインドウのデザインが変わってしまいます。統一したデザインにしたい場合は「JQuery UI」オリジナルのダイアログウインドウを使うと便利です。

ダイアログウインドウは以下のようにして使います。

<h1>jQuery UI ダイアログウインドウの使い方</h1>

<div class="my_mail_notice">

	<h2 class="demoHeaders">ダイアログウインドウ</h2>

	<p>
		<a href="#" id="dialog-link" class="ui-state-default ui-corner-all">
			<span class="ui-icon ui-icon-newwin"></span>
			ダイアログを開く(手動)</a>
	</p>

	<!-- ダイアログの中身は別に記述する -->
	<div id="dialog" title="あなたに確認です">
		<p>ここにメッセージを入力しておきます。理解できたら [ はい ] 理解できない場合は [ いいえ ] ボタンをクリックして下さい。</p>
	</div>

</div>


<script>

	jQuery( document ).ready( function( $ )
	{
		$( "body" ).addClass( "my_mail_notice" );

		$( "#dialog" ).dialog(
		{
			autoOpen: false,	//trueにすると自動的に開く
			width: 400,			//ウインドウ幅

			buttons: 
			[ {

				text: "はい",	//一つ目のボタンラベル

				click: function()
				{
					$( this ).dialog( "close" );
					//はいの処理を書く
				}

			},
			{
				text: "いいえ",	//二つ目のボタンラベル

				click: function()
				{
					$( this ).dialog( "close" );
					//いいえの処理を書く
				}

			},
			{
				text: "その他",	//三つ目のボタンラベル

				click: function()
				{
					$( this ).dialog( "close" );
					//その他の処理を書く
					//どこかに飛ばす
					window.location.href = 'http://yahoo.co.jp/';
				}

			}

			]
		});

		//手動でダイアログを開く場合に記述
		$( "#dialog-link" ).click(function( event )
		{
			$( "#dialog" ).dialog( "open" );
			event.preventDefault();
		});

	});

</script>

▼ダイアログウインドウのサンプル

「JQuery UI」オリジナルのダイアログウインドウはボタンの数が増やせるのがいいですね。
何個も組合せてアンケートにも使えそうです。

次にオーバーレイテキストの使い方です。これはUIウィジェットではなくスタイルシートを使って実現しています。
オーバーレイテキストの使い方は以下のようにして使います。

<h1>jQuery UI オーバーレイテキストの使い方</h1>

<h2 class="demoHeaders">オーバーレイ(シャドウ)テキスト<em>(これは UI ウイジェットではありません)</em></h2>

<div style="position: relative; width: 96%; height: auto; padding:1% 2%; overflow:hidden;" class="fakewindowcontain">

<!-- 下になるテキストここから -->
<p>4日午前、台風8号が発生しました。今後、北上して、来週には日本列島にかなり接近する恐れが出てきています。今年、列島に近づく台風としては、一番の強さです。</p>

<h3>列島直撃の恐れ</h3>

<p>最新の予測では、台風8号は北上を続け、8日(火)頃には沖縄付近へ。その後、9日(水)~10日(木)頃には、九州~本州付近まで北上する見通しです。</p>
<p>九州~本州のどこに北上するかは、まだ予測データごとにばらつきがあって、しぼり込めませんが、「北上・接近」については一致。上陸も否定はできません。</p>

<h3>発達した状態で北上</h3>

<p>発達する台風ほど、予測のブレは少ない傾向があります。</p>

<p>小さくてはっきりしない台風は、周りの風などに簡単に流され、予測が定まりづらい一方、構造がしっかりとした発達する台風は簡単にはふらふらしない、というイメージです。</p>

<p>つまり、予測が比較的はっきりしている今回の台風は、発達した状態で列島の近くまで北上してくる恐れがあります。</p>
<!-- 下になるテキストここまで -->


<div class="ui-overlay">
	<div class="ui-widget-overlay"></div>
	<div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div>
</div>

<div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
	<div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">

		<!-- 上になるテキストここから -->
		<h3>7月はもう台風シーズン</h3>

		<p>台風シーズンのピークはまだ先ですが、7月でも1年に2個くらいの割合で日本に台風が接近し、2年に1個くらいの割合で上陸しています。2002年のように、7月に2個の台風が上陸したこともあります。</p>

		<p>7月はもう台風シーズンに入ったという認識が必要でしょう。</p>
		<!-- 上になるテキストここまで -->

	</div>
</div>


<script>

	jQuery( document ).ready( function( $ )
	{
		$( "body" ).addClass( "my_mail_notice" );
	});

</script>

▼オーバーレイテキストのサンプル

プログラムって感じではないのでコピペして使います。

次にデートピッカー(カレンダー選択)の使い方です。
デートピッカーはカレンダーから日付を選択することができます。カレンダーを作ってくれる上に、日付も選択できます。予約サイトなどでよくみますね。

デートピッカーは以下のようにして使います。

<h1>jQuery UI デートピッカーの使い方</h1>

<div class="my_mail_notice">

	<h2 class="demoHeaders">デートピッカー(テーマ適用)</h2>
	<div id="datepicker"></div>

	<form method="POST" action="">
		<input type="text" id="date" size="15" />
	</form>

	<h2 class="demoHeaders">デートピッカー(テーマ非適用)</h2>
	<div id="datepicker"></div>

	<form method="POST" action="">
		<input type="text" id="date2" size="15" />
	</form>

</div>


<script>

	jQuery( document ).ready( function( $ )
	{
		$( "body" ).addClass( "my_mail_notice" );

		$( "#date" ).datepicker({
			dateFormat: 'yyyy/mm/dd',
		});
	});

</script>

▼デートピッカーのサンプル

テキストフィールドをクリックするとカレンダーが表示されて、日付を選択するとテキストフィールドに日付が入力されます。便利ですね。

次にプログレスバーの使い方です。プログレスバーはダウンロード待ちの時に表示される進捗を知らせるものです。
プログレスバーはプログラムと連動させて使うことになります。

プログレスバーは以下のようにして使います。

関連記事