Gorilla Dropdown - ドロップダウンをリッチに
HTMLの入力UIの中で非常に貧相に感じるのがドロップダウンです。単数選択、複数選択のいずれもシンプルで使い勝手もよくありません。テキストエリアはWYSIWYGにするライブラリが多数ある中、ドロップダウンはなかなか進化しません。 そこで紹介したいのがGorilla Dropdownです。ドロップダウンを格好良くしてくれるライブラリです。 Gorilla Dropdownの使い方 デモです。画像とテキストを載せられます。テキストも一行ではなく、複数行にできます。 カラーテーマ的な使い方もできます。 Gorilla Dropdownを使えばテキストや画像などを自由にドロップダウンの選択項目にできます。テキストだけで選択するのに比べて圧倒的にユーザビリティが高くなるでしょう。 Gorilla DropdownはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT Licen
lufo - 最近選択したドロップダウンの項目を優先表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webのフォームで何度も同じドロップダウンの項目を選択していると、項目を一番上に持っていって欲しいと考えるでしょう（都道府県、国名など）。しかし自分にとっての優先項目と他のユーザにとっての優先項目は異なります。 そこで使ってみたいのがlufoです。HTML5を使うことでスマートに解決しています。 lufoの使い方 lufoは任意のドロップダウンに対して設定できます。jQueryが必須です。 はじめは普通のドロップダウンですが、一回選択するごとに最近選択した項目としてリストの上に出るようになります。これは選択した項目をlocalStorageに残しておくことで、次に表示した際に再現してくれます。これならば個人のブラウザにしか依存せず、かつ自分はどんどん使い勝手が良くなるでしょう。 l
Best Casino jQuery Plugins: Example ohne Steuer
ViewerDecember 9 Viewew is an awesome jQuery image viewing plugin for photo galleries. Created by Fengyuan Chen Download Home Example View more → video-extendDecember 7 Video Extend is a jQuery plugin to create advanced video controls like jump to and chapters to videos Created by andchir Download Home Example View more → Casino pagination-jsDecember 5 Pagination-js is a Casino ohne Steuer jQuery
[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]
フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。
![[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5062373ec67701c8d65ca6ffdfe6e9cb4dc3565f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015110901.png)
jQuery easySelect
A plugin to present multiple select elements in easier way. Download .zip Download .tar.gz View on GitHub Demo Download manually or install via Bower: bower install easyselect Add jQuery (requires jQuery 1.4.2 or later) and plugin assets into the <head> element: <link href="jquery.easyselect.min.css" rel="stylesheet"> <script src="jquery-1.10.2.min.js" type="text/javascript"></script> <script src=
flexselect: a jQuery plugin
What? Flexselect is a jQuery plugin that turns select boxes into flex-matching incremental-finding controls. Think of it as Quicksilver squished into a select box. Download, view the examples, and enjoy. It uses the LiquidMetal scoring algorithm to narrow the selection. Examples On the left is a traditional select box. On the right is a flexselect control. Just start typing to narrow the selection
複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Select
複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Selectのご紹介。なかなか便利そうだったので備忘録です。 複数選択可能なselectボックスを直感的な操作で手軽に選択できるようにしよう、というもの。グループ化したものも一括選択できるのが個人的には嬉しかったです。 動作サンプルです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="jquery.multiple.select.js"></script>本体とプラグインを読み込みます。 $('#foo').multipleSelect();セレクタにはselect要素を指定します。 また、細かいオプション設定が可能です。詳
jQueryでチェックボックスの状態をうまく取れない、設定出来ないときは、attr()ではなくprop()を使ってね。（JavaScriptおれおれAdvent Calendar 2013 – 02日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2013 – 02日目 チェック状態は$checkbox.attr('checked')ではなく$checkbox.prop('checked')で得る必要があります。 検証 初期状態で確認すると c1: attr=undefined prop=false c2: attr=checked prop=true チェックを入れ替えて確認すると c1: attr=undefined prop=true c2: attr=checked prop=false というわけで .attr() … 変わらない .prop() … 変わる（こっちを使う） 仕組み .attr()はattribute、つまり（HTMLの）属性を得るメソッドです。HTMLにのタグにchecked属性を記載したらその値checkedが得られます。していなければ、存在し
jQuery Selectric
// Cache the target element var $selectValue = $('#select_value').find('strong'); // Get initial value $selectValue.text($('#get_value').val()); // Initialize Selectric and bind to 'change' event $('#get_value').selectric().on('change', function() { $selectValue.text($(this).val()); }); $('#set_value').selectric(); $('#set_first_option').on('click', function() { $('#set_value').prop('selectedIndex
EasyDropDown - A Drop-down Builder for Styleable Inputs and Menus
A Drop-down Builder for Styleable Inputs and MenusWhat Is It? EasyDropDown is a jQuery plugin that effortlessly turns humble <select> elements … … into styleable drop-down menus for use in forms or general UI/navigation. It's like Chosen but with only the essential features: Clean, semantic markup Form & validation compatibilty Full keyboard control with textual search Inner-scroll for long lists
FancySelect » Octopus Code
A better select for discerning web developers everywhere.FancySelect is easy to use. Just target any select element on the page, and call .fancySelect() on it. If the select has an option with no value, it'll be used as a sort of placeholder text. By default, FancySelect uses native selects and styles only the trigger on iOS devices. To override this, pass an object with forceiOS set to true when
jQueryでselect要素のテキストを取得する方法
jQueryでselect要素のテキストを取得する方法を紹介します。 このエントリーでは、 プルダウンで選択したoption要素のテキスト取得 select要素内のすべてのoption要素のテキスト取得 指定したテキストに合致するoption要素を選択状態にする方法 について解説します。 それぞれのサンプルも用意しています。 １．選択したオプションのテキストを取得する 選択したオプションのテキストを取得するには「opstion:selected」とtext()を組み合わせます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> jQuery(function(){ jQuery('#foo').change(function(){ alert(jQ
Minimalect by groenroos
Minimal select replacement for jQuery Download .zip Download .tar.gz View on GitHub minimalect Minimal select replacement for jQuery by @groenroos. Replace select elements with a nicer styled control Support for optgroups Filtering choices by typing Keyboard navigation Support for themes So, what does it look like? Usage Include jquery.minimalect.min.js after you load jQuery (1.7 or newer). Then s
jQueryでoption要素を追加する方法
jQueryでoption要素を追加する方法を紹介します。 １．option要素を追加する 次のselect要素があると仮定します。select要素には2つのoption要素が設定されています。 <select name="foo" id="foo"> <option value="1">aaa</option> <option value="2">bbb</option> </select> これにvalue属性が「3」、コンテンツが「ccc」というoption要素を追加するには次のように記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ var option = $('<option />'); opti
[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect
フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。 デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。 フィルタリングのサポート。 キーボードナビゲーション。 テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。 まずは、一つ目。
Bootstrap向けの、select要素の複数選択を分かりやすくするjQueryプラグイン・Bootstrap Multiselect
Twitter Bootstrap向けに作られた、select要素の複数選択を分かりやすくするjQueryのプラグインのご紹介。個人的にBootstrapの使用率が減りましたので利用させてもらう機会は無いかもですけど・・ Bootstrap向けのマルチセレクトのユーザビリティ向上用スクリプトです。 チェックボックス式になっていて、チェックが入るとハイライトされます。 数が多い場合はenableFilteringというオプションを使えばフィルタリングもできる。と言っても、あまり多すぎるようならもう少し工夫しないとですね。 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="bootstrap.min.js"></script> <script type
http://jautochecklist.googlecode.com/svn/doc/index.html
jAutochecklist is a jQuery plugin that help you to create an user-friendly HTML list which can be used to replace the old tradition select list Copyright ©2013 Thanh Trung NGUYEN <flyingangel1987@gmail.com> Released under MIT License Changelog Why use jAutochecklist User-friendly UI and interaction Fast searching with autocomplete HTML support for contents No limitation for nested group of values
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
elohr.me
Multi-Column-Select Demo
Responsive Tables, for Bootstrap 5
