Mac OS X風のドックを上下左右どこでも設置できるjQueryプラグイン「Docklr」:phpspot開発日誌
"Docklr" - Simple jQuery OSX-like Dock Menu | jQuery Plugins Mac OS X風のドックを上下左右どこでも設置できるjQueryプラグイン「Docklr」。 次のように上下左右、ページ内、どこにでも設置できるDock風UIを実現できるプラグインです。 ページの左側に設置してもなかなかオシャレですね。 デモページ アイコンをクリックするとバイーンとアイコンがアニメーションするあたりもそっくりです。 上下左右だけでなく、ページ内に普通に設置することもできるみたいです 関連エントリ レイアウトに関する強力なjQueryプラグイン６つ 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」 画像スライダーに関することならお任せ！なjQueryプ
これは注目の超リッチな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はなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
Facebookライクなサイドバーが簡単に実現可能なjQueryプラグイン「MyFacebookStyleSidebar」:phpspot開発日誌
Facebookライクなサイドバーが簡単に実現可能なjQueryプラグイン「MyFacebookStyleSidebar」 2011年06月09日- Official Demo page for MyFacebookStyleSidebar jquery plugin Facebookライクなサイドバーが簡単に実現可能なjQueryプラグイン「MyFacebookStyleSidebar」 このプラグインを使えば左側にメニュー、右側にコンテンツがあり、メニュークリックでAjaxなどによって画面を切り替えるUIが実現できます。 ajaxでページ読み込みはもちろんiframeも利用可能みたいです。 ローディング画像を表示できたり、SEOフレンドリなAjaxコール、そしてクロスブラウザ動作という特徴を持ちます。 実際に数億人が使うUIを真似ることで、世界中の人々が使いやすいUIというものを構築で
スクロール位置に応じて注釈表示が可能なｊQueryプラグイン「SmartScroll」:phpspot開発日誌
SmartScroll スクロール位置に応じて注釈表示が可能なｊQueryプラグイン「SmartScroll」 スクロールバーが長いとどの位置に何があるかっていうのを知りたくなりますが、SmartScrollを使えば次のように、この位置にこんなことが書いてあるよ、を示すことが可能。 使い方次第では長ったらしい文章も分類して分かりやすく表示することができそうですね。 注釈だけじゃなくてデザインも色々と変更できるみたいです。 注釈を付ける部分も何がいいって実装が簡単な点。 ちゅうす役をつけたい位置に次のようにマークアップしておけばいいっていうのはお手軽ですね 上記コードで次のように表示 スクロールバーも次世代に。ｊQueryが出来ることをどんどん拡張していってくれますね。 本当にjQueryは偉大です。 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「deskt
ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル:phpspot開発日誌
Animated Scroll to Top ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル。 ページの上の方にいる場合は必要ないかもしれないボタン。下に行くにつれ表示されることで上に戻れることが分かりやすく、上にいるときは邪魔にならないという使いやすいボタンが作れますね。 jQueryにて実装するチュートリアルとなっており、サンプルのダウンロードも出来るのでいざ実装する際に参考にできそう。 デモページ 最近WEBを巡回していると散見するUIですね。 関連エントリ 指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」 スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」
コンテンツエリアにスクロールバーが付いたタブUI実装jQueryプラグイン「wdScrollTab」:phpspot開発日誌
コンテンツエリアにスクロールバーが付いたタブUI実装jQueryプラグイン「wdScrollTab」 2010年10月13日- wdScrollTab Scroll Tab | jQuery Plugins コンテンツエリアにスクロールバーが付いたタブUI実装jQueryプラグイン「wdScrollTab」 次のようなタブUIを実装することが出来ます。タブは見ての通り綺麗なインタフェースで、閉じるボタンを付けたりすることも出来ます。 タブ内のデータはJSの配列で定義しておいて、TabPanelコンストラクタにオプションを渡すことで初期化することが出来ます。 １から実装しようとするとなかなか大変そうですが、これなら簡単に実装出来ますね。 関連エントリ タブ切り替えでコンテンツがスロットマシンっぽく切り替わるサンプル アイコン付きタブが可愛いアニメーションメニューを実装するチュートリアル ナビ
Googleマップ風のUIを実現できるJSライブラリ「Polymaps」:phpspot開発日誌
Polymaps Googleマップ風のUIを実現できるJSライブラリ「Polymaps」。 マウスホイールによる拡大・縮小機能もついてます。 サンプルも豊富です。 他にも同様のライブラリは存在しますが、１つの選択肢として覚えておいても良いかも 関連エントリ 高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」 「Google Static Maps API」を使い携帯でGoogleマップを表示 GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」 PHPでGoogleMapのジオコーディングAPIを簡単に使えるサンプルコードとライブラリ GoogleMap風でクールな地図UIが作れるライブラリ「MapBox」
ドラッグを必要とする様々なUI実装に使える「Dragdealer JS」:phpspot開発日誌
Dragdealer JS ドラッグを必要とする様々なUI実装に使える「Dragdealer JS」。 マウスを使ったドラッグ＆ドロップ操作というのは、スクロールバーや、スライダー等色々と存在しますが、そういった処理を一手に引き受けてくれるライブラリのご紹介です。 要素を動かした後のコールバック関数が指定できるので、ドラッグ＆ドロップ後の処理が自由に記述できてアイデア次第ではなかなか便利なUIが作れそうです。 横スライダー 縦スライダーで文字サイズを変更するサンプル 横スライダーで文字サイズを変更するサンプル ドラッグで移動させるスライドショー 予め用意されているUI実装をするのもよいですが、ドラッグ＆ドロップに関する新しいUIを思いついた場合にも参考にしてみるとよさそう。 関連エントリ IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」
物体のドラッグ＆ドロップ時に勢いをつけられる「towel.js」:phpspot開発日誌
towel.js 物体のドラッグ＆ドロップ時に勢いをつけられる「towel.js」。 ドラッグして勢いよく話せば、そのままズズズっとテーブルホッケーのように要素がすべるような効果をつけられます。 どんな場面に使うかはアイデア次第ですが、面白いのでご紹介させて頂きました。 ドラッグ＆ドロップというと、ピタッと止まるものが多いなかでこうした効果を実現しようというアイデア自体もなかなか面白いですね。 関連エントリ ドラッグ＆ドロップで数値の設定が出来る便利ＵＩを実装できる「jquery-drag-spinbox」 対象をドラッグ＆ドロップしてtwitter等にシェアできるプログラムと作成チュートリアル ドラッグ＆ドロップできるサイトマップ作成チュートリアル
多数のパネルをアニメーションでフリップさせるクールなUI実装サンプル:phpspot開発日誌
Sponsor Flip Wall With jQuery & CSS ? Tutorialzine 多数のパネルをアニメーションでフリップさせるクールなUI実装サンプル。 クリックするとパネルが立体的にアニメーションしつつフリップするUIのデモとソースのダウンロード可能です。 PHP、CSS、jQueryを使って実現されているみたいです。 アニメーションは次のように立体的に、詳しくはデモページを参照してください。 多数のパネルからアタリを見つける、的な少し遊び心のあるUIとか、アイデアを駆使して面白いものが作れるかもしれませんね。 関連エントリ これは面白い、jQueryとCSSとPHPで作る福笑いの仕組み
実務で使えるjQueryプラグイン3選 (1/3)
jQueryを使ったJavaScriptライブラリー「jQueryプラグイン」を使うと、Webサイトを手軽に装飾できます。「Web制作の現場で使えるjQuery UIデザイン入門」最終回では、実用性の高いjQueryプラグインを3つピックアップし、それぞれの具体的な使い方を紹介します。 table要素にソート機能を付ける「table sorter」 「table sorter」は、テーブル（表組み）にソート機能を追加できるjQueryプラグインです。大量のデータを表形式で表示したいときに重宝します。 ■利用方法 jQuery本体と配布ページからダウンロードしたtable sorterのプラグインファイル「jquery.tablesorter.min.js」を、利用したいWebページのhead要素内で読み込みます。 <script type="text/javascript" src="jq
Google Wave風インタフェースも作れるJavaScriptのUIキット·UKI MOONGIFT
UKIはJavaScript製のオープンソース・ソフトウェア。Webアプリケーションを作る上ではそのインタフェースが重要な要素になる。ローカルアプリケーションの代わりに使えるレベルとなると、通常のWebサイトとは異なるインタフェースが求められるだろう。 リスト作成＆操作も簡単 使いやすいWebアプリケーションを容易に構築し、さらに開発者にとっても使いやすいUIキットがUKIだ。ボタンやリスト、スライダー、3ペイン構成と言ったオブジェクトを容易に実装し、Webアプリケーションを手軽に開発できるソフトウェアだ。 インタフェースの組み立てだけでなく、アクションの実装についても考慮されているのが特徴だ。プラグインで拡張することもできる。実装は4000行程度で、とても高速に動作する。対応ブラウザはIE6、Opera9、Firefox2、Safari3、Google Chromeからとなっている。 G
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQT