GitHub - maynard88/ExportToExcel: jQuery Client Side Excel Export Plugin Library ブラウザでExcelデータを吐き出せるjQueryプラグイン「ExportToExcel」 ブラウザ上で吐き出すのでサーバにやさしく使えそうです 関連エントリ ページ内にお手軽にExcelスプレッドシート風UIを入れられる「jExcel」

heyadem/stackgrid.adem.js GitHub demo コンテンツをレンガ状にどんどんスタックして配置していける「stackgrid.adem.js」 レイアウト後のコンテンツ追加や、コンテンツ幅の変更、アイテム間マージンの変更等もアニメーション付きで出来るすぐれものです。 流行りのレイアウトなので実装の際は１つの選択肢に出来そうです 関連エントリ CSSドリブンなレンガ状レイアウト作成JSライブラリ「Salvattore」 image, iframeをlazyloadしてロード時の関数を指定可能な「Lazyload Images」

Responsive tables ナイスなレスポンシブなテーブル実装jQueryプラグイン「Responsive tables」 レスポンシブなテーブルというと、どうせ何か削るんでしょう、と思うところですが、主要項目を隠しつつも、見たい項目を選択して表示できるレスポンシブ方式。 テーブルは悩みどころではありますが、１つの解決策として知っておくとよさげ。 デザインもBootstrapベースで使いやすそうです 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」 クールに実装できるレスポンシブなモーダルダイアログ「Remod

ScrollIt.js by @ChrisPolis スライドショーのようなページが作れるjQueryプラグイン「ScrollIt.js」 ↑↓キーでページがスクロールし、かつナビゲーションメニューも備えたようなページが作れます 何らかの製品等の紹介サイトを１ページでサクっと作りたい場合に使いやすく、分かりやすいページが作れて便利かも ページごとダイナミックに切り替わるあたりもクールでモダン。 関連エントリ 縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」 アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」 スクロール

Unirest - Simplified, lightweight HTTP libraries in multiple languages POSTやファイルアップロード等がPHPから簡単に行えるHTTPライブラリ「Unirest」 かなり簡単なコードでHTTPの操作が可能になるライブラリのご紹介。PHPだけじゃなくて、Java、Ruby、Pythonの他、Objective-Cにも対応。 次のようなコードで簡単にPOST操作ができます ファイルアップロードも簡単。。 これは知っておくと楽ができそうですね 関連エントリ 軽量で便利に使えるPHP用DB操作ライブラリ「Medoo」 レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」 PHPのエラー画面をリッチにしてくれるライブラリ「PHP Error」

Drop-Down Navigation: Responsive and Touch-Friendly Osvaldas Valutis レスポンシブでクールなドロップダウンメニュー実装例 次のようなレスポンシブなドロップダウンメニューのデモです。デモページはこちら。 シンプルですがかなり良い感じに動いているみたいです。 そのまま使うのもいいですし、１から実装する際の参考にしてみてもよいかもしれませんね。 関連エントリ レスポンシブな画像ギャラリーが作成できるjQueryプラグイン HTMLメール用のレスポンシブテンプレート「Antwort」 レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 レスポンシブなパララックス効果付きサイトを作るフレームワーク「Coo

Dropzone.js ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」。 最近ではあたり前になってきているドラッグ＆ドロップのアップローダーが簡単実現出来ます。 同時アップロード数やアップ時のサムネイルサイズ、フォールバック関数設定等のカスタマイズができるようです 関連エントリ ドラッグ＆ドロップでファイルをアップできるHTML5のデモ jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル 画像アップでインラインで使えるbase64形式に変換してくれる「Duri.me」

typeahead.js Twitter製の高速なオートコンプリート用JSライブラリ「typeahead.js」 ハードコードデータとリモートのデータを両方サジェストできたり、サジェスト部分のテンプレートをいじったりできるみたいです。 オートコンプリート用ライブラリは数あれど、Twitter社製ということで、一度試してみたいものですね Twitterが出すことによって成功したBootstrapですが、こうした高品質な物が使えてしまうのはありがたいことですね 関連エントリ Google風のBootstrapテーマ「GoogleBootstrap」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 Bootstrapで矢印を描くのなら「Bootstrap Arrows」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wy

FnordMetric | Framework for building beautiful real-time dashboards どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」。 どんなデータも次のような美しいUIを持つリアルタイムなグラフにできます。 サイトの会員数、ユニークアクセス数、データ投稿件数等、リアルタイムにデータを見たいような場合に使えそう。 muninなどでもグラフ化できますが、ここまでのUIの美しさとリアルタイム性は備えていないので、リアルタイムに欲しい情報はこれでダッシュボードにして監視すると便利でかっこ良さげ。 Ruby+Redisで書かれていますが、データの表示にはHTML5/JavaScriptのAPIが使えるようです 関連エントリ 世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」 リアルタ

Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ＆ドロップでページ指定が簡単に出来ます。 30までドラッグ＆ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合

PHP Mobile Detect - lightweight PHP class for detecting mobile devices スマホ・タブレットの判別ができるPHPクラスライブラリ「PHP Mobile Detect」。 判別ならば文字列マッチングでもよいという人もいると思いますが、グローバル変数や無駄なマッチングを省くためにこうしたクラスライブラリを活用するのもよいかもしれません。 次のようにコードがシンプルですっきりと読みやすくなります。iPhoneやiPod touch、Android等をマッチングさせるコードは美しくないですね。 どのぐらいメンテナンスされるのかという点がきになったりしますが、そこまでルールが極端に変わることもなさそうですね。 関連エントリ スマホを判別するのに便利なJSスニペット Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独

Calendario: A Flexible Calendar Plugin | Codrops レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」。 次のようなグラデーションが美しいカレンダーのデモとプラグインが共に配布されています。 カレンダーのHTML構造は予め決められており、CSSでデザインされています。 カレンダー機能はシンプルなものですが、コールバック等である程度カスタマイズできそうです。 関連エントリ Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」 カレンダーやDateピッカー関連のjQueryプラグイン20 これは新しい!クールなタイル状の年間カレンダー実装jQueryプラグイン「jQuery Verbose Calendar」

Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集

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画像でマスクを被せつつ色をかぶせているみたいです。 面白いアイデアですね。応

20 Useful jQuery Lightbox Plugins 今こそ知っておくLightbox風プラグイン20+。 LightBoxが登場して7年ぐらい経つんでしょうかね。色々なところで見るようになったLightBoxのインタフェース。 新しいウィンドウを開く部分の軽量化、ポップアップブロック対策などとして広く使われるようになりました。 派生スクリプトも多数出てきていますので、定番からマイナーなものまで、まとまっていて選択の際に便利かも。 そんなこんなで、このブログも7年ぐらいほぼ毎日更新を続けていますが、LightBox登場あたりから7年も経つのかと時の流れの速さを感じています。 関連エントリ CSS3で出来たクールなLightBox実装チュートリアル

gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風

Chrome ウェブストア - BuiltWith Technology Profiler サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」。 サーバに何を使っているとか、PHPを使っているかとか、jQueryとかのライブラリや、Analyticsが入っているかといった情報を一括で表示してくれるChrome拡張。 サイト上でボタンを押すだけで解析することが出来ます。なんだか恥ずかしいですがこういうツールで調べられちゃうので気をつけましょう ヘッダやソースを見れば当然ながら調べられる情報なんですがボタン一発で調べられるっていうのは便利ですね 関連エントリ Vimの分かりやすいチートシートを見れるChrome拡張「Vim Help」 PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 ChromeをiPhoneシミュレーターにできる拡

jQuery jQSlider :: Example Slimple ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」 ブラウザを紙芝居っぽくしたスライドショーが作れます。この手のプラグインでは当然ですが、１ファイルのHTML内に全スライドを書けます。 ブラウザ幅が変わっても伸縮するレスポンシブな仕様になっています ブロック要素内にスライドショーを入れ込んだりもできるようです パワーポイント使うよりもちょっとギークっぽいスライドショーライブラリ。 １つの選択肢として使えそう 関連エントリ レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 フルスクリーン背景がスライドショーになるCSS3サンプル 指定したパスに沿ってテキストが動く斬新スライドショー実装jQueryプラグイン「Scroll Path」 レスポン

10 Free Ajax Upload File Sample With PHP PHPを使ったAjaxファイルアップロードサンプル１０ Ajaxベースのものや、アップしたものを加工できるもの、エクスプローラベースのリッチなものなのが紹介されていて、つくろうとした時にある程度お望みのものがみつかるかも 本番環境で使う場合は認証を実施したり、そもそもセキュリティが考慮されていないものであったりするので、セキュリティ等に気を付けたいところですが、ベースとして使えそう 関連エントリ デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 HTML5を使ったファイルアップロード用プログラム集 HTML5でプログレスバー付きファイルアップロードを実現する例

テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」 2011年11月14日- jQuery Autosize for textarea elements テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」 次のようにテキストを入力するとちょうどテキストにフィットするようにtextareaのサイズが変わります。最初からあまり大きくしたくないけどスクロールさせたり利便性を損なうのは嫌、という場合に使えます。 この手のプラグインは過去にも紹介しましたが、jqueryプラグインなので、必要プラグインを読み込んだら、$('textarea').autosize(); のように初期化しちゃえば使えちゃうというのもいいですね jQue