ホーム > jQuery UI (全25件)
  • タブウィジェットのアクティブタブを指定・変更する

    IDがpartsのタブウィジェットのアクティブなタブを設定する

    /* 初期化時に指定 */
$( '#parts' ).tabs( { active: 1 } );

/* 初期化後に変更 */
$( '#parts' ).tabs( "option", "active", 1 );

    タブの番号で指定する。最初のタブは0、その次は1といた感じで、1を指定すると表示上は2番目のタブがアクティブになる。

    キーワード:
  • タブウィジェットを使う

    IDがpartsの領域にタブウィジェットを設定する

    <!-- html部分 -->
<div id="parts">
<ul>
<li><a href="#part1">見出し1</a></li>
<li><a href="#part2">見出し2</a></li>
<li><a href="#part3">見出し3</a></li>
</ul>

<!-- 見出し1の内容 -->
<div id="part1">
</div>

<!-- 見出し2の内容 -->
<div id="part2">
</div>

<!-- 見出し3の内容 -->
<div id="part3">
</div>
</div>

/* JavaScript部分 */
$( '#parts' ).tabs();

    tabs関数を呼ぶだけでいい。HTML部分の構造を理解するのがポイント。

    キーワード:
  • 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クラスを表示しないスタイルを追加すること。

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

    初期化時にダイアログボックスのサイズを設定する。

    /* 幅（省略時は300）と高さ（省略時は'auto'）を指定 */
$( '#dialog1' ).dialog( { width: 500, height: 400 } );

/* 最小幅（省略時は150）と最少高さ（省略時は150）を指定 */
$( '#dialog1' ).dialog( { minWidth: 400, minHeight: 200 } );

/* 最大幅（省略時はfalse）と最大高さ（省略時はfalse）を指定 */
$( '#dialog1' ).dialog( { maxWidth: 800, maxHeight: 600 } );

/* リサイズ不可（省略時はtrue（リサイズ可））に設定 */
$( '#dialog1' ).dialog( { resizable: false } );

    jQuery UIのダイアログボックスで、サイズに関連するプロパティはこの7種類。幅および高さで指定する値はピクセル値（数値だけでよい）、resizableにはtrueまたはfalseを指定する。

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

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

    $( '.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イベントプロパティに関数を割り当てることで、任意の処理が行える。

    キーワード:
  • jQuery UIのSliderの値が変わった時（ドラッグ中：確定前）の処理を指定する

    スライダーの値が変わった時の処理を指定する。

    $( ".slider" ).slider( {
	slide:function(event, ui) {
		/* ui.valueに変更された値が格納されている */
		alert( ui.value );
	}
} );

    ドラッグ中は値は確定しておらず、ui.value の値と slider( ‘value’ ) で取得できる値とは異なる場合がある。

    キーワード:
  • jQuery UIのSliderの値が変わった時（確定後）の処理を指定する

    スライダーの値が変わった時の処理を指定する。

    $( ".slider" ).slider( {
	change:function(event, ui) {
		/* ui.valueに変更された値が格納されている */
		alert( ui.value );
	}
} );

    changeイベントは値が確定した後になるため、ui.value の値と slider( ‘value’ ) で取得できる値と一致する。

    キーワード:
  • jQuery UIのSliderの値を取得する

    IDが’slider1’の要素について、その値を取得し、変数valに格納する。

    var val = $( "#slider1" ).slider( 'value' );

    取得できる値は、確定された値である。ドラッグ中の値を使う場合は、slideイベントハンドラの第2パラメータuiのvalueプロパティを参照する。

    キーワード:
  • jQuery UIのSliderを使う

    sliderクラスの要素にjQuery UIのSliderを適用させる。

    $( ".slider" ).slider( {
	min: 0, /* default: 0 */
	max: 5, /* default: 100 */
	step: 1, /* defaut: 1 */
	value: 0, /* default: 0 */
	orientation: 'horizontal', /* default: 'horizontal' or 'vertical' */
	slide:function(event, ui) { },
	change:function(event, ui) { }
} );

<!-- html部分 -->
<div id="slider1" class="slider"></div>

    minやmaxなどのプロパティ値に変数を指定する場合は、必ずparseInt関数で整数化すること。少なくとも1.8.20/21では、minが0より大きな値を取る場合の挙動がおかしくなる。

    キーワード:
  • jQuery UIのdraggableのドラッグ終了時、元の位置に戻す

    IDがitemの要素にdraggableを適用し、ドラッグ終了時に移動範囲が±100ピクセル以内なら元の位置に戻す。

    $(document).ready( function () {
	$( '#item' ).draggable( {
		stop: function ( e, ui ) {
			if ( Math.abs( ui.position.top ) <= 100 &&
			     Math.abs( ui.position.left ) <= 100 ) {
				$(this).attr( 'style', 'position: relative;' );
			}
		}
	} );
} );

    attr関数で、style属性値に’position: relative;’をセットすると元の位置に戻る。

    キーワード:
  • jQuery UIのdraggableのドラッグ途中とドラッグ終了時の対応を行う

    IDがitemの要素にdraggableを適用し、ドラッグ中とドラッグ終了イベントの処理を行う。

    $(document).ready( function () {
	$( '#item' ).draggable( {
		drag: function ( e, ui ) {
			if ( ui.position.left > 0 ) {
				// 最初の位置よりも右側に移動した場合
			}
		},
		stop: function ( e, ui ) {
			if ( ui.position.top > 0 ) {
				// 最初の位置よりも下側に移動した場合
			}
		}
	} );
} );

    drapプロパティにはドラッグ中に発生するイベントの関数を、stopプロパティにはドラッグ終了時に発生するイベントの関数を指定する。イベント関数が受け取るui.position.topとleftには移動位置は最初の位置からの相対位置が格納されている。

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