メン醤のjQuery workshop

jQueryの小技などのサンプルをコード例として紹介するブログです。ネイティブJavaScriptから移行したいjQuery初心者向け、jQueryの魅力を知ってもらえたら。

jQuery UI

jQuery UI datepickerの休日・祝日表示のカスタマイズを行う

カスタマイズ 先日jQuery UIのdatepickerについて日本語化・表示位置の調整・初期化の一括簡略化などを紹介しましたが、まだまだカスタマイズの余地がありますね。 今回は、週末(土曜・日曜)と祝日を選択不可にして、さらに表示文字色も一般的なカレンダーの…

jQuery UI autocompleteの結果表示をカスタマイズしてdivやtableに表示させる

前回の続きです jquery-workshop.hatenablog.com 今回は、結果表示の方 前回は検索条件と検索対象のカスタマイズでしたが 今回は検索結果表示のカスタマイズです。 autocompleteではテキストボックスの下に一覧が出るのが標準ですが これを <div id="search_results"> <div class="search-resuls"> ... </div> <div class="search-resuls"> ... </div> <div class="search-resuls"> ..</div></div>…

jQuery UI autocompleteの検索条件をカスタマイズする

データの用意 準備として検索用のデータを用意します。 (データの内容は何でもいいですよ?) 処理概要 jQuery UIのautocompleteは、sourceに指定した要素において labelは見た目上の表示に valueは選択した際に代入される値 となります。 そのため、まずは $…

jQuery UI datepickerを日本語化したりカスタマイズしたり

前回に引き続きjQuery UIのdatepickerです。 やはりデフォルトのままだと色々不便があります。 前回はカラー(テーマ)のカスタマイズを紹介しました。 jQuery UIの導入方法と色を変えるためのカスタマイズ - メン醤のjQuery workshop 日本語化 公式のGitHubリ…

jQuery UIの導入方法と色を変えるためのカスタマイズ

今回はjQuery UIの導入方法とカスタマイズ方法を紹介します。 jQuery UIとはjQueryに追加するプラグインで、 日付選択(datepicker)や、入力候補(autocomplete)、数値入力テキストボックスの機能改善 などの追加機能を簡単に組み込むことができます。 デモは…