ホーム > jQuery UI (全25件)
  • 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要素がペアで、必要な数だけ繰り返す。

    キーワード:
  • datepickerの選択可能範囲を指定する

    IDがstartdateの要素にdatepickerを割り当て、選択可能範囲を指定する。

    $( '#startdate' ).datepicker( {
	minDate: new Date(),
	maxDate: new Date( 2012, 2, 29 )
} );

    minDateプロパティが選択可能な開始日、maxDateプロパティが選択可能な最終日となる。初期値はどちらもnullで範囲制限されておらず、必要に応じてDateオブジェクトを指定する。上記の例は、開始日をアクセスした日からとし、最終日を2012年2月29日までとしている

    キーワード:
  • datepickerのタイトル年、月をプルダウンにする

    IDがstartdateの要素にdatepickerを割り当て、タイトル部分の年、月をプルダウンにする。

    $( '#startdate' ).datepicker( {
	changeYear: true,
	changeMonth: true,
} );

    changeYearおよびchangeMonthプロパティのデフォルト値はfalseなので、初期化時にtrueを指定する（どちらか一方も可）。これにより、年、月のプルダウンになり表示年月の切り替えできる。

    キーワード:
  • datepickerのタイトル年に’年’を付ける

    IDがstartdateの要素にdatepickerを割り当て、タイトル部分の年に’年’を付ける。

    $( '#startdate' ).datepicker( {
	yearSuffix: '年'
} );

    yearSuffixプロパティのデフォルト値は”なので、’年’を指定する。

    キーワード:
  • datepickerのタイトル月、年の並びを変える

    IDがstartdateの要素にdatepickerを割り当て、タイトル部分の月、年の並びを逆にする。

    $( '#startdate' ).datepicker( {
	showMonthAfterYear: true
} );

    showMonthAfterYearプロパティのデフォルト値はfalseなので、trueを指定する。なお日本語の基本的な設定は、ui.datepicker-ja.jsを利用するのが便利。

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