ホーム > change (全5件)
  • レンジ入力（input[type=range]）の変更時の値をリアルタイムに取得する

    レンジ入力（input[type=range]）の変更時の値をリアルタイムに取得する。

    /* 変更中（ドラッグ中） */
$( 'input[type=range]' ).on( 'input', function () {
	var val = $(this).val();
} );

/* 変更後 */
$( 'input[type=range]' ).change( function () {
	var val = $(this).val();
} );

    HTML5のレンジ入力（input[type=range]）要素に関連するイベントは、変更後（ドラッグ後）はchangeイベントになるが、ドラッグ中はinputイベントになる。inputイベントは、汎用的なイベント関数であるon関数を利用すること。

    キーワード:
  • イベントハンドラを設定する

    IDが’drop_here’の要素にdragenter、dragleave、dropイベントのハンドラを設定する。

    $( '#drop_here' ).bind( 'dragenter', function ( event ) {
	/* ここにdragenter（ドラッグ状態でカーソルが要素内に入った）時の処理を記述 */

} ).bind( 'dragleave', function ( event ) {
	/* ここにdragleave（ドラッグ状態でカーソルが要素の外へ出た）時の処理を記述 */

} ).bind( 'drop', function ( event ) {
	/* ここにdrop時の処理を記述 */

} );

    jQueryは、clickやchange関数のようにHTML標準のイベントハンドラ用の関数を用意しているが、用意されていない関数はbind関数で設定でき、連結して記述できる。

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

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

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

    changeイベントは値が確定した後になるため、ui.value の値と slider( ‘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より大きな値を取る場合の挙動がおかしくなる。

    キーワード:
  • onChangeイベントを処理する

    IDがperfのSELECT要素のonChangeイベントを処理する。

    $( '#perf' ).change( function () {
	// ここに処理内容を記述
} );

    選択されたOPTION要素（の値）、処理中に $(this).children(':selected').val() を記述する。

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