進化したダイアログ·vex MOONGIFT
vexはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 21世紀のダイアログを標榜するソフトウェアがvexです。従来のダイアログとは大きく違うUIで目を引くこと間違いなしです。 デモです。Time Machine風にダイアログが重なっています。 テーマを変えてこのような見た目に変更もできます。 ダイアログからさらにアラート。 確認ダイアログ。 さらに別なスタイル。アニメーションの変更もサポートされています。 こちらはデモのアニメーション。 vexはjQueryプラグインであり、IE8、Firefox4以上で動作します（もちろんWebKitは問題ありません）。ログインや初回表示時のツアー、モーダルウィンドウなどにも使えそうです。 MOONGIFTはこう見る ユーザの目が慣れるというのは操作の効率性を生みますが、逆に自然と目に入ることすらフィ
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
これはいい！ドロップダウンに画像と説明文を追加·ddSlick MOONGIFT
ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 見よ、この格好いいドロップダウン！テキストに加えて画像が表示できるようになっています！ ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん！ もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応！ デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
jQuery UI Bootstrap
A preview of the jQuery UI Bootstrap themejQuery UI Bootstrap A Bootstrap-themed kickstart for jQuery UI widgets (v0.1) Welcome! This is a live preview of new the jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter's Bootstrap to jQuery UI widgets. With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter
HTML5対応のjQuery UI向けウィジェット集·Aristo jQuery UI Theme, MOONGIFT
Aristo jQuery UI ThemeはjQueryを使ったHTML5対応ブラウザ向けのウィジェット集。 Aristo jQuery UI ThemeはWebベース、JavaScript/jQuery製のオープンソース・ソフトウェア。iOSやAndroidといったスマートフォンに対してアプローチする方法としては二種類ある。一つはネイティブアプリを開発する、もう一つはWebベースでの提供だ。 デモ1 ネイティブアプリに比べるとWebサイトでは可能なことは限られるが、情報発信系サイトではネイティブアプリを用意してもダウンロードされる率はあまり高くなく、むしろWebサイトで定期的に見てもらう方が多かったりもする。そこで使えるのがAristo jQuery UI Themeだ。 jQueryではjQuery Mobileのようなスマートフォン向けライブラリが用意されている。だがこれを使うとW
jQuery UIのウィジェットを使ってみよう
対象読者 jQuery UIに興味があり、使ってみたいと思っている方 必要な環境と準備 jQuery UIのダウンロード 執筆時点のjQuery UIの最新版は、1.8.2です。第1回を参考にダウンロードしましょう。 Dialog Dialogは、ユーザのアクションに対して、警告、問い合わせなどのダイアログを表示させたいときに利用します。例えば、ユーザ登録時に「登録します。よろしいですか？」といったメッセージや、データを削除させる時に「削除しますが、よろしいですか？」などのメッセージを表示させることができます。 今回は、ボタンをクリックすると、［OK］と［キャンセル］ボタンが配置されたダイアログが表示されるサンプルを取り上げます。 リスト1にDialogプラグインの使用例を、図1、図2に実行結果を示します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js) :: 5509
セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。 サンプルを見てみる トピックス 特徴 ダウンロード 導入方法 スタイル 拡張 表示形式 selectable simpleBox エフェクト 透明度 プルダウン位置の調整(少し高度な設定) プルダウンの高さ カスタマイズ 独自のselectボックスに適用させる id、classの引継ぎ 日付で使う Callback関数を使う 動的にselect要素のDOMを書き換える場合（rebuildメソッド） サンプル 更新履歴・追記 動作環境 特徴 selectボックスの選択ってイライラしないですか？jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。 セレクトボックスの鬱
jQuery+CSSで実装するナビゲーションメニュー総集編
cssやプログラミングcss+jQuery jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Do
Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework | Filament Group, Inc.
Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework We’ve updated our popular Date Range Picker plugin to use jQuery UI 1.7 and the new jQuery UI CSS Framework. This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges. It is an update from a previous version we wrote for jQuery UI 1.5.3. Working Demo: # Demo Page The demo
jQuery TOOLS - The UI library for the Web
jQuery Tools is a collection of the most important user-interface components for today's websites. This single JavaScript file weighs only 5.8 Kb Tabs is the most popular JavaScript tool on the web. Tabs, horizontal tabs and accordions, finally done the right way. Great looking tooltips. Big or small. Pluggable effects. Yet another crucial tool. Visually appealing overlays. This tool is a signific
Uniform - Sexy forms with jQuery
Download Download Uniform jquery.uniform.zip (155kb) Get source on GitHub version 1.5 (2/9/2010) Uniform styles: Selects (Drop downs) Checkboxes Radio buttons File Upload inputs Tested & Compatible in: Safari 3+ Firefox 3+ IE7+ Chrome jQuery 1.3+ Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel
ThemeRoller | jQuery UI
Using ThemeRoller ThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects. To create a custom theme, select the Roll your own tab and tweak the settings. As you work, the UI components to the right will update to reflect your design and you can download your theme whenever you like. If you'd like to use a pre-designed theme, select the Theme Gallery tab and
jQueryとCSSで作るiPhone風ラジオボタン・チェックボックス
2014年8月20日 jQuery いつも使っているラジオボタンやチェックボックスにもっと彩りを！ここではCSSとjQueryを使ってiPhone風のデザインに変える方法を紹介します。使用する画像は一枚のみ。CSSスプライトで表示位置を変えます。サンプルも用意してみたので覗いてみてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルはこちら。IE7, IE8, FF, Chromeで正常動作 See the Pen Mobile like radio/check buttons by Mana (@manabox) on CodePen. ファイルを準備 必要なファイルを準備します jQuery こんな感じの画像を作る コーディング ファイルを読み込む ヘッダー内にjQueryを読み込ませます。 <script type='text/javascript' src='/samp
jQueryでやる！ブログで使えそうな楽しいナビメニュー45
色々とjQueryのサンプルやプラグインが掲載されていて、眺めてるだけで楽しくなるエントリー。 ナビゲーションメニューで悩んだ時に使えそうです。 45 jQuery Navigation Plugins and Tutorials - Noupe さて、いまや多くの人たちから支持を得ているjQueryで、もっと楽しいブログにしてみるのもいいかもしれない。 jQueryは何もWEBサイトだけのものではありません。条件さえクリアすればブログだって使えるのです。 あなたのブログがほんの少しのjQueryで生まれ変わるかもしれない。 わかる方はさくっと上のリンクを叩いて色々試して見てください。 jQueryってそもそも何、って言う人が居ましたら以下を。 jQueryって、美味しいの？ 結構美味しいです。 多くの方に支持されるにはやはりそれなりの理由があります。 超、簡単に説明すると あなたが書いた
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」:phpspot開発日誌
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」 2010年01月20日- jQuery Plugin: LiveFilter 1.0.1 | Mike Merritt | Digital Inferno 大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」。 １ページ内にリストが多く表示されていると探すのが大変ですが、LiveFilterを使えば瞬時に対象を探すことができます。 インプットボックスに検索したい文字列を入れると、一気に対象が絞り込まれ、好みのものがすぐに見つかるでしょう。 そんなの、グーグルツールバーやページ内検索を使えばいいじゃないか、という方もいると思いますが、それらの存在が知らない初心者の方に向けたページの場合は威力を発揮しそうです。 パソコン中級者や上級者の方に向けても、
Appleのようなデザインをするためのコーディングチュートリアル15 – creamu
Appleのサイトのような、かっこいいインターフェースを実装したい。 そんなあなたにおすすめなのが、『15 Incredible Apple Webdesign Style Coding Tutorials』。Appleのようなデザインをするためのコーディングチュートリアル集です。 かなりかっこいいのが揃っていますよ。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery Appleの製品紹介で使われているような、スライドショー。jQueryで動作し、PHPやDBは必要ない Apple style Accordion Menu Appleのサイドバーで使われているような、アコーディオンメニュー How to: Recreate apple.com menubar Appleのグローバルメニューはデザインがよく、ソースも綺麗。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jquery-ui-rails/jquery-ui-rails: jQuery UI for the Rails asset pipeline
Web制作者が読んでおきたい、最近公開されたおすすめのスライド
jQuery UI Development & Planning Wiki / jQuery UI CSS Framework
qTip - The jQuery tooltip plugin - Home