Peity ? progressive pie charts 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 アイコン感覚で気軽に設置できて使い方次第では情報をわかり易く示すことができそうです クライアントサイドで描画するのでサーバに負担がない点もいいですね データの定義はspanで定義して、 1行で描画。 出力結果。 むちゃくちゃ使いやすいじゃないですか。 関連エントリ ミニグラフ作成ライブラリSparkline
kanazawa.js v1.0 〜JavaScriptコトハジメ〜(2011年2月5日開催)で使用したスライドです。Read less
In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar […] In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically w
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単! スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1)HTMLを書くだけでモバイルアプリケーションができてしまう 2)モバイルのユーザーインターフェイス対応の部品が多く揃っている 3)iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
バナーを一定期間で別のバナーに切り替えられるjQueryプラグイン「imBannerRotater」 2011年01月19日- JQuery Plugin: imBannerRotater | GrasshopperPebbles.com バナーを一定期間で別のバナーに切り替えられるjQueryプラグイン「imBannerRotater」。 サイトに設置するバナーなんかを例えば5秒ごとに切り替えつつ、画像だけではなく、リンク先もちゃんと変えたい場合に使えるプラグインです。 限られたスペースを使い、複数のプロモーションを行うのに便利です。 デモはこちら 広告の画像URL,リンク先URLはjsonで返すこともでき、サーバ側で広告データを管理することも出来ます。 jQueryで比較的綺麗で容易に実装できるのはいいですね。 関連エントリ 便利なjQueryプラグインいろいろ ナビゲーションのUIは
サイトの使い方をその場でアニメーションしてチョートリアルさせられる凄いjQueryプラグイン「Embedded Help System」 2011年01月20日- Embedded Help System サイトの使い方をその場でアニメーションしてチョートリアルさせられる凄いjQueryプラグイン「Embedded Help System」。 これはかなり便利かもしれません。クリックすると、その場でマウスポインタが現れ、アニメーションと吹き出しでサイトの使い方を教えてくれちゃいます。 普通は、こうして次にああして、と文書での説明になりますが、これだとビジュアルに視覚的に分かるということで非常に分かりやすいものが作れますね。 デモページで左カラムの「How to...」の下にあるメニューをクリックで確認してみましょう。 更に、アニメーションだけではなく、UIの上に、[ 1 ] [ 2 ] [
画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」 2011年01月21日- pictureMenu 画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」。 マウスカーソルを合わせるとメニューの幅がニュイーンと伸びるUIが作れます。 動きがなかなかクールなので、うまく画像と組み合わせることでカッコいいサイト作りに役立てられそうです。 次のような比較的整ったHTMLコードを初期化する感じです。 デモはセンスがいいとは言えないかもしれませんが、工夫すればかなりカッコよく出来そう。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 ビローンと伸びるドロップダウンメニュー実装jQueryサンプル クールにアニメーションする色合い様々なjQueryメニューサンプル色々
Pina たった1行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」 pina(20, 'blue', 'classname1'); のようにするだけで角丸が実現できます。 IE6のような古いブラウザにも対応しているのが特徴。 CSS3になって対応ブラウザでは便利になったとはいえ、クロスブラウザ対応というと1行では実現できないので、利用を検討してみてもよさそうです。 pina 関数の第一引数の値で角丸のradiusサイズを指定できます。 関連エントリ CSSで角丸テクニック25 IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル
アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」 2010年11月29日- jQuery.superselect アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」。 以下が普通のselect ですが…。 使用後は次のようにファンシーな感じに。 なんかページデザインとselectボックスのデザインに統一感がないというようなケースや、アイコンを付けてわかりやすく選択してもらいたい場合に使えそうですね。 <option>タグのrel属性にアイコンを設定しておいて、$(element).superselect() とやると実現できるみたいです。 関連エントリ デザイン性に優れたクリエイティブなフォームデザインのサンプル集 斬新なコメントフォームデザイン集
最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」 2010年12月06日- jQuery Apple Effect 最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」。 最近Appleのサイトを見たことがある方なら分かると思いますが、最初に1枚の画像を表示しておいて、ナビゲーションなんかは少し待たせて、フェードインしながら表示するというカッコいい効果を作れます。 最初に1枚の画像を表示 フェードインしながらナビゲーションを表示する こちらのデモで動きを確認 実装は1行。 $('#target').appleEffect(); オプションを渡すことでアニメーション開始までの時間を設定したり、コールバック関数を指定できたりします。 ちょっとめんどくさそうなこの機
Fixed Center jQuery plugin David's Web Development Blog 1行でエレメントを縦・横センターに配置できるjQueryプラグイン「Fixed Center」。 $(element).fixedCenter(); のようにエレメントを指定するだけで要素をセンタリング出来ます。 難しいことを考えなくてよくて1行で指定できるので覚えておくと便利かも。 関連エントリ jQueryを使って画像の上にコンテンツをクールにアニメーションされてオーバーレイ表示するサンプル フォームに簡易電卓を組み込める「jQuery Calculator」 30近いウィジェットがセットになったjQueryプラグイン集「Wijmo」 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」
他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」 2010年12月09日- dhlavaty/jQuery-SmartColumnScroller - GitHub 他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」。 通常、複数のカラムがあると、どちらかの縦の長さが長いので、下の方にスクロールしていくとどちらかが見えなくなってしまいます。 たとえば、ブログ等だと左カラムの記事部分が長くなりがちです。メインである記事を読み終えた後は、スクロールしたことで右カラムの内容も綺麗になくなっていますね。 左カラムが縦長の場合、右カラムに空白が出来てしまう このプラグインを使えば、右カラムが見えなくならないよう、右カラムがうっとうしくない具合に付いてきてくれま
What is Highslide JS? Highslide JS is an image, media and gallery viewer written in JavaScript. These are some of its advantages: Tip! Use the visual Highslide Editor to set up your Highslide installation without writing code. Quick and elegant looking. No plugins like Flash or Java required. Popup blockers are no problem. The content opens within the active browser window. Single click. After ope
ファイルのダウンロード前にサイズや種類等を親切に表示できるjQueryプラグイン「jDownload」 2010年06月08日- jDownload - A jQuery plugin to assist file downloads ファイルのダウンロード前にサイズや種類等を親切に表示できるjQueryプラグイン「jDownload」。 ファイルのダウンロードというと、ブラウザによってはいきなりダウンロードが始まったりするブラウザもありますが、jDownloadを使えば、ダウンロードの前に、ファイル名/MIMEタイプ/ファイルサイズをダイアログで表示して、確認後にダウンロードを実施してもらうということが出来ます。UIとしては次のような感じで、ちょっぴりクールなダイアログになってます。 タグ的には、「<a href="ファイル" class="download">ダウンロードはこちら</a
gameQueryはJavaScript製/jQueryプラグインのオープンソース・ソフトウェア。iPhoneでストリートファイター4が発売になったと話題になっている。最適化処理が行われているのだろうが、意外とiPhoneでも遊べるレベルで動作する。アクションゲームまでこなせるようになるとiPhoneの可能性は飛躍的にあがりそうだ。 なんとストリートファイター系! しかしもっと手軽に遊びたいならばWebブラウザベースで動作する方が良さそうだ。Webブラウザで動くゲームと言えば、これまではFlash製のものが多かった。だがこれからは違う、JavaScriptでゲームが作れるようになる。それを実現するのがgameQueryだ。 gameQueryでまず目を引かれるのがストリートファイター風ゲーム「JavaScript Fighter」だろう。デモなので自分で動かすことはできないが、二人のキャラ
jQueryをよく使う人に使えそうな7つのチートシートがまとまっています。 内容が被ってしまう部分もあると思いますが、7種類の中から自分が使いやすいものを組み合わせて置いておくと便利ですね。 ajaxブームの2005年から4年。すっかりjQueryが地位を確立してしまった感がありますね。 以下のエントリを参照してください。 7 jQuery Cheatsheets For Every Designer & Developer to Have | TutZone 関連エントリ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い GoogleMapみたいに画像をズーム&グリグリ移動できるjQueryプラグイン「Mapbox」 少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」 jQuery用のGUIコンポーネントプロジェク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く