[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)
超軽量でカスタマイズ性の高いオートコンプリート実装「Awesomplete」:phpspot開発日誌
Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou 超軽量でカスタマイズ性の高いオートコンプリート実装「Awesomplete」 2KBで次のようにオートコンプリートが実装できます。 実装方法は、補完したいデータを data-list で属性定義するだけ、という簡単さ。 次のように別途datalist タグでデータを定義する事も可能です @を入れた後のドメイン補完機能なんかも応用することで実現が可能 関連エントリ オートコンプリート可能なプルダウン実装「jquery.ajax-combobox」 オートコンプリートにテーブルを使える「Autocomplete-Table」 お手軽に使えるBootstrapベースのオートコンプリート実装jQueryプラグイン「comple
spin.js
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major browsers Includes TypeScript definitions Distributed as a native ECMAScript module MIT License Spin.js dynamically creates spinning activity indicators that can be
Baraja: A Plugin for Spreading Items in a Card-Like Fashion
Coco LokoTotal bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat. Vermouth LandVelit chambray fugiat, enim aesthetic esse ullamco typewriter. ElectrodynamicsBefore they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up. Retinal BlissLocavore vero ad, before they sold out food truck bushwick helvetica. Disco FeverCillum laboris consequat, qui elit retro ne
びよ〜んと弾むのが気持ちいい！タブレット・スマフォで使いたいナビゲーション -Bounce Menu
タップすると、びよ〜んと弾んでナビゲーションが表示されるタブレット・スマフォ向けに実装してみたいナビゲーションを紹介します。 Bounce Menu 左下をタップで動作します。 実装はこんな感じです。 HTML <div class="device"> <div class="screen"> <div class="menu"> <ul> <li class="lock"><a href="">Lock</a></li> <li class="share"><a href="">Share</a></li> <li class="download"><a href="">Download</a></li> </ul> </div> <div class="toggle"> <div class="x"></div> <div class="y"></div> </div> <div cl
[JS]スマフォ・タブレットでの利用を前提に作られたタブを実装するスクリプト -Tabby
Demo: 垂直型のタブ タブレットやデスクトップなどの広いスクリーンでは垂直型で右側にコンテンツが表示され、小さいスクリーンでは水平型に表示されます。 Tabbyの使い方 ステップは2つです。 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトとjQueryをbodyの下あたりに記述します。 <head> ... <link rel="stylesheet" href="tabby.css" type="text/css"> </head> <body> ... <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script src="tabby.js"></script> </body> Step 2: HTML HTMLはデモをベースに紹介します。 Demo: ベーシックタイプ
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
25 Interactive HTML5 Websites | Web Design Fact
Few years ago, there were lots of cool and interactive websites that were built with Flash. They would often feature full screen layouts, animated elements and futuristic interfaces that made HTML websites look plain and tedious. Yet unfortunately Flash comes with several problems such as high processor load or loading time, but these days these problems have overcome with HTML5, CSS3 and JavaScri
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
Tiny Scrollbar: A crossbrowser lightweight Javascript / jQuery scrollbar.
What is it? Tiny Scrollbar is a nice and elegant way to enable the scrolling of content on mobile and desktop devices. Its designed to be a dynamic lightweight utility. Furthermore it gives a User Interface Designer a powerful way of enhancing the Ui (user interface) of a website. It comes in 2 flavours as a vanilla Javascript microlib and as a jQuery plugin. Browser support differs between the jQ
jQueryで背景画像をフルスクリーン表示してスライドショーに出来るやつ色々
気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一っちゃ択一なんですけど・・・ちょっと出来上がりすぎていじりにくいので他もチェックしたい、という事で調べたものを羅列しておきます。触ったこと無いのもあるのでその程度の記事という事で。 Supersized 定番の高機能プラグインです。IE6では動作しません。スマートフォンでも大丈夫っぽい。多数のオプションも用意されており、FlickrAPIにも対応してるくさいです。ライセンスはMIT/GPLのデュア
スクロールバーをデザインするのに使えるjQueryプラグイン「Custom Scrollbar」 | Web活メモ帳
「Custom Scrollbar」はスクロールバーのデザインとスクロール量をカスタマイズできるjQueryプラグインです。 デザイン以外にも、イージング、マウスホイールへの対応など多彩なオプションが設定可能になっています。 OSが変わっても同じ見せ方をしたい場合などに良さそうですね。 詳しくは以下 デモ 多彩なオプション機能 以下のようなオプションが設定可能です。 スクロールの方法（縦か横） スクロール量 イージング量（スクロールを停止した後の慣性の量） スクロールバーの幅と高さ マウスホイールのサポート 使い方 jQueryやjQUery.uiなどのライブラリをheadタグで読み込みます。 <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> <script src="http://aj
jQuery Tags Input - XOXCO - Web and Community Development
Magically convert a simple text input into a cool tag list with this jQuery plugin. Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data - your form just sees a comma-delimited list of tags! Tweet Jump to: Examples, Download, Instruct
jQueryで作るGoogleカレンダークローン·wdCalendar MOONGIFT
wdCalendarはWebベース/jQuery製のオープンソース・ソフトウェア。Googleの中でも人気の高いプロダクトの一つがGoogleカレンダーだ。Ajaxを駆使し、まるでデスクトップアプリのような操作が可能だ。スケジュールはビジネス/プライベートを問わず利用できる。 スケジュール登録画面 そんな便利なツールだけに、自前のスケジュールアプリにもあのような機能を持たせたいというニーズは強くある。逆に言えばスケジュールアプリを作る上であのインタフェースと操作性は欠かせない存在になっている。それを実現するのがwdCalendarだ。 wdCalendarはjQuery製のオープンソース・ソフトウェアで、そのインタフェースはまさにGoogleカレンダーだ。マウスでドラッグして予定を作成したり、その詳細を記述（編集する際には自分でwdCalendarを立てる必要がある）することができる。 月
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.dropzone.dev/js/
BookBlock: A Content Flip Plugin - Demo 1
http://mmenu.frebsite.nl/
jQuery custom scrollbar