画像レイアウト関連で便利なjQueryプラグイン等まとめ:phpspot開発日誌
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
ulで書かれたリストをニュースティッカー風に表示できるjQueryプラグイン「List Ticker」:phpspot開発日誌
ulで書かれたリストをニュースティッカー風に表示できるjQueryプラグイン「List Ticker」 2010年07月12日- Plugins | jQuery Plugins ulで書かれたリストをニュースティッカー風に表示できるjQueryプラグイン「List Ticker」。 通常、リストというとズラズラならんだ表示になりますが、ListTickerを使うことで、１つの要素内でアイテムをアニメーションで切り替えていくような実装にすることが出来ます。 定義するリストは何の変哲もないulリストです。 <ul> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> <li>Fifth Item</li> </ul> 実装は次のように、list_ticker メソッドに speed
1行でエレメントを縦・横センターに配置できるjQueryプラグイン「Fixed Center」:phpspot開発日誌
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」
WEBサービスで使えるPEAR以外で有名なPHPモジュール総まとめ:phpspot開発日誌
WEBサービスで使えるPEAR以外で有名なPHPモジュール総まとめ 「WEBサービスを作るなら最低限覚えておきたいPHPのPEARモジュールまとめ」というエントリで先日PEARの便利ライブラリについてまとめたのですが、今回はPEAR以外でも有名なライブラリをご紹介。 PEAR以外で挙げていくときりがありませんが、とりあえず有名どころや、私の知っている物、過去に当ブログで紹介したものをまとめてみます。 他にも便利な物や定番の物がありましたら、@phpspot_kj までTwitterなんかで教えてください。 グラフ描画 JpGraph ありとあらゆるグラフを描画してくれる有名なグラフライブラリ。 pChart グラフにデザイン性を求める場合に使えるクールなグラフ描画ライブラリ PHP/SWF Charts PHPでグラフをFlashで描画出来るライブラリ。グラフに動きを出してインタラクティブ
Twitterをサイトに組み込むチュートリアル＆サンプル集:phpspot開発日誌
Twitterをサイトに組み込むチュートリアル＆サンプル集。 当サイトにて、色々とTwitterの機能を実装する仕組みを色々と紹介しましたが、それらをまとめてみました。 JavaScript によるTwitterメッセージの埋め込み Twitterのメッセージをページに載せられるJavaScript「Twitter.js」 JavaScript 単体でTwitterのメッセージをサイトに簡単に埋め込み可能 サイトにリアルタイム更新＆検索機能付きTwitter窓を設置できるjQueryプラグイン「Juitter」 画面遷移なしにTwitterステータス表示＆検索ができるウィジェットを設置可能。 PHP製のウィジェットや投稿用サンプルコード等 Twitterのメッセージ表示などができるPHP＆AJAXなブログパーツ実装が可能な「Ptwix」 Twitterのメッセージ表示用のリロード機能付きウ
エントリに脚注を入れる場合に超便利な「jQuery Footnotes」:phpspot開発日誌
jQuery Footnotes | PlanetHolt.com エントリに脚注を入れる場合に超便利な「jQuery Footnotes」。 脚注（きゃくちゅう）とは、ご存知、(※1) とかであとで詳しく補足したりするもののことですが、これをルールにのっとったHTMLとして書いておくことで自動で脚注を作成してくれます。 生成した脚注の例は次のようなもので、[1] とか [2] とかなっていて後ほど説明がはいってます。 このライブラリを使わずにやってしまうと、1と2の間に入れる場合とかに結構厄介なことになったりしそうですが、番号を自動でライブラリが振ってくれるので、ルールに沿って脚注をHTMLとして書いていくだけでOKです。 例えば、<span class="footnote">説明です</span> とか、<blockquote title="説明です２"> とか書いておくだけでOKなの
CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル:phpspot開発日誌
Create Resizing Thumbnails Using Overflow Property | Css Globe This tutorial is aimed at controlling the size of the thumbnails appearing on your page. CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル。 次のように、CSSで画像を固定サイズにトリミング表示できます。 更にマウスオーバーで画像を元サイズに。 実装について見ていきましょう マークアップが次のようにあったとします <p class="thumb"><a href="http://cssglobe.com/"><img src="image.jpg" /></a></p> そして、次のＣＳＳを適用。 p.thumb{ float:left; margin:.5
PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」:phpspot開発日誌
PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」 2009年12月04日- PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」が便利です。 PHPを使っていて、JavaScript もかいているときに、PHPのあの関数をJavaScript で実装したいんだけどなぁ、という場合に索引から牽けて参考になります。 例えば、functions ページには使える関数がまとまっているのですが、array系、ソート系、入力チェック系やオブジェクト指向系、日付、ファイルシステム系、Math系、ハッシュなど実に多数のJavaScript用php関数が掲載されています。 例えば、addslashes だと次のような感じでJSのソースが見れます。 function addslashes (str) { return (str+'').repla
WEBサイトデザインのフィードバック作業が超便利になりそうな「Notable」:phpspot開発日誌
WEBサイトデザインのフィードバック作業が超便利になりそうな「Notable」。 Notableは、サイトのスクリーンショットを撮ってからNotable上のサーバにアップロードし、そのスクリーンショットに、ビジュアルに色々書き込むことが出来るサービスです。 この仕組みがあれば、デザインが完成した後、クライアントさんが、「こことここを直して」っていう作業をWEB上で迅速に、便利に行えて作業の効率化が図れそうです。 画面にNotableのサイト上で注釈をどんどん入れていってる例。 Notableの使い方 それではどうやって使うかを簡単にご紹介。 まず、どうやってキャプチャを撮るか、ですが、Firefox3用のアドオンが公開されていて、インストールするとボタンがブラウザのツールバーに追加されます。 IEやChrome、Safariなどの他のブラウザでも、URLを入力するだけで簡単にキャプチャが取
JavaScriptでクッキーを超簡単に使うライブラリ「Cookie Manager」:phpspot開発日誌
PHPから使えるprototype.jsとscript.aculo.usのラッパークラス「Projax」 次の記事 ≫：WEBマスター/WEB開発者、御用達のサイトリンク集 Cookie Manager | Javascript Code | All Things Webby Initialisation of a CookieManager object: JavaScriptでクッキーを超簡単に使うライブラリ「Cookie Manager」。 JavaScriptでクッキーを扱うのって、いちいちクッキーをパースして面倒だ、と思っていた人は多いのではないでしょうか？ CookieManager.jsを使えば、phpでcookieを使うときみたいに簡単にcookieが使えます。 prototype.jsをベースとしていて、サンプルのコードは次のような感じになります。 サンプルはクッキーを使
DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌
Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50% かつ、margin-top:-50px のようにプロパティをあて、 中央寄せしたい要素(上図中、青い部分)の半分のサイズ分のマージンをマイナスします。 最後に中央寄せしたいdiv要素( height:100px ) を配置することで、青い部分は中央によります。 垂直方向に、100px のdiv要素が配置される感じです。 <html> <head> <style type="text/css">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
