ホーム > ready (全7件)
  • 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には移動位置は最初の位置からの相対位置が格納されている。

    キーワード:
  • jQuery UIのdraggableを適用する要素の移動方向を水平方向に限定する

    IDがitemの要素にdraggableを適用し、水平方向にのみドラッグできるようにする。

    $(document).ready( function () {
	$( '#item' ).draggable( { axis: 'x' } );
} );

    axisプロパティはデフォルトでfalseになっており、初期化時に’x’を指定すると水平方向のみに移動可能になる。ちなみに’y’を指定すると垂直方向のみが移動可能になる。

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

    IDがitemの要素にdraggableを適用し、ドラッグできるようにする。

    $(document).ready( function () {
	$( '#item' ).draggable();
} );

    jQueryのほか、jQuery UI Core、jQuery UI Widget、UI Mouseが必要で、初期化時に適用したい任意の要素に対してdraggable関数を呼び出す。

    キーワード:
  • jQuery UIのアコーディオンを使う

    IDがlistの要素にアコーディオンを適用する。

    $(document).ready( function () {
	$( '#list' ).accordion();
}

<!-- html部分 -->
<div id="list">
<h3><a href="#">見出し1</a></h3>
<div>ここに見出し1の中身</div>
<h3><a href="#">見出し2</a></h3>
<div>ここに見出し2の中身</div>
</div>

    jQueryのほか、jQuery UI、jQuery UI Widgetが必要で、初期化時に適用したい要素に対してaccordion関数を呼び出す。アコーディオンの中身はh3要素とdiv要素がペアで、必要な数だけ繰り返す。

    キーワード:
  • ブラウザのサイズ変更（リサイズ）で何かする

    ブラウザのサイズが変更された際、変更後のサイズに合わせて位置や領域を調整する。

    $(document).ready( function () {
	$(window).resize( function () {
		// ここに処理内容を記述
	} );
}

    onResizeイベントはresize関数に処理内容を記述すればいい。

    キーワード:
  • jQueryで初期処理を行う

    jQueryでさまざまな初期処理を行う場合はready関数を使う。

    $(document).ready( function() {
	/* ここにスクリプトを記述する */
} );

    HTMLドキュメント（DOM）が読み込まれ、操作可能になったタイミングで実行される（window.onloadイベント前）。

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