アプリ風のなめらかなサイドメニューが実装できるjQueryプラグイン「mmenu」:phpspot開発日誌
jQuery.mmenu slick app look-alike sliding menus for your mobile website アプリ風のなめらかなサイドメニューが実装できるjQueryプラグイン「mmenu」 この手のライブラリというかプラグインは色々と出ていそうですが、１つの選択肢として知っておくとよいのかも。 $("#nav").mmenu(); で簡単にメニューが初期化でき、オプションも豊富です 関連エントリ レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」 レスポンシブでクールなドロップダウンメニュー実装例 垂直アイコンメニュー実装デモ＆サ
これは超使いやすいページネーションの次世代UI:phpspot開発日誌
Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ＆ドロップでページ指定が簡単に出来ます。 30までドラッグ＆ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合
jQuery/CSS3でPath風メニューを·Pie Menu MOONGIFT
Pie MenuはPathのメニューに似たUIをjQueryで再現したライブラリです。 人気のあるiOSアプリのUIはすぐに真似したモックアップが登場します。Pathもその一つです。流れるようなUIはもちろん、赤いプラスボタンのメニューが人気です。Pie Menuはそんなメニュー表示をjQuery/CSS3で再現したライブラリです。 赤いボタンを押します。 アニメーションがあってメニューが表示されます。 パラメータを変更して表示をカスタマイズできます。 密着版。 デモ動画です。 デスクトップ版でPie Menuを採用したとしてもなかなか使い方が分からないかもしれませんが、PhoneGapと組み合わせると話が違ってきそうです。スマートフォン向けサイトで使ってみても面白いかもしれません。 Pie MenuはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライ
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
Amazonスタイルのアイテムスクローラー実装jQueryプラグイン:phpspot開発日誌
Plugins | jQuery Plugins Amazonスタイルのアイテムスクローラー実装jQueryプラグイン。 amazonでよく見る次のようなアイテムスクローラーをjQueryで簡単に実装できます。 <ul>でアイテムリストを定義しておいて、$(element).amazon_scroller({options}); のようにして簡単に初期化することが可能です。 ブログエントリの下部でのオススメ商品なんかの紹介に使えそうですね。 関連エントリ 画像を縦・横にゆっくりスライドさせたい場合に使えるjQueryプラグイン「PanoScroll」 カートが目立たず、いい感じにスライドしてくれるショッピングカートの仕組み コンテンツを滑らかにスライドさせるjQueryプラグイン
ファイルのダウンロード前にサイズや種類等を親切に表示できるjQueryプラグイン「jDownload」:phpspot開発日誌
ファイルのダウンロード前にサイズや種類等を親切に表示できるjQueryプラグイン「jDownload」 2010年06月08日- jDownload - A jQuery plugin to assist file downloads ファイルのダウンロード前にサイズや種類等を親切に表示できるjQueryプラグイン「jDownload」。 ファイルのダウンロードというと、ブラウザによってはいきなりダウンロードが始まったりするブラウザもありますが、ｊDownloadを使えば、ダウンロードの前に、ファイル名/MIMEタイプ/ファイルサイズをダイアログで表示して、確認後にダウンロードを実施してもらうということが出来ます。UIとしては次のような感じで、ちょっぴりクールなダイアログになってます。 タグ的には、「<a href="ファイル" class="download">ダウンロードはこちら</a
jQuery UI - Home
jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. Rich effects and UI widgets jQuery UI features low-level effect and interaction API's as well as full-featured and highly configurable ready-to-use widgets. Suppor
ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」:phpspot開発日誌
ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 2010年05月19日- Plugins | jQuery Plugins ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」。 ドロップダウンメニューといえば、複数のアイテムが表示され、クリックするとページ移動するというのが普通の動きですが、ドロップダウンメニュー内に好きなコンテンツを入れこんでしまうことが出来るのがMegaMenu。 一見何の変哲もないナビゲーション マウスオーバーすると、テーブルコンテンツがアニメーションしながら表示されます。 フォームだって埋め込んでしまえます。ログインフォームなんかを置くといいのかも リストも次のように綺麗に表示されます。リンクを貼って普通にメニューのように使うことも出来ますね。
[JS]JavaScript無しでも動作するダイナミックなタブコンテンツ
JavaScriptがオンだとダイナミックにコンテンツが切り替わり、JavaScriptがオフでも正常にコンテンツが表示されるタブコンテンツを実装するチュートリアルをCSS-Tricksから紹介します。 Dynamic Page / Replacing Content デモページ 上記デモではJavaSciprのオン・オフに関わらず、タブをクリックするとそれに対応したコンテンツが表示されるようになっています。 仕組みはオフ時にはタブをクリックするとページ遷移し表示され、オン時にはAJAXを使用してコンテンツを表示しています。 タブ箇所のHTMLは、下記のようになります。 HTML <textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li><a href="index.php">Home</a></li> <l
現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」:phpspot開発日誌
現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」 2010年04月12日- prettyLoader | Stphane Caron ? No Margin For Errors 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」 通常、ローディング中というと、ボックス要素の中身にローディングするGIFアニメーションなんかがはいっていたりしますが、prettyLoaderはマウス追従型のローディング表示実装用ライブラリです。 Windowsでいう砂時計みたいな扱いですが、どんなページにも違和感ない実装が可能で、応用範囲が広そうです。 次のような、比較的古いブラウザにも対応しているようです。 Firefox 2.0+ Safari 3.1.1+ Opera 9+ Internet Explo
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」:phpspot開発日誌
jTimepicker - Yet another jQuery time picker plugin. 何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」。 時計のアイコンを押すと次のような水平バーが現れてスライドさせることで、selectボックスの値が増加・減少するUIです。 標準のselect は縦方向に長くなりがちですが、このUIであれば横にスライドさせて比較的簡単に時間の入力が出来ますね。 必要なJavaScriptとCSSを読み込んだら、$('#timepicker').jtimepicker(); で初期化することが出来ます。 関連エントリ jQueryを使ったカレンダー型、日付入力補完ライブラリ 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン
スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」:phpspot開発日誌
jScrollPane スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」。 ちょっと前に話題になっていたような気がしますが便利なのでご紹介。 デザインサイトなどで、スクロールを使ってしまうとOSによって見栄えが変わってきてしまって全体のデザインを崩してしまいますが、このプラグインを使えばそういうこともなさそうですし、更に拡張された機能を使うことができます。以下にピックアップします。 デザイニング 次のような自由にデザインされたスクロール付きブロックを実装可能 プラットフォームに関わらずWinXPスタイルのスクロールバー実装 同様にMacOS Xみたいなスクロールバーも実装できます 拡張機能 さらに面白いのが、スクロール内でさらにスクロールさせるという機能。 スクロール要素をネストできます あと、スクローラー外部からの<A>タグをクリックで指定位置にス
jQuery Menu: Dropdown, iPod Drilldown, ...
jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready Update: We contributed this menu plugin to the jQuery UI library. It’s currently being refactored and slated for upcoming release. You can track its progress at the jQuery UI Planning Wiki (Menu planning page), or better, post feedback or share your own ideas about the jQuery UI planning process by joi
利用しやすいjQueryで作るツールチップを集めた「25 Useful jQuery Tooltip Plugins and Tutorials」
TOP > WebDesign > 利用しやすいjQueryで作るツールチップを集めた「25 Useful jQuery Tooltip Plugins and Tutorials」 マウスオーバーしたときに出現するツールチップ、その対象物の内容を説明したり、補足的なデータを表示したりとユーザーインターフェイスを向上させてくれるテクニックの一つです。今日紹介するのは利用しやすいjQueryで作るツールチップを集めた「25 Useful jQuery Tooltip Plugins and Tutorials」です。 qTip – The jQuery Tooltip Plugin 吹き出しタイプやフェードタイプなど様々なもの集められていますが、今回はそのなかからいくつか気になったツールチップをピックアップして紹介したいと思います。 詳しくは以下 ■Prototip 2 – Crea
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg
[JS]快適に動作するコンテンツスライダーのスクリプト -AnythingSlider
各パネルをダイレクトに表示するリンクにも対応した、パネルをスライドするスクリプト「AnythingSlider」をCSS-Tricksから紹介します。 AnythingSlider demo コンテンツスライダーは右下のボタンで自動再生が可能で、横のアローで次と前、下の数字で各パネルをダイレクトに表示することができます。 また、各パネルをダイレクトに表示するリンクにも対応しています。 例：demo: panel 3 オプションでは自動再生の有無、再生ボタンのテキスト、表示アニメーションのスピードやタイミングなどが変更できます。 AnythingSliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://moto-mono.net/2010/04/30/whatinout.html
IDEA * IDEA
http://e0166nt.com/blog-entry-709.html
