テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン:phpspot開発日誌
Expanding Textareas jQuery Plugin テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン。 文字の量に応じて自動でリサイズするテキストエリアはブラウザ標準でも付けてもらいたいぐらい便利なのですが、最低の高さを設定したり、リサイズ時のコールバックを設定したりできるプラグインのご紹介。 テキストをいれてなくても最小のサイズが指定できるのは便利。 リサイズされた時のコールバック設定により、現在の行数なんかを表示することもできますね 関連エントリ textareaのキャレットを細かく制御する関連jQueryプラグインまとめ 通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」
テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」:phpspot開発日誌
Columnizer jQuery Plugin テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」。 <div>内にある、<h1>や<p>で構成されただけの文書を初期化すると、新聞風のレイアウトにしてくれます。 マークアップ例 初期化したレイアウト。カラムの幅なんかはclass名指定によって選べるようです。 ちょっと変わったUIにしたい、とか新聞っぽさを出したい時に使えそう 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 アイテムをタイル状に並べる新しいjQueryプラグイ
本をペラペラめくる風UI実装jQueryプラグイン「Booklet」:phpspot開発日誌
Demos - Booklet - jQuery Plugin 本をペラペラめくる風UI実装jQueryプラグイン「Booklet」。 よくあるペラペラめくる風UIを実装できます。めくる領域の縦横サイズを自由に指定できたり、ページ番号を降ったり、スピードやキーボードコントロール等、カスタマイズが容易で小回りが効きそう 使い方によっては単なるリンクでのページ送りの方が分かりやすくなってしまいそうなところに注意ですが、なかなか便利そうです。 関連エントリ ページめくりを実現するためのjQueryプラグイン集 フルスクリーンでページめくりをするUI実装デモ Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」:phpspot開発日誌
CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 2013年02月18日- Textillate.js CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」。 実に様々なテキストアニメーションが実現できてページにアニメーションエフェクトを付けたい際に便利。 CSS3非対応ブラウザは動作しませんが、そもそもスマホ等向けのサイトであれば活用できそう アニメーションの種類が実に様々。 Chromeなどで見るとアニメーションの滑らかさも素晴らしい。 関連エントリ 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストを部分的にカッコよくアニメーションさせつつ切替え可能にするjQueryプラグイン「dynamo.js」 テキストを燃え上がら
シンプルデザインが使いやすそうなソーシャルカウンター「SocialCount」:phpspot開発日誌
filamentgroup/SocialCount GitHub シンプルデザインが使いやすそうなソーシャルカウンター「SocialCount」 Facebook, Twitter, Google に対応していて次のようなデザインでのソーシャルカウンタが実装できます CSSベースなのでお好きにデザインをカスタマイズすることも出来そうですね。 最近では必須ともいえるこうしたボタンも、自由にデザインしたい場合に覚えておくと使えそう 関連エントリ 5KBの読込でソーシャルボタンの実装が簡単にできる「Socialite.js」 ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」 Facebook,Twitter,Google＋の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」 円形に広がるソーシャルシェアボタン実装jQue
textareaのキャレットを細かく制御する関連jQueryプラグインまとめ:phpspot開発日誌
textareaのキャレットを細かく制御する関連jQueryプラグインまとめ ちょっと調査をする必要があったので調査したのですが、あとで忘れそうなのでブログに書きつつシェアです。 textarea内のカーソル位置に何かテキストを入れたい、今のtextarea内でのカーソル位置を知りたい、といった場合、クロスブラウザの事を考えると結構面倒なのですが、そういう際に使えるjQueryプラグイン集です。 カーソル位置にタグを挿入したりする場合なんかに覚えておくとサクっと実装できて良い感じです。 caretPos http://d.hatena.ne.jp/tubureteru/20110101/p1 textarea内でのカーソル位置を数値で設定したり、カーソルの位置を取得することが可能。 jCaret http://www.examplet.buss.hk/jquery/caret.php te
アイテムベースのスクロールを実現できるjQueryプラグイン「Sly」:phpspot開発日誌
Sly - jQuery plugin アイテムベースのスクロールを実現できるjQueryプラグイン「Sly」。 通常スクロールバーを動かすとブラウザがスクロールしますが、Slyで初期化したエレメント上でホイールを動かすとアイテムが横にスクロールする、みたいなUIが作れます。 ホイールだけではなくて、横に長いコンテンツのスクロールやページ送り、アイテムの追加等ができます。 応用して面白いインタフェースが作れそうです。 文書を入れてみた例。自動でスクロールさせたり、メインのコンテンツをハイライトしたりすることも出来るみたい 関連エントリ スクロールすると巻物風にコンテンツが回転するUIを作れる「FoldScroll」 ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ラ
拡大可能なGoogleAnalytics風のグラフを描画するJSライブラリ「envision」:phpspot開発日誌
envision - demos 拡大可能なGoogleAnalytics風のグラフを描画するJSライブラリ「envision」。 グラフの特定期間をドラッグ＆ドロップで指定して拡大したり、データのビジュアライズに便利に使えそうなライブラリです。 横に長いグラフだとデータを見るのが大変になりますが、期間をインタラクティブに限定することで見やすくすることが出来ます FlashによるフォールバックでIE6+にも対応しているようです 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル faviconを円グラフにしてアニメーションできる「Piecon」
Tシャツ等の商品の色を自由に変えられるjQueryプラグイン「Product Colorizer」:phpspot開発日誌
Tシャツ等の商品の色を自由に変えられるjQueryプラグイン「Product Colorizer」 2012年10月24日- Product Colorizer 1.1 | A jQuery Plugin Written by Nik Korablin Tシャツ等の商品の色を自由に変えられるjQueryプラグイン「Product Colorizer」 色を選択すると同じ絵柄で色だけを変更することが出来るjQueryプラグインです。 商品をウェブ上でカスタマイズできるようなECサイトなどで使えそうですね。 色部分をクリックで自由に色が変えられます。まあ、色に応じた写真を用意しておくのも手ではありますが、何百通りとかある場合や、自分でカスタマイズするようなシステムの場合は使えそう 仕組みがまた面白くて、次のようにPNG画像でマスクを被せつつ色をかぶせているみたいです。 面白いアイデアですね。応
テキストを部分的にカッコよくアニメーションさせつつ切替え可能にするjQueryプラグイン「dynamo.js」:phpspot開発日誌
テキストを部分的にカッコよくアニメーションさせつつ切替え可能にするjQueryプラグイン「dynamo.js」 2012年10月11日- dynamo.js テキストを部分的にカッコよくアニメーションさせつつ切替え可能にするjQueryプラグイン「dynamo.js」 <p>I wish I could <span class="dynamo" data-lines="modify,mutate,morph,switch">change</span> the text here.</p> のように書いて、初期化してあげると、I wish I could 〜 移行に <span>の data-lines属性で指定した単語をアニメーションさせつつローテーションするカッコいいエフェクトが作れます 切替えスピード等は .dynamo な要素の data-属性を切り替えることでカスタマイズが可能です
アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」:phpspot開発日誌
アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 2012年05月30日- SUPERSCROLLORAMA アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」。 動きについてはサイトを見ていただくとよく分かります。 マークアップは至って普通の文字列なんですが、１個１個切り離してタイムラインアニメーションしちゃうということをやってます かなり細かいところまでアニメーション制御が可能で、そのままぺたりと使うもよし、動きにこだわってもよしな感じです 関連エントリ faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon」 アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyB
美しいデザインのポップアップダイアログを表示できるjQueryプラグイン「Messi」:phpspot開発日誌
Messi, simple jQuery message plugin 美しいデザインのポップアップダイアログを表示できるjQueryプラグイン「Messi」。 次のようなOSのダイアログライクなポップアップを同一ウィンドウ内に表示できるプラグインです。 ダイアログは alert, window.confirm 等に対応した物が利用できます。デザインのカスタマイズにも対応 同様のライブラリは色々ありますが、CSS3を使っている物はあんまり無かったかもですね。 関連エントリ 超カッコいい確認ダイアログをjQueryで実装するチュートリアル 効果音付きでアニメーションするクールなダイアログ実装jQueryプラグイン「Float Dialog」
Googleマップ関連のjQueryプラグインとチュートリアル集:phpspot開発日誌
11 Helpful jQuery Google Maps Plugins and Tutorials Googleマップ関連のjQueryプラグインとチュートリアル集。 GoogleマップをjQueryで超簡単に使えるようにするプラグインがまとまっており、簡単に地図をＷＥＢサービスで扱いたいという場合にサクっと実装できて便利そうです。 プラグインの選別に使えそうです HTML5やCSS3とGoogleマップを組み合わせたチュートリアル等も掲載されています 関連エントリ スマホやタブレットでGoogleマップ風に使えるパノラマ画像ビューア「PanoJS3」 Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 Googleマップ風のUIを実現できるJSライブラリ「Polymaps」 GoogleマップAPI ver3でGoogleマップを独自にスタイル
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」:phpspot開発日誌
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。 ソート可能にしたり、ストライプなデザインにしたりといったカスタマイズも可能。 実装できるデザイン例。Twitter Bootstrap と組み合わせたテーマ２種類とその他２種類のテーマがデモとして表示されています 意外と手間取るテーブルデザインですが、こうしたものを参考に美しくデザインしたいものですね 関連エントリ CSS3でクールな角丸テーブルを作る例 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイ
コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」:phpspot開発日誌
screenfull.js demo コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」 FullScreen API のクロスブラウザで動作するラッパーライブラリです。 例えば、ページ内に画像や動画があったとしてクリックするとフルスクリーンで楽しめる、的な使い方ができます。 screenfull.request( $('#container')[0] ); のように、screenfull.requrest( element ) でフルスクリーンが開始されます。 フルスクリーン化 フルスクリーンした後のイベントハンドラなんかも設定できるみたい。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル １見の価値あり！なフルスクリーンWEBサイトのまとめ
シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table Sort」:phpspot開発日誌
jQuery Table Sort | The Stupid Table Plugin by JoeQuery シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table Sort」 リッチなUIにするわけでもなく、ただヘッダーをクリックすると内容がソートされる機能を実現するためのプラグインです。 自分でテーブルをデザインしたい方には使い勝手が良いだけでなく超軽量なのもいいです クリックでソート↓ 使い方もライブラリを読み込んだら１行でOKです 関連エントリ アイテムを浮遊させられるjQueryプラグイン「jqFloat」 リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」 コンテンツの折りたたみを楽々実装できるjQueryプラグイン「jQuery Collapse」 ページ全体に広がるスライドショーを実装できるj
要素へのオーバーレイ効果を簡単に実現できるjQueryプラグイン「Simple Overlay」:phpspot開発日誌
要素へのオーバーレイ効果を簡単に実現できるjQueryプラグイン「Simple Overlay」 2012年04月24日- Simple Overlay | A jQuery Plugin For Lightweight, Flexible, and Customizable Overlays 要素へのオーバーレイ効果を簡単に実現できるjQueryプラグイン「Simple Overlay」 ディスプレイをよりリアルに輝いてみせるオーバーレイ効果を簡単に実現できます。$(elem).overlay(options) でOK. 効果は以下の画像のようになります. 画像をディスプレイにそのままうつしたような効果を<img>に適用して画像を綺麗にみせることが出来そうですね。 こういうのが今後も沢山でてきそうですね 関連エントリ アイテムを浮遊させられるjQueryプラグイン「jqFloat」 レス
お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」:phpspot開発日誌
Websanova - wPaint jQuery Plugin お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」 div id="container" の要素があったとして、var wp = $("#container").wPaint([options]); とすれば簡単にHTML5キャンバスを使ったお絵かきウィジェットが作れます。 知識ゼロでこうしたものを作るとなるとかなり大変なものがありますが、簡単に実装できるというのはよいですね お絵かきというのは昔から人気の面白いコンテンツであるわけですが、実装したいってなった時に手軽に参考にできそうです 関連エントリ リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」 高機能なカルーセルを実装するjQueryプラグイン５０まとめ コンテンツの折りたたみを楽々実装できるjQueryプラ
リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」:phpspot開発日誌
pep.jquery.js - put a little pep in your step リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」 ドラッグして移動しながら勢い良く離すと徐々にスピードが弱まるようなドラッグ＆ドロップ要素を実装できます。 スマートフォンでも動作します。 $('#peppable').pep(); ですぐに使えるみたいです 使いどころがアイデア次第というところはあるんですが１サンプルとして知っておくと思わぬアイデアの１要素として使えるかもしれませんね。 関連エントリ 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」 高機能なカルーセルを実装するjQueryプラグイン５０まとめ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」
たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」:phpspot開発日誌
Hammer.js たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」。 タップ、ダブルタップ、ホールド、ドラッグ、トランスフォームといった処理を一手に扱えるようになるライブラリです スマホだけでなく、かなりのブラウザにも対応 使い方は、まずHammerオブジェクトのインスタンスを初期化します。 あとはイベントハンドラを ontap といった形で記述していくだけなので、面倒な事は何一つ考えないでいいです 若干動きが良くない部分もあるみたいですが、今後に期待したいですね 関連エントリ スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」 スマホサイト作成のフレームワーク「iUI」が新しくなっている件 PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 ス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
