ホーム > 領域 (全22件)
  • 要素を消したり表示したりする

    table要素を消したり表示したりする。

    /* すばやく消したり表示したりする */
$( 'table' ).toggle();

/* ゆっくり消したり表示したりする */
$( 'table' ).fadeToggle( 'slow' );

    toggle関数は、指定された要素の表示状態に応じてhide関数とshow関数を実行する。fadeToggle関数（ver1.4.4で追加）は、指定された要素の表示状態に応じてfadeOut関数とfadeIn関数を実行する。fadeToggle関数のパラメータはfadeOut関数およびfadeIn関数と同様で、duration（アニメーション時間：省略時400）、easing（動作パターン：省略時swing）、complete（完了時のコールバック関数）が指定できる。

    キーワード:
  • タブウィジェットのアクティブタブを指定・変更する

    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部分の構造を理解するのがポイント。

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

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

    /* 幅（省略時は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要素が含まれる。

    キーワード:
  • 要素のpadding分を調整して幅を設定する

    idがleft-sideの要素のpadding分を含んだ幅を100pxにする。

    $( '#left-side' ).outerWidth( 100 );

    idがleft-sideの要素がpadding:5pxの場合、$( '#left-side' ).attr( 'style', 'width:90px;' );と同じ効果になる。なお、左右のpadding値を含まない指定する場合は、width関数を使用する。

    キーワード:
  • 要素の幅（padding分を含む）を取得する

    idがpost-1の要素の幅（padding分を含む）を取得する。

    var width = $( '#post-1' ).outerWidth();

/* margin分を含んだ幅を取得する */
var width = $( '#post-1' ).outerWidth( true );

    取得できる幅はピクセル値で、左右のpadding分を含む（padding分を含まない幅はwidth関数を使用）。さらにパラメータとしてtrueを指定すると、左右のmargin分を含んだ幅を取得できる。

    キーワード:
  • 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関数を呼び出す。

    キーワード:
  • IMG要素をマウスオーオーバー時にハイライト表示する

    クラスがhilightのIMG要素のマウスオーバー時に透過率を変更する。

    $( 'img.hilight' ).hover(
	function () { $(this).fadeTo( 'fast', 0.75 ); },
	function () { $(this).fadeTo( 'fast', 1 ) } );

    hover関数の第1パラメータはマウスオーバー時の関数を、第2パラメータはマウスアウト時の関数を指定する。透過率を変えるfadeTo関数は、第1パラメータに変更速度を、第2パラメータに変更後の透過率を指定。透過率は0～1の範囲となり0で透明、1で不透明となる。

    キーワード:
  • 要素が非表示か調べる

    IDがcationの要素が非表示か調べる。

    if ( $( '#cation:hidden' ).length != 0 ) {
	// 非表示時の対応をここで
}

    基本的に:visible指定時と逆の効果になり、CSSのdisplay:noneか、INPUT要素などのtype属性値が”hidden”か、要素の幅または高さが0の場合にマッチする。この例ではIDで指定した要素が存在しない場合も0になるので、その点は注意すること。

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

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

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

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

    キーワード:
  • 要素を非表示にする

    IDがmessageの要素を非表示にする。

    /* すぐに非表示 */
$( '#message' ).hide();

/* じわっと非表示 */
$( '#message' ).fadeOut( 'slow' );

    hide関数かfadeOut関数を使う。fadeOut関数の第1パラメータには消えるまでの時間（’fast’、’normal’、’fast’、または消えるまでのミリ秒）を、第2パラメータには消えた時に呼び出される関数が指定できる。

    キーワード:
  • 要素が表示されているか調べる

    IDがcationの要素が表示されているか調べる。

    if ( $( '#cation:visible' ).length != 0 ) {
	// 表示されている場合の対応をここで
}

    この例ではIDで指定した要素が存在しない場合も0になるので、その点は注意すること。

    キーワード:
  • 要素の幅を設定する

    idがleft-sideの要素の幅を100pxにする。

    $( '#left-side' ).width( 100 );

    $( '#left-side' ).attr( 'style', 'width:100px;' );とほぼ同じ効果だが、width関数はほかのstyle属性の値を気にしなくていい。なお、左右のpadding値を含めた値を指定する場合は、outerWidth関数を使用する。

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