2009年6月2日火曜日

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

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

コメントを投稿

登録: コメントの投稿 (Atom)