2009年6月2日火曜日

jQuery::Up/Downキーでフォームを移動、パート2:フォーム要素一覧

では、jQueryのインストールから。手順は省略。 (1)キー入力イベント 調べると、キー入力イベントを簡単に扱えるjQueryプラグイン:hotkeysを発見。 簡単にUp/Downキーが押された場合の処理が書ける。 (2)HTMLが読み込まれたときにJavaScriptを走らせる。
$(document).ready( function() {}
これでHTMLが読み込まれたときにJavaScriptを走らせられる。 <body onload="javascript:...">と書く方法は知っていたが、色々と面倒だった。これなら、どこにでも、そしていくつでも書けるので便利。また変数のスコープが関数内に限られるため、さらに便利らしい。他にも書き方があるらしい。 (3)フォーム内の要素を一覧にする。
$( 'form' ).map( function() {
var ele = $.makeArray( this.elements );
return ele;
});
このページで見つけたコード。 自分なりに読み解いてみました。
  1. this.elements 最初はjQueryかと思いましたが、どうやらJavaScript標準の動きでした。フォーム内の要素を一覧で返します。ここの「this」はフォームを指定しています。
  2. $.makeArray 要素の一覧を配列に変換しています。また、「ele」はjQueryオブジェクトの配列として保存されます。
  3. $( "form" ).map フォームが複数存在する場合に対応するため、map関数で配列を集約している(?)みたい。
(4)以上をくっつけると、
<script language="javascript" type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" src="../scripts/jquery.hotkeys-0.7.8.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var jFormElem;  // フォーム内のエレメント一覧(jQueryオブジェクト)
var jFormLeng;  // エレメントの数

$(document).ready( function()
{
// フォーム要素の配列を生成。
jFormElem =
$( 'form' ).map( function() {
var ele = $.makeArray( this.elements );
return ele;
});
jFormLeng = jFormElem.length;
}
ふぅ~。 まだ続きます。

0 件のコメント: