ホーム > フォーム (全15件)
  • エンターキーが押された時に何かする

    IDがaddrの入力ボックスでエンターキーが押された時に何かする

    $( '#addr' ).keypress( function ( e ) {
	if ( e.which == 13 ) {
		// ここに処理を記述
		return false;
	}
} );

    押されたキーはe.whichで確認でき、エンターキーは13となる。falseを返すことでイベントの引継ぎは中断される。

    キーワード:
  • autocompleteウィジェットのプルダウンを閉じる

    IDが’close’のAタグをクリックしたらautocompleteウィジェットのプルダウン（ULタグ）を閉じる（非表示にする）

    $( '#close' ).click( function () {
	$( '#name' ).autocomplete( 'close' );
} );

    表示しているプルダウンを閉じる場合は、autocomplete( 'close' )を使用する。

    キーワード:
  • autocompleteウィジェットのプルダウンを表示する

    IDが’pulldown’のAタをがクリックしたらautocompleteウィジェットのプルダウン（ULタグ）を表示する

    $( '#name' ).autocomplete( { minLength: 0 } );

$( '#pulldown' ).click( function () {
	$( '#name' ).autocomplete( 'search', '' );
} );

    直接的にプルダウンを表示する機能は（おそらく）なく、表示する場合はこのautocomplete( 'search', '' )を使用。第2パラメータにはキーワードとなる文字列を指定するが、初期化時にminLength: 0を指定することで”が有効になり、プルダウンを表示できる。

    キーワード:
  • autocompleteウィジェットのプルダウンが表示しているか調べる

    autocompleteウィジェットを指定したIDが’name’の要素について、プルダウン（UL要素）が表示しているか調べる

    if ( $( '#name' ).autocomplete( 'widget' ).is( ':visible' ) ) {
	/* 表示時の処理 */
} else {
	/* 非表示時の処理 */
}

    autocompleteウィジェット（UL要素）は、autocomplete( 'widget' )で取得でき、is( ':visible' )で表示しているかどうかを調べる。

    キーワード:
  • 「n results are available, use up and down arrow keys to navigate.」を非表示にする

    jQuery UI 1.9.xにアップデートしてautocompleteウィジェットの要素の後に表示される「n results are available, use up and down arrow keys to navigate.」を非表示にする。

    /* cssに次の指定を追加 */
.ui-helper-hidden-accessible {
	display: none;
}

    jQuery UIを1.9.xへアップデートしたautocompleteウィジェットではその候補数を出力するようになった（おそらく他のウェジェットも）。jQuery UIを独自のcssで表示している場合は、ui-helper-hidden-accessibleクラスを表示しないスタイルを追加すること。

    キーワード:
  • ダイアログボックスをクローズする

    ダイアログボックス表示している内容を非表示にする。

    $( '.ui-dialog-content' ).dialog( "close" );

    表示しているダイアログボックスをクルーズする場合は、全体のdiv要素であるui-dialogクラスではなく、表示した時と同じdiv要素となる。ここではui-dialog-contentクラスで検索しているが、IDでも構わない。

    キーワード:
  • ダイアログボックス（ポップアップ）を表示する

    idがdialog1のdiv要素をダイアログボックスのようにポップアップ表示する。

    $( '#dialog1' ).dialog( { modal: true } );

<!-- div要素 -->
<div id="dialog1" title="ここにタイトル" style="display: none;">
ここに内容
</div>

    表示するdiv要素は非表示状態で用意し、title属性にはダイアログボックスのタイトルバーのテキストを指定すること。表示しているダイアログボックスは、ui-dialogクラスのdiv要素で、その中にはタイトルバーを表示するui-dialog-titlebarクラスのdiv要素と、中身のui-dialog-contentクラスのdiv要素が含まれる。

    キーワード:
  • オートコンプリートのマッチ最少文字数を設定する

    idがfoodのinput要素にマッチ最少文字数0としてオートコンプリートを設定する。

    /* 初期化時に指定 */
var foods = [ 'apple', 'blueberry', 'cherry', 'melon', 'orange' ];
$( '#food' ).autocomplete( { minLength: 0, source: foods } );

/* 後で変更 */
$( '#food' ).autocomplete( 'option', 'minLength', 0 );

    マッチ最少文字数であるminLengthプロパティのデフォルト値は1。minLengthプロパティを0にすることで、コンボボックスのような機能を実現できる（↓キーでプルダウンリストを表示）。またminLengthプロパティ値を大きくすることで、プルダウンリストの表示を制限できる（特にコンプリート候補が多いケース等）。

    キーワード:
  • オートコンプリートを設定する

    idがfoodのinput要素にオートコンプリートを設定する。

    /* コンプリート候補に変数を指定 */
var foods = [ 'apple', 'blueberry', 'cherry', 'melon', 'orange' ];
$( '#food' ).autocomplete( { source: foods } );

/* コンプリート候補にURL（JSONデータ）を指定 */
$( '#food' ).autocomplete( { source: 'http://localhost/foods.json' } );

/* コンプリート候補にコールバック関数を指定 */
$( '#food' ).autocomplete( { source: function ( req, add ) {
	var candidacy = [];
	for ( key in foods ) {
		if ( foods[key].indexOf( req.term ) >= 0 )
			candidacy.push( foods[key] );
	}
	add( candidacy );
} } );

    初期化時、オートコンプリート候補の指定方法は配列、URL、コールバック関数の3種類になる。コールバック関数を指定した場合は、初期化時ではなく、表示する候補を更新するタイミング毎に呼び出される。なおui-menuクラスのスタイルにfloat: left;が指定されていない場合、候補リストの幅が入力ボックスよりも大きくなるので注意。
    IE7で動作しない場合はjQuery UI 1.9.1にアップデートを。

    キーワード:
  • jQuery UIのSliderの初期化直後に何かする

    スライダーの初期化直後にハンドルに値を設定する。

    $( ".slider" ).slider( {
	create:function(event, ui) {
		/* ui.valueに変更された値が格納されている */
		$(this).children( 'a' ).html( ui.value );
	}
} );

    初期化時、スライダーのハンドルはdivタグ内に中身のないaタグとして生成される。初期化直後に呼び出されるcreateイベントプロパティに関数を割り当てることで、任意の処理が行える。

    キーワード:
  • チェックボックスをオン／オフする

    IDがagreeのチェックボックス要素をオン／オフにする。

    /* 1.9以降: オンにする */
$( '#agree' ).prop( 'checked', true );

/* 1.9以降: オフにする */
$( '#agree' ).prop( 'checked', false );

/* 1.9以前（1.8.3など）であれば以下も使用できるが、prop関数が導入された1.6以降であれば上記の方が無難 */
/* オンにする */
$( '#agree' ).attr( 'checked', 'checked' );

/* オフにする */
$( '#agree' ).removeAttr( 'checked' );

    jQuery 1.9前後でattr関数およびremoveAttr関数の振舞が異なる。ラジオボタンも基本的には同じだが、隣接するラジオボタンを考慮する必要がある。

    キーワード:
  • HTMLエンティティを適切な文字に変換する

    変数textの内容を（phpのhtml_entity_decode関数のように）HTMLエンティティを適切な文字に変換する。

    var decode_text = $( '<textarea />' ).html( text ).text();

    &、などのHTMLエンティティを、&、などの文字に変換することができる。この例ではtextarea要素を使っているが、div要素など他の要素でも問題はない。

    キーワード:
  • プルダウンメニュー（select要素）の選択された値を取得する

    idがperfの選択された値を取得する。

    /* single selection */
var perf = $( 'select#perf option:selected' ).val();

/* multiple selection */
var perf = new Array();
$( 'select#perf option:selected' ).each( function () {
	perf.push( $(this).val() );
} );

    複数選択の場合は、$( 'select#perf option:selected' ).lengthで選択数を取得できる。

    キーワード:
  • テキストボックス／テキストエリアの入力内容を取得する

    idがaddrの入力内容を取得する。

    var text = $( '#addr' ).val();

    val関数により、テキストボックス（input要素）のvalue属性値だけでなく、テキストエリア（textarea要素）の入力内容も取得できる。

    キーワード:
  • チェックボックス(ラジオボタン)がチェックされているか調べる

    idがcheckbox1のチェックボックス(ラジオボタン)がチェックされているか調べる。

    /* 1.9以降の場合: prop関数を使用 */
if ( $( '#checkbox1' ).prop( 'checked' ) ) {
	/* チェックされている場合の処理を記述 */
}
/* 1.9以降の場合: is関数を使用 */
if ( $( '#checkbox1' ).is( ':checked' ) ) {
	/* チェックされている場合の処理を記述 */
}

/* 1.9以前（1.8.3など）の場合 */
if ( $( '#checkbox1:checked' ).length > 0 ) {
	/* チェックされている場合の処理を記述 */
}

/* idがcheckbox1がクリックされた時に何かする場合 */
$( '#checkbox1' ).click( function () {
	if ( typeof $(this).attr( 'checked' ) == 'undefined' ) {
		/* チェックされていない */
	} else {
		/* チェックされている */
	}
} );

    jQueryのバージョンが1.9前後でattr関数の振舞が異なる。1.9以前ならattr関数でchecked属性（その値の有無）を調べられるが、1.9以降であればprop関数かis関数を使わないといけない。

    キーワード:
 
 
ツールバーへスキップ