スマホでjQueryUIのautocompleteを2回タップしなければならない現象を解消する

.autocompleteのところに以下のオプションを付与するとスマホ版でも1回のタップで選択できるようになります。 $(“#input”).autocomplete({ open: function(event, ui…

Read more

jQueryUIのautocompleteをフォームクリックで表示する

通常の記述だと下カーソルか、何か入力した際にしか表示されないのですが、フォームをクリックするだけで候補リストを出したいとおもい調べたところ以下の方法でできました。 var stationsList = [ ‘東京駅’, …

Read more

「X-editable」を利用してその場で編集するUI(Edit In Place)を導入する

X-editableプラグインを利用することで、その場で編集するUI(Edit In Place)を簡単に導入することができます。 ダウンロードとデモはこちらから。 X-editableプラグインはBootstrapとj…

Read more

jQuery UI Datepickerで表示する年数を指定する

jQuery UI Datepickerでカレンダーで年のセレクトボックスを付ける場合、デフォルトだと前後10年ほどしか表示されないようになっているようです。 生年月日を入力してもらうときなどは未来の年数は不要で、過去は…

Read more

jQueryUI:sortableを使う

See the Pen jQuery sortable by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ドラッグ&ドロップで並び替えできるリストです。 <ul clas…

Read more

WordPressで最新のjQueryとjQuery UIを読み込む

/1/ とすることで最新のバージョンを指定できるそうです。 <?php wp_deregister_script( ‘jquery’ ); wp_deregister_script( ‘jquery-ui-core…

Read more

WordPressのフロントエンド投稿フォームに投稿タグのサジェスト機能を付ける

これまでに投稿したタグを全ては覚えていられないので、タグのサジェスト機能があればいいなとずっと思っていたのですが、やっと実装できました。 jQueryプラグインでも様々なサジェスト機能がありますが、今回欲しかったのは下記…

Read more

jQueryUI:「input type=number」を擬似的に作る

サンプルはこちら。 See the Pen Eurik by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 数値入力欄の右の上下ボタンより一定の数値を増減させられます。 HTML…

Read more

jQueryUI:階層メニューUIをつくる

サンプルはこちら See the Pen xdJEr by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. リストから階層メニューを簡単に作れます。 JavaScript $(fu…

Read more

jQueryUI:ラジオボタンをボタンセットにする

サンプルはこちら See the Pen lBpku by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTML <div class="group"…

Read more

jQueryUI:ツールチップを表示させる

サンプルはこちら。 See the Pen vuaif by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. カーソルを置いた際にツールチップを表示させます。注釈や説明の表示に役立…

Read more

jQueryUI:入力欄にオートコンプリート(入力補助)機能をつける

サンプルはこちら。 See the Pen fkoxL by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. a~bで始まるいくつかの単語を候補に入れています。jQueryUIでこ…

Read more

jQueryUI:アコーディオンUIの生成

サンプルはこちら。 See the Pen fGysD by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. jQueryUIでアコーディオンUIを簡単に作ることができます。jQu…

Read more

jQueryUI:ダイアログの生成

サンプルはこちら See the Pen tHfer by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. jQueryUIで簡単にダイアログ表示を行うことができます。 HTML …

Read more

jQueryUI:ドラッグ&ドロップの制御

サンプルはこちら。 前回はドラッグする方法を紹介しましたが、それだけでは意味がありません。ドラッグした後にドロップする時の挙動も含めて一つのUIになります。 JavaScript $(function() { $(&#0…

Read more