超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker
2015.02.23 超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker ツイート シェアする 共有する はてブ Pocket あなたのサイトの入力フォームは、日付入力が難しくなっていませんか？希望発送日時や納品日など日付に関する入力は意外と手間がかかるので、入力しやすいよう改善しましょう！フォームのユーザビリティ(使い勝手)は入力完了率やコンバージョン率に大きく影響からです。 ではどうすれば日付入力が簡単になるのでしょうか？答えは「カレンダー」を使用して日付入力をしてもらうのです。普段から見慣れているカレンダーを使用することで、直感的に日付を確認することができ、また1クリックするだけで選択出来ます。今回は「jQuery ui Datepicker」を使用して、カレンダーを簡単に実装する方法をご紹介します！ ▼サンプルページ jQuery-ui-datepic
【jQuery】sortable()を設定したタグ内のtextarea, inputタグに入力出来ない | フリーランスWebクリエーターUNVENTのホームページ
【jQuery】sortable()を設定したタグ内のtextarea, inputタグに入力出来ない category： HTML javascript jQuery 2014年09月01日 TOP BLOG HTML 【jQuery】sortable()を設定したタグ内のtextarea, inputタグに入力出来ない textareaタグやinput type=”text”等でフォーカスもしくはクリックしても入力が出来ないバグがありました。 しかもこれGoogle Chromeでは入力できるけどfirefoxでは入力が出来ないブラウザ依存してますね。 で、原因は上記のタグを囲うタグにsortable()が設定されているためです。 要はD&Dで配置移動出来る関数なのですが、 クリックイベントがD&Dの方に持ってかれて入力が出来ないのが原因みたいです。 これはバグとしても報告されており、
jQuery UIでsortable要素にinputやtextareaがある場合に選択できない: JavaScriptメモ
sortableを指定しドラッグアンドドロップを可能にした要素内にinput要素やtextarea要素があると選択されなくなってしまう。 #4429 (Can't select text in inputs within sortables) – jQuery UIによると以下のようにすると解決できそう。 $("#hoge").sortable().disableSelection().delegate('input,textarea','click',function(ev){ ev.target.focus(); }); 若干ソースは変更してます(delegate使わない意味がわからない)。
ドラッグ＆ドロップで新たな項目を並び替えられるリストへ追加
jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスと、jQuery UI の Sortable プラグインを使った、並び替えられるリストとの併用。併用することにより、ドラッグ＆ドロップで、新たな項目を、並び替えられるリストへ、追加できる。 実装例（サンプル） 実装例の動作について 「この項目を追加」と書いてあるリスト項目を、ドラッグして、破線で囲んだリストの「項目 2」の上へ移動すると、「項目 2」が下へ移動し、「項目 1」と「項目 2」の間にスペースができる。そのスペースへドロップすると、破線で囲んだリストへ追加することができる。破線で囲んだリスト項目は、並べ替えることもできる。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="styles
jQuery UI の Dialog プラグインを使った送信確認ダイアログ
実装例（サンプル）の動作について 「送信」ボタンをクリックすると、ブラウザの中央に、確認ダイアログが出現する。 ダイアログ内に「送信」と「キャンセル」の2つのボタンが表示される。 サンプルなので、実際には送信しない。 ダイアログ内の「×」アイコンをクリックすると、ダイアログを閉じる。 ダイアログ内のタイトルをドラッグしながら、ダイアログを移動できる。 ダイアログのサイズを変更できる。 実装例（サンプル）のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css" /> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/ja
jQuery UI の Sortable を使いドラッグ＆ドロップで並べ替え
jQuery UI の Sortable プラグインを使い、ドラッグ＆ドロップで並べ替えを行えるようにする方法。 実装例（サンプル） 項目 1 項目 2 項目 3 項目 4 項目 5 項目 6 項目 7 実装例の動作について 「項目 1」をドラッグして、下へ動かし、「項目 2」の上に持ってくると、「項目 2」が上へ移動し、「項目 2」と「項目 3」の間にスペースができる。そのスペースへドロップすると、「項目 1」と「項目 2」が入れ替わり、「項目 2」「項目 1」「項目 3」…の順番になる。 同様に、「項目 1」から「項目 7」の項目全て、ドラッグ＆ドロップによる並べ替えが行える。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/bas
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - furf/jquery-ui-touch-punch: A duck punch for adding touch events to jQuery UI