概要 Vue-multiselectはセレクトボックスを簡単に実装できる便利なVueライブラリです。 複数選択や自動補完など一般的にセレクトボックスに求められる機能はほぼ全て実現できます。 ここでは公式サイトを元にVue-multiselectのカスタマイズ方法の一部を紹介します。 基本の使い方 上図のようにシンプルな単一選択のセレクトボックスは以下のコードで実装できます。 なおCDNを利用するとVue-multiselectを簡単に試せます。 See the Pen RwGwBaO by shi-ma (@shi-ma) on CodePen. optionsプロパティには選択肢に設定したい配列を指定します。 custom-labelプロパティに関数を指定すると、その返り値が選択肢として表示されるラベルとなります。 optionsが連想配列で各キーのバリューを組み合わせたラベルを作りたい
子コンポーネントのデザインオプションを親コンポーネントから切り替える[Vue.js, Vuetify]Vue.jsVuetify Vuetifyのデザインコンポーネントはとても便利で、オプションをちょっと書くだけでUIのデザインや機能まで簡単にカスタマイズできます。 さらに、少し工夫するだけで親コンポーネントからもオプション類を操作できるため、その手順をまとめます。 やりたいこと こんな感じで、バレーボールのポジションを選択するv-selectだけのコンポーネントを作ります。 （なぜバレーボールなのかは無視してください） <template> <v-select prepend-icon=" mdi-volleyball " :items="positionList" label="ポジション" ></v-select> </template> <script> export defaul
フォームをスタイルするのが苦手、中でもselect要素が最も苦手という人は少なくないと思います。Web制作者が苦痛だと感じているselect要素の不満点、select要素をクロスブラウザ対応で美しくスタイルするテクニック、select要素に対するブラウザの進化の紹介します。 The Current State of Styling Selects in 2019 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに select要素を美しくスタイルするテクニック ドロップダウンの内側のスタイル select要素の不満点 select要素に対するブラウザの進化 はじめに 2019年、CSSで望まれている機能の一つは、フォームのスタイルでした。トップ5に入っています。 Greg Whitworthのデータによると、フォーム要素の
jquery.ui.timeselect 時間の選択に便利なUIを提供できる「jquery.ui.timeselect」。 次のように入力時間の候補を補完できます。時間の入力って以外と多いと思いますが、入力がこれで楽にできそうです。 関連エントリ アナログ時計のUIで時刻を入力できるjQueryプラグイン「ClockPicker」 日付範囲の入力に便利な「jQuery UI Date Range Picker Widget」 フォームにて入力の入力UIを追加できる「jquery.signfield」 国際対応の電話番号入力補助が実装できるjQueryプラグイン「International Telephone Input」
Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. $(".chosen-select").chosen({disable_search_threshold: 10}); Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is
Selectize is a jQuery-based custom <select> UI control. It's useful for tagging, contact lists, country selectors, and so on.Tweet Selectize is a jQuery-based custom <select> UI control. It's useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API. It's a lot like C
EasyDropDown - A Drop-down Builder for Styleable Inputs and Menus ドロップダウンをフラットでクールにするjQueryプラグイン「EasyDropDown」 次のようなクールなドロップダウンを実装することが出来ます。CSSの切替えによって簡単にデザイン変更が可能 フラットデザインについては、今後しばらく盛り上がりそうです。 関連エントリ 美しいフラットなアイコンフォント「Dripicons」 フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 フラットだけど影で立体的に見えるフリーな汎用アイコンセット ハイクオリティなソーシャル向けのフラットアイコンセット フラットな６２種類のファイル・タイプアイコンセット「File Type Icons」 200個のフラットなフードアイコンセット
FancySelect オシャレなSelectボックスが実装できる「FancySelect」。 単にselectボックスをリデザインした、とうよりこういうElementを新しく作ったという感じでカッコいいSelectボックスが簡単に実装できます githubでダウンロード可能です 関連エントリ selectをカッコよくしてくれるjQueryプラグイン「Minimalect」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 selectボックスをインクリメンタル検索可能に機能拡張できるjQueryプラグイン「zelect」 selectボックスをリッチかつクールにできるjQueryプラグイン「jAutochecklist」
リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 2013年08月22日- Menutron リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」。 メニューがリストで並んでいるよくあるサイト。ブラウザの幅をせまくすると・・・ selectボックスけいしきのナビゲーションに変換してくれます。自動でやってくれるのは便利です。 リストを縦に並べるだけだとなんだか使いにくいサイトになってしまいそうですが、Selectにするのはなかなかスマートかも。 関連エントリ タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」 スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応でCSS3アニメーションを使った超クール
こんにちは、@yoheiMuneです。 本日はフロントエンドのネタで、HTMLのセレクトボックスの選択状態をJavaScriptで変更する方法を書きたいと思います。 Selectボックスの選択状態をJavaScriptから変更できない？ 最近のお仕事でこんな要件がありました。 セレクトボックスの選択状態を覚えておき、次に同じ画面に訪問した際には以前の選択状態が復元されるようにする。 そしてそのときのアーキテクチャとして、サーバーとクライアントはAPIベースでのやり取りのみ（Full Ajax）な構造となっていたため、 セレクトボックスのレンダリングもJSが行う必要がありました。 その当時、こんなコードを書いてみたのですが、なぜかうまくSelectBoxの選択状態が変わらないという問題がありました。 // セレクトボックスを作る var $select = $('<select name="
selectボックスをリッチかつクールにできるjQueryプラグイン「jAutochecklist」 2013年04月23日- jAutochecklist selectボックスをリッチかつクールにできるjQueryプラグイン「jAutochecklist」 selectボックスをカスタマイズするものは多くありますが、今回は独特。 クリックすると、オートコンプリート機能がつきつつ、リスト要素はHTMLでリッチに、選択すると吹き出しに要素が追加されていくマルチ選択が可能。 単にGoogle,Yahooと書いているよりも直感的に分かっていい感じですね 関連エントリ パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 レスポンシブな画像ギャラリーが作成できるjQueryプラグイン Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Su
multiselect.js 使いやすい複数選択エレメントを実現するjQueryプラグイン「multiselect.js」 アプリケーションに実装されているような次のような複数選択ボックスをWEB上で実現可能です。 左側のアイテムをクリックで右に移して選択状態に。また右側のアイテムをクリックで非選択状態にできます HTML的には1つselectを用意して multiSelect() で初期化すればOK 関連エントリ selectボックスを超カッコよくするjQueryプラグイン「Chosen」 jQueryの独自セレクトボックスを作成するjQueryプラグイン「jQuery.customSelect()」
セレクトボックスを美しいデザインにするだけでなく、各アイテムに画像を配置したり、タグやプレースホルダテキストや検索の対応、セレクトボックスのコントロールなど、さまざまなことができるjQueryのプラグインを紹介します。 Select2 GitHub [ad#ad-2] Select2の対応ブラウザ Select2のデモと実装 Select2の対応ブラウザ Select2の対応ブラウザは下記の通りです。 IE8+ ※IE7はz-indexを使った一部のものにバグあり。 Chrome8+ Firefox3.5+ Safari3+ Opera10.6+ Select2のデモと実装 各デモとともに実装方法を紹介します。 jQueryは1.7+推奨で、1.4.2から対応しています。 デモ：ベーシック（上：既存、下：Select2適用） まずは、ベーシックなデモから。 下記のシンプルな記述で、既存のセ
フォームのselect要素で複数選択 可能なフォームをユーザーが利用 しやすくする為のプラグインです。 現在選択中の項目を分かりやすく 表示してくれます。 multiple属性を使った複数選択可能なselect要素はとても便利ですが、ユーザーが使いにくく、利便性向上は課題の一つです。その利便性を向上させてくれるのがbsmSelectです。 複数選択すると下部に選択中の項目が表示されます。削除も可能。IE7などでも動作しました。 動作サンプルです。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src="jquery.bsmselect.js"></
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く