デモページ：2（テキスト版） 右側のパネルの切り替えは手動と自動に対応しており、スクリプトのオプションで設定が可能です。 スクリプトのオプションでは次のものなどが設定できます。 切り替えの自動と手動 パネルの表示時間 フェードの時間 ラベルの画像とテキスト ラベルに画像を使用した際、ロールオーバー時の変更はスクリプトの機能に含まれているため、ロールオーバー用の画像を用意するだけで実装されます。
[JS]パネルをフェードで切り替えるシンプルな国産のjQueryのプラグイン -ImageNavigation
デモページ：2（テキスト版） 右側のパネルの切り替えは手動と自動に対応しており、スクリプトのオプションで設定が可能です。 スクリプトのオプションでは次のものなどが設定できます。 切り替えの自動と手動 パネルの表示時間 フェードの時間 ラベルの画像とテキスト ラベルに画像を使用した際、ロールオーバー時の変更はスクリプトの機能に含まれているため、ロールオーバー用の画像を用意するだけで実装されます。
長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。:phpspot開発日誌
長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 2010年09月30日- jQuery One Page Navigation Plugin | Trevor Davis 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 このプラグインを使うと、次のように左カラムにページ番号のように表示して、今どこら辺か？というのを分かりやすく表示し、かつ1ページなのに複数ページに分割することが可能。 使いどころは様々ですが、使い方次第で簡単にページの使い勝手を高めることができそうです。 ナビゲーションをクリックすると、指定したページの位置にアニメーションしながらスクロールされます。 更に、単純にスクロールしているだけで、左カ
関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」:phpspot開発日誌
bxCarousel | jQuery Carousel Plugin 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 次のようなUIでamazonの関連商品を出すような場合に使えそうです。 個々のアイテム自体はulリストで定義するだけなので簡単。 ブログ記事の最後なんかに設置することもできそう 関連エントリ JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル カルーセルやページャ機能がついたYUI 2.6.0がリリース
アナログ時計風のUIで時刻の入力ができるユニークなjQueryプラグイン「cantipi」:phpspot開発日誌
cantipi | Look like clock, work like clock! アナログ時計風のUIで時刻の入力ができるユニークなjQueryプラグイン「cantipi」。 インプットにフォーカスをあてると次のようなアナログ時計が現れ、内側をクリックで時刻の針を、外側をクリックで分数の針を変更することができます。 こういう入力のさせ方もあるのかと感心しました。 最初、一瞬使い方に戸惑う部分があるかもしれませんが、使い方によっては便利な使い方ができるかもしれません。 関連エントリ 時刻の入力に便利なJS入力補助ライブラリ「jquery.timepickr.js」 アナログ時計から簡単に時刻を指定できるJavaScriptライブラリ「Time Picker」
iGoogle風のUIを比較的簡単に実現できる「iNettuts」:phpspot開発日誌
How to Mimic the iGoogle Interface | Nettuts iGoogle風のUIを比較的簡単に実現できる「iNettuts」。 iGoogle風のUIを作成するNettutsのチュートリアルとサンプルコードのダウンロードが可能です。 当然ドラッグ＆ドロップによる移動やソートも可能になってます。 自分で作るとかなり大変そうですが、こうしたものを使うことで誰でも簡単に実現できますね。 解説を読んでもなかなか勉強になりそうです。 関連エントリ Prototype.jsでiGoogleっぽいポータルな仕組みを作れるJSライブラリ「Xilinus」 iGoogleみたいなインタフェースを作成するチュートリアル
jQuery Mobile
jQuery Mobile is no longer supported To read more about the status of the jQuery Mobile project, see the announcement blog post. A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Seriously cross-platform with HTML5 jQuery Mobile framework takes the "w
ファイルのダウンロード前にサイズや種類等を親切に表示できる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
これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム:phpspot開発日誌
これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム 2010年06月07日- Plugins | jQuery Plugins これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム。 なかなかリッチなUIとGoogleカレンダーばりの操作性を持つ便利なスクリプトになっています。 Googleカレンダーに登録するのもよいのですが、ちょっと外部に流したくないこととかも結構あるので、自前で構築したいというニーズもあるのではないでしょうか。 タイムライン上をドラッグ＆ドロップして予定を入れられます。ポップアップがでるので予定を入れます。日本語もOK 見ての通りUIもなかなかいい感じです。 スケジュール管理等に活用できますね。 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-w
ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」:phpspot開発日誌
ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」 2010年05月24日- Senamion.com - multiselect2side (multiple select double side) plugin: documentation and demo page ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」 デスクトップアプリケーションなんかでよくある、使うリスト＆使わないリストを表示する際に便利なUIを実装出来ます。 select ボックス内のアイテムを複数選択して、移動することも出来ます。 ボックスの中身をソートすることも出来ます。 ボタン部分のUIが独特ですが、CSSでリデザインできるようなので安心です。 このUIで、例えば、利用者がWEBサイト
角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」:phpspot開発日誌
Free javascript date picker - popup date picker for websites and web apps - javascriptcalendar.org 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」が公開されています。 次のように可愛いUIがいい感じです。 カレンダーピッカーのデザインもいいものを使いたい際の１つの選択肢として覚えておくとよいかも 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 jQueryを使ったカレンダー型、日付入力補完ライブラリ 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン これは新しい日付ピッカー実装用jQueryプラグイン「calendarPicker」
[JS]Twitterのように残りの文字数をカウント表示するスクリプト -charCount
TwitterのUIのように、入力できるテキストの残りの文字数をカウントして表示するスクリプトをcss globeから紹介します。 Simplest Twitter-like dynamic character count for textareas and input fields デモページ 上記デモページではデフォルト版とカスタム版の二種類があり、デフォルト版は残りの文字数をカウントして表示し、カスタム版は設定した残りの文字数を超えると表示が強調されるようになっています。 スクリプトのオプションでは入力可能な文字数、強調表示する文字数の設定と、カウンターを配置する要素やクラス名やテキストデータを設定できます。 charCountはjQueryのプラグインのため、実装にはjquery.jsが必要です。
画面内に付箋を貼るようなUIの掲示板を作れるPHP＆jQueryなサンプルプログラム:phpspot開発日誌
AJAX-enabled Sticky Notes With PHP & jQuery ? Tutorialzine 画面内に付箋を貼るようなUIの掲示板を作れるPHP＆jQueryなサンプルプログラムが公開されています。 動くサンプルは次のようになっていて、画面にぺたぺたはったような面白いものになっています。サンプルプログラムだけではなく、チュートリアルも公開されています。 デモページ z-indexを調整して、クリックしたものが最前面にくるようになってます。 ノートの追加をする場合のUIもいい感じで、LightBox風の画面があらわれて、色を選べるようになってます。 ちょっとした連絡用に設置したりすると面白いかもしれませんね。
プロトタイプ：AJAXで改良するフォーム入力
ここのところ、Google App Engine上でアプリを作っている私だが、iPhoneアプリとかを作り慣れている私としては、単純なHTMLページの組み合わせでUIを作るというのでは面白くない。そこで、サーバーがModel、クライアントがViewとControllerというアーキテクチャととことん追求してサービスを作っているのだが、そのためにはさまざまなUI部品を作らなければならず、そこにやたらと時間がかかっている。 始めた当初は、「今はオープンソースの時代だからUI部品もオープンなものを集めてくれば済む」と軽く思っていたのだが、実際に使おうとすると不必要に複雑だったり、汎用化されすぎていたりしてそのままでは使えないものが大半。結局のところ、そのまま使える品質のJavaScriptライブラリはjQueryのみで、それ以外は、（１）オープンなものを元にシンプルなものを作り直す、（２）スクラ
テキスト選択後のアクションをポップアップしてくれユーザビリティ向上に使える「Search And Share」:phpspot開発日誌
テキスト選択後のアクションをポップアップしてくれユーザビリティ向上に使える「Search And Share」 2009年12月25日- テキスト選択後のアクションをポップアップしてくれユーザビリティ向上に使える「Search And Share」。 ページ内のテキストを選択するとポップアップメニューが出てクリックで任意のページを開くなどのアクションが設定できます。 動作を説明すると、まず、ページ内のテキストを選択します。 すると、ポップアップが現れて、コピーの他、各種検索サイトに誘導させることができます。 拡大すると以下のような感じです。 ブラウザのコンテキストメニュー拡張みたいですが、これならどんなブラウザでも同じものを見せられます。サイトの内容によっては大きくユーザビリティを上げられそうです。 で、クリックすると、ここからが面白くて、ページの上部からIFRAMEが現れてアニメーション
画像を配列で指定すると紙芝居のように表示してくれるjQueryプラグイン「jQuery UI FlipBook」:phpspot開発日誌
画像を配列で指定すると紙芝居のように表示してくれるjQueryプラグイン「jQuery UI FlipBook」 2009年12月18日- 画像を配列で指定すると紙芝居のように表示してくれるjQueryプラグイン「jQuery UI FlipBook」。 次のように配列でデータを渡してあげると、指定したブロック内を画像の配列でアニメーションさせられます。 サイト上では、世界の天気の移り変わりを画像で動画っぽく表示しているデモが公開されています。 複数ある画像でアニメーションさせたい場合に使えそうですね。 使い方も簡単なので簡単に実装できます。 以下のエントリを参照してください。 jQuery UI FlipBook
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」:phpspot開発日誌
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」 2009年05月28日- jQuery Ribbon - Home これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」。 利用すれば、コントロールのグルーピングや、ドロップダウンメニュー、階層リストなどのリッチなコンポーネントが実装できるみたい。 jQuery Ribbonを使ったリッチなＵＩ。Windows7っぽいデザインのＵＩがJavaScriptで。 アイコン付きのかっこいいメニュー 表示しているＵＩのテーマを選べる アイコンつきリスト アイテムのグルーピング ドロップダウンメニュー ちょっとこれは素晴らしいですね・・・。jQueryの優位性がますます高くなってしまいましたね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
