[JS]lightboxの進化形、レスポンシブ対応で画像を拡大表示するスクリプト -SuperBox
lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 SuperBoxの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/superbox.js"></script> Step 2: HTML まずは、基本構造です。 HTML5のdata属性で拡大する画像を指定し、classに「superbox-im
Chardin.js
Chardin.js - Simple and beautiful overlay instructions for your apps.
文字数、段落数、単語数を簡単に数えられるJSライブラリ「Countable.js」:phpspot開発日誌
Countable.js?live word-counting in JavaScript 文字数、段落数、単語数を簡単に数えられるJSライブラリ「Countable.js」 文字数を数えるライブラリは沢山ありますが、段落や単語数までカウントしてくれるライブラリははじめてかも。 文字数、段落のカウントは日本語にも対応しています（単語数は非対応） 文書を書いてもらって送ってもらうような場合の入力補助ライブラリとして使えそうです 関連エントリ 美しくアニメーションさせられる線・棒グラフ描画JSライブラリ「xCharts」 jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」 シンプル多機能なW
JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」:phpspot開発日誌
Fabric.js Javascript Canvas Library JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」 canvasのネイティブAPIは若干分かりづらいという方も多そうですが、このライブラリを使えばオブジェクト指向で楽々Canvasプログラミングが出来そうです 単に便利にコーディングできるようになるだけでなく、オブジェクトをマウスで拡大や回転できるなどといった色々な機能も盛り込まれていて便利そうです ネイティブAPIだと、四角形を描画するのに、次のようなコードを書きます。 これが、Fabric.jsを使うと次のように、とても分かりやすくなります。fillRectの引数の順ってどうだっけ？と毎回リファレンスを牽く必要もなくなりますね 他にもドキュメントを参照すれば、CanvasをネイティブAPIで書く面倒さを理解できるはず デモページも結構充実しており
ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」:phpspot開発日誌
Heyoffline.js ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」 フレームワークレスで動いて、onOfflineとかonOnlineとかのイベントハンドラを設定して、オフライン、オンライン時に処理を実行できるみたい。 スマートフォンなんかで、何かを入力してしまっていて、送信ボタンを押したらサーバがオフラインですっていうのは避けたいところなのでこうした仕組みで送信ボタンのアクティブ状態を変更するのも１つの手ですね 家や会社のパソコンは常時接続でオフラインの心配はなくなった、とおもいきやスマートフォンの電波が悪い状態や地下鉄、といったことを考えるとこういう仕組みは必要かもですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」
ページ内の要素に重力を与えて落下させられるjQueryプラグイン「jGravity」:phpspot開発日誌
jGravity Demo ページ内の要素に重力を与えて落下させられるjQueryプラグイン「jGravity」。 一見なんの変哲もないページだったとしてもボタンを押すと全ての要素に重力を与えてブラウザの下の方に落下させるというエフェクトがかけられます。 「Initiate jGravity」ボタンで重力を与えます。 次のようにアイテムが落下します。 使いドコロは難しいですが、驚きのエフェクトとして覚えておいてもよさそうです 関連エントリ エフェクトが色々選べるイメージスライダー実装jQueryプラグイン「Adaptor」 ターミナルに文字を打ってるアニメーションエフェクトが作れるjQueryプラグイン「Typist」 jQueryでフリップエフェクトを使った良プラグインやサンプル集１０ 画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」
ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」:phpspot開発日誌
Create.js - A new kind of web editing interface ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」。 起動すると、コンテンツテキストが編集可能になり、ページ上のツールバーを使って太字などの文字修飾ができ、そのままSaveボタンで保存できるという非常に使いやすい編集ツールとして使えます CMS等に実装するといいのかもしれません ページ全体をWYSIWYG編集可能にするモードもIEにはあったりしましたが、これは編集させたい部分だけを編集できるようになるという所がよいです。 ページ全体を下手に編集可能にするとデザインが崩れたりして大変であったりしますが、コンテンツ部分のテキストのみ編集可能にすればそういうことがないですね。 関連エントリ HTML5ベースの音声入力可能なWYSIWYGエディタ「wysihtml5
様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」:phpspot開発日誌
NVD3.js :: re-usable charts for d3.js 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 d3.jsという以前紹介したライブラリをベースに利用しているみたい。 グラフ描画のライブラリは色々ありますが、こちらのライブラリで描画するグラフのデザインもなかなかいい感じですね マウスとのインタラクティブなグラフ実装が可能で拡張も容易みたい サンプルページにはソースがついているので参考に組めば抵抗なくグラフが描けそうです 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 クールなドアノブ風の％グラフを描画できるjQuery Knob
[JS]FlashもHTML5も無しで、美しいアニメーションを実装するスクリプト -jCSML
FlashもHTML5もSilverLight, SVGも使わずに、IE7+, iPhone, iPad, Androidで動作するアニメーションを作成できるjQueryのプラグインを紹介します。 jCS Media Library [ad#ad-2] jCSMLの対応ブラウザ jCSMLのデモ jCSMLのダウンロード jCSMLの対応ブラウザ jCSMLの対応環境は下記の通りです。 HTML5非対応のIE7でも、Flash非対応のiPhoneでも動作します。 IE7+ Firefox3.6+ Chrome Safari iPhone iPad Android jCSMLのデモ jCSMLの多彩で美しいデモをいくつか紹介します。 各デモはチュートリアルも兼ねており、コードも一緒に掲載されています。
[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
複雑なキーボードイベントも超簡単実装が可能なJSライブラリ「jwerty」:phpspot開発日誌
jwerty - Awesome handling of keyboard events 複雑なキーボードイベントも超簡単実装が可能なJSライブラリ「jwerty」 例えば次のようなコードによってCtrl+Shift+pのキーにコールバックなどでアクションを指定することが可能です。 // prevents 'ctrl+shift+p''s default action jwerty.key('ctrl+shift+p', false); // outputs "print!" to the console when pressed. jwerty.key('ctrl+shift+p', function () { console.log('print!') }); // will prevent the shortcut from running, only when '#myInput'
QRコードをピュアJSで作れるjQueryプラグイン「jQuery.qrcode」:phpspot開発日誌
jquery.qrcode - jquery plugin for a pure browser qrcode generation QRコードをピュアJSで作れるjQueryプラグイン「jQuery.qrcode」。 通常QRコードというとサーバ側で画像にして画像を送信するというのが一般的ですが、このプラグインはブラウザ上で描画するタイプです。 <div id="qrcode"></div> というマークアップがあったとして、次のようにすることでQRコードを埋め込みます。 jquery('#qrcode').qrcode("this plugin is great"); カメラ等で読み取れば、「this plugin is great」がテキストとして読み取れます。 canvasを使っているので、canvas対応ブラウザでしか動作しない点に注意。 関連エントリ リンクにカーソルを合わせる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryだけでURLをパースするプラグイン「jQuery-URL-Parser」 | Web活メモ帳