jQuery UI逆引きリファレンス
jQuery UIで拡張されたエフェクト機能を利用するには？（effect／xxxxxClass編）
jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の中から、effectメソッドで利用できるtransferエフェクト、スタイル・クラスを着脱するxxxxxClassメソッドついて紹介。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
別稿「jQuery UI逆引きリファレンス： jQuery UIで拡張されたエフェクト機能を利用するには？」に引き続き、jQuery UIで拡張されたエフェクト機能について解説します。本稿で紹介するのは、effectメソッドで利用できるtransferエフェクト、そして、スタイル・クラスを着脱するxxxxxClassメソッドです。
要素間の移動を表現する ― effectメソッド（2）
前掲の別稿で紹介したeffectメソッドでは、やや特殊なエフェクトとして「transfer」を利用することもできます＊1。transferエフェクトは、2つの要素間で移動するような効果を提供します。例えば以下は、ボタン・クリックによって<div id="box">要素の中から<div id="dest">要素の中へテキストを移動する例です。
- ＊1hideメソッドでも動作しますが、ターゲット要素が非表示になるわけではないので、あえてhideメソッドを利用する意味はありません。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Effect</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<style type="text/css">
/* 2移動時に適用されるスタイル */
.ui-effects-transfer {
border: 1px solid #555;
}
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// ボタンクリックで、ボックス配下のテキストを移動
$('#run').click(function() {
// 1#dest要素への移動エフェクトを再生
$('#box').effect('transfer', { to: $('#dest') }, 2000, function() {
// 3エフェクト終了後、テキストを移動
$('#dest').html($(this).html());
$(this).html('');
});
});
});
</script>
</head>
<body>
<input id="run" type="button" value="Go" />
<div id="box" style="width: 130px;height: 130px;background-color: #f9f">いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん</div>
<div id="dest" style="width: 200px;height: 200px;background-color: #ff0"></div>
</body>
</html>
|
［Go］ボタンをクリック
transferエフェクトを利用する際のポイントは、以下のとおりです。
1toオプションは必須
transferオプションは、2つの要素間の移動を表現しますので、現在の要素ともう1つ、移動先の要素を宣言しておく必要があります。これがtoオプションの役割です。toオプションには、移動先の要素をjQueryオブジェクト（ここでは<div id="dest">要素）を指定します。
2ui-effects-transferスタイルを指定する
transferエフェクトでは、移動中を表す要素に対して、内部的に「ui-effects-transfer」という名前のスタイル・クラスを割り当てます。デフォルトでは、ui-effects-transferクラスには特別なスタイルは定義されていませんので、ページ開発者は自分でスタイルを定義しなければなりません。本稿のサンプルであれば、太さは1px、色は#555の枠線を適用しています。
3エフェクト完了時の処理を定義する
transferエフェクトは、それ自体、要素が移動するような見掛けを提供するだけで、要素を移動する操作は、自分で実装しなければなりません。この例では、effectメソッドのコールバック関数を利用して、移動元の要素から移動先の要素にテキストを転記しています。
スタイル・クラスの追加／削除時にアニメーションする ― xxxxxClassメソッド
jQueryでは、要素に対してスタイル・クラスを追加／削除するためのaddClass／removeClass／toggleClassメソッドがあります。jQuery UIではこれらのメソッドを拡張して、引数に「再生時間」を指定できるようになっています。再生時間を指定することで、スタイルを追加／削除する際に、指定されたプロパティ値まで徐々に変化するようになるわけです＊2。
- ＊2animateメソッドにも似ていますが、スタイルの指定を（ハッシュではなく）明確にスタイルシートとして分離できる、スタイルの着脱が容易などの利点があります。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Effect</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<style type="text/css">
div {
width: 130px;
height: 130px;
padding: 15px;
background-color: #fff;
}
.add {
width: 200px;
height: 200px;
padding: 30px;
background-color: #f9f;
}
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// ボタン・クリック時にスタイルの適用／適用解除
$('#run').click(function() {
// addクラスを2000ミリ秒かけて適用
$('#box').toggleClass('add', 2000);
});
});
</script>
</head>
<body>
<input id="run" type="button" value="Go" />
<div id="box">いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん</div>
</body>
</html>
|
［Go］ボタンをクリック
toggleClassメソッドの構文は、以下のとおりです。引数dur以降（太字部分）の値が、jQuery UIで拡張された引数です。
［構文］toggleClassメソッド
toggleClass(clazz [,dur] [,easing] [,callback])
- clazz： スタイル・クラス名
- dur： 再生時間（ミリ秒）
- easing： 変化の度合い＊3
- callback： アニメーション終了後に実行する関数
- ＊3変化の度合いで指定できる値については、Easingsに、変化をグラフ化したものも併せて掲載されていますので、参考にするとよいでしょう。
jQuery標準の機能でアニメーションの対象となるのは、height、width、marginのような数値を受け取るプロパティだけでしたが、jQuery UIではbackground-colorのような色についてもアニメーションの対象となる点に注目です。サポートされるプロパティの種類を、以下にまとめます。
- backgroundColor、borderBottomColor、borderLeftColor、borderRightColor、borderTopColor、color、columnRuleColor、outlineColor、textDecorationColor、textEmphasisColor
また、色の指定は、以下の方法で可能です。
- 16進数（#ff00ffなど）
- rgb／rgba関数
- 色名（white、redなど）
スタイル・クラスの入替をシンプルに表現する - switchClassメソッド
jQuery標準で備わっていたaddClass／removeClass／toggleClassメソッドに加えて、jQuery UIではswitchClassメソッドが用意されています。名前の印象からtoggleClassメソッドと混同しそうですが、toggleClassメソッドが特定のクラスのオンオフ（着脱）を交互に切り替えるのに対して、switchClassメソッドはあるクラスAと別のクラスBとを入れ替えるメソッドです。
［構文］switchClassメソッド
switchClass(removeClazz, addClazz [,dur] [,easing] [,callback])
- removeClazz： 削除するクラス
- addClazz： 追加するクラス
- dur： 再生時間（ミリ秒）
- easing： 変化の度合い
- callback： エフェクト終了時に実行するコールバック関数
例えば以下は、ボタン・クリックでスタイル・クラスone⇔twoを交互に入れ替える例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Effect</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<style type="text/css">
.one {
width: 130px;
height: 130px;
padding: 15px;
background-color: #fff;
}
.two {
width: 200px;
height: 200px;
margin: 30px;
background-color: #333;
color: #f8f;
}
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// スタイルの状態を管理するフラグ
var flag = true;
// ボタン・クリックごとに交互にone⇔twoスタイルを入替
$('#run').click(function() {
if (flag) {
$('#box').switchClass('one', 'two', 2000);
} else {
$('#box').switchClass('two', 'one', 2000);
}
flag = !flag;
});
});
</script>
</head>
<body>
<input id="run" type="button" value="Go" />
<div id="box" class="one">いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん</div>
</body>
</html>
|
［Go］ボタンをクリック
toggleClassメソッドと異なり、交互に入れ替えるという機能は持っていませんので、自分でフラグ（変数flag）の状態に応じて、switchClassメソッドを呼び出しています。
※以下では、本稿の前後を合わせて5回分（第14回～第18回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
15. jQuery UIの拡張されたエフェクトを利用するには？（show／hide／toggle／effect編）
jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の基本的な使い方について紹介。
16. 【現在、表示中】≫ jQuery UIで拡張されたエフェクト機能を利用するには？（effect／xxxxxClass編）
jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の中から、effectメソッドで利用できるtransferエフェクト、スタイル・クラスを着脱するxxxxxClassメソッドついて紹介。
17. AutoCompleteウィジェットでオートコンプリート機能付きのテキストボックスを生成するには？
テキストボックスに最初の何文字かを入力すると、それにマッチする候補リストを表示するオートコンプリート機能を実現できる、AutoCompleteウィジェットの基本的な実装方法を紹介。
18. AutoCompleteウィジェットの検索／表示方法をカスタマイズするには？
AutoCompleteウィジェットのイベントやメソッドを利用しながら、候補リストの検索／選択時の処理をカスタマイズする方法について説明。
