自分が普段良く使うやつとかあったら便利だなと思った機能を作ってまとめてみた
公式HPは下記。
俺.net。
随時、機能追加予定。
【jQuery】Draggableでドラッグした要素がoverflow:scrollなどに設定された要素内にある場合、背後に回ってしまう問題。
解決出来たのでメモ。
draggableを要素に適用する際、下記のようなオプションを追加で渡してやればOK。
appendTo: 'body', containment: 'window', scroll: false, helper: 'clone'
【jQueryUI】datepickerkにtimepickerを追加する。
そして日本語化までする。
まずは下記URLの手順に従ってtimepickerをインストール。
http://trentrichardson.com/examples/timepicker/
そしてイニシャライズを下記の様に行う。
var option = {
closeText: '閉じる',
currentText: '現在日時',
timeOnlyTitle: '日時を選択',
timeText: '時間',
hourText: '時',
minuteText: '分',
secondText: '秒',
millisecText: 'ミリ秒',
microsecText: 'マイクロ秒',
timezoneText: 'タイムゾーン',
prevText: '<前',
nextText: '次>',
monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
dayNamesMin: ['日','月','火','水','木','金','土'],
weekHeader: '週',
yearSuffix: '年'
};
$('.dt').datetimepicker(option);
これにて完了！
【jQueryUI】datepickerの初期化時、オプションを複数まとめて渡す方法。
めも。
$('.dt').datepicker({
showAnim: 'fadeIn',
dateFormat: 'yy-mm-dd',
changeMonth: true,
numberOfMonths: 3,
minDate: '0',
onClose: function(d) {
}
});
といった感じでオブジェクトで複数のパラメーターを渡せばOK。
【jQueryUI】sortable()のtoArrayメソッドにオプションを渡す際。
渡し方めも。
var result = $('.selector').sortable('toArray', {attribute: 'value'});
と言った感じ。
【jQueryUI】テキスト選択を無効にする。
メモ。
■HTML
<p id="disable-selection"> テキスト </p>
■Javascript
$(function(){
$('#disable-selection').disableSelection();
});
これでマッチした要素集合のテキスト選択を無効にすることが出来る。
DragableやSortableと併せると、ユーザービリティ的にグッド。
【jQueryUI】リスト要素をドラッグしてソートさせる。
jQueryUIのSortableWidgetを用いる。
公式は下記URLを参照。
記述方法は簡単。下記の通り。
※予めjQueryとjQueryUIを読み込んでいる必要あり。
■HTML
<ul id="sortable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>
■Javascript
$("#sortable").sortable();
APIドキュメントは下記URLを参照。
http://api.jqueryui.com/sortable/
Ajaxと組み合わせて使うといろいろと便利。
【Javascript】jQueryUIでhighlight()メソッドのカラーを変更する。
めも。
$('.target').effect('highlight', {color: '#ffffff'}, 1000);
第2引数にオブジェクトを渡してやればOK。