jQuery.Shapeshift
jQuery plugin which creates a column based grid system with drag and drop.Details Column Grid System: All items flow from left to right, top to bottom. Drag & Drop: Click and drag elements to move them, even to different containers. Responsive: Resize the browser window so see the grid change with the new dimensions. Works on Touch: Enable drag and drop on touch devices by using the included jQuer
8bitキャラクターを描画できるjQueryプラグイン「EightBit.js」:phpspot開発日誌
Jquery Eight-Bit Plugin 8bitキャラクターを描画できるjQueryプラグイン「EightBit.js」。 サイト上の描画ツールを使ってドット絵を描いて、そのドット絵を描画できるというもの。画像ではなくCSSなため、拡大してもうまい具合に８ビット感が出せます。 ボタンを押すと、グラフィックをコード化したものが出力されるのでそちらをデータとして描画できます なかなか面白い仕組みですが、画像の変換ツールなんかが出てきたら実用的ですかね 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 クールなドアノブ風の％グラフを描画できるjQuery Knob XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon
ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」:phpspot開発日誌
ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」 2012年05月17日- Koottam Social jQuery Plugin | Customized Facebook, Twitter, Google Buttons Using Cross Browser CSS3 ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」 Twitter, Facebook, Pinterest, Google+ などのソーシャルシェア数を表示しつつデザインを統一できるjQueryプラグインです。 いろんなサイトのソーシャルボタンを設置するとどうしてもダサくなってしまうのですが、これを解決できますね。シェア数も表示できていいです 関連エントリ Facebook,Twitter,Google＋の独自デザイン
[JS]既存のサイトをタッチデバイス対応にするスクリプト -Mobilize.js
ウェブページにスマートフォンでアクセスされたら自動検出し、そのページのレイアウトを変更・タッチデバイス対応にするjQuery Mobileを使用したHTML5ベースのフレームワークを紹介します。 Mobilize.jsでスマートフォン対応にするイメージ 見出し、ナビゲーション、コンテンツはそれぞれ細かく指定することができます。 Mobilize.jsの主な特徴 Mobilize.jsは、クライアントサイトでウェブサイトをスマートフォン対応にするHTML5のフレームワークです。 インターフェイスはjQuery Mobileベースでタッチデバイスに最適化。 自動的にモバイル用ブラウザを検出。 インテグレートが容易 -サーバーサイドの変更は必要ありません。 オープンソース -高価な費用は必要ありません。 Mobilize.jsの対応デバイス Mobilize.jsは、以下のモバイル用のブラウザを
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
jQuery製で手軽に使えるHTML5による画像のドラッグアンドドロップアップローダー·Droparea MOONGIFT
DropareaはHTML5/jQueryで画像のドラッグアンドドロップによるファイルアップロードを行うライブラリ。 DropareaはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5によって大きく改善されたWebの機能の一つがファイルアップロードではないだろうか。複数のファイルがアップロードできるようになったり、ドラッグアンドドロップでもアップロードできるようになった。 アップロードするとすぐにサムネイルが表示される ドラッグアンドドロップでのアップロードとしてはGmailが有名だが、ファイルを持っていってはじめてドロップできることに気づくのでは使い勝手が良いとは思えない。それをもう少し分かりやすくしたのがDropareaだ。 DropareaはWebページに写真をアップロードするjQueryプラグインだ。特徴としてアップロードできる部分があらかじめ指定されて
[JS]リスト要素の一部をアニメーションで表示・非表示させるスクリプト -aPartHide | コリス
長いリストを省スペースに設置するのに便利なリストの一部を非表示にし、隠したアイテムをアニメーションでスライド表示させるjQueryのプラグインを紹介します。 aPartHide デモ [ad#ad-2] 非表示にするアイテムの数は設定が可能で、デモでは七つのアイテムを配置したリスト要素の初期状態では3アイテムだけ表示し、「more」をクリックするとすべてのアイテムが表示されます。 また、全アイテムを表示した状態で、「less」をクリックすると3アイテムのみ表示されます。 aPartHideの実装 HTML リスト要素をdiv要素で内包し、表示・非表示用のdiv要素を配置します。 <div id="box1" class="demo"> <h3>Demo</h3> <ul> <li>Demo list item 1</li> <li>Another list item</li> <li>Th
少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする
列全体がクリック可能で、Wikipediaに飛びます。セル内にアンカータグが含まれている場合はそちらが優先されます。Webサービスの料金プランなんかに使えそうでは。 jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind('click'); }, function() { $(this).parents('tr').click( function() { window.location = $(this).attr('data-href'); }); });
さまざまなタイプのスライドショーが簡単に設置できるスクリプト -Agile Carousel | コリス
一つ一つの完成度が高い、アニメーションを伴ったさまざまなタイプのスライドショーが簡単に設置できるjQueryのプラグインを紹介します。 Agile Carousel - Javascript Slideshow - Image Carousel [ad#ad-2] Agileは以前ちらっと紹介しましたが、つい最近バージョンアップしたので改めて紹介します。 以前のバージョンではjQuery UIも併用するタイプでした。 Agile Carouselには、下記のさまざまなタイプのスライドショーが用意されています。
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery
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対応ブラウザでしか動作しない点に注意。 関連エントリ リンクにカーソルを合わせる
デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」:phpspot開発日誌
デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 2011年03月22日- jQuery File Upload Demo デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 ファイルアップロード用のプラグインはよくありますが、このプラグインでは、デスクトップにあるファイルをブラウザにそのままドラッグ＆ドロップでファイルアップロードが完結します。 ダイアログからいちいちファイルを選択して、というUIは使いづらいですが、これなら直感的に、初心者でも簡単にファイルをアップロードすることが可能になります。 尚、Firefox、Chromeで動作。IEでは動きませんでした。 デスクトップからファイルをドラッグすると枠がニュイーンと広まって、ドロッ
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」:phpspot開発日誌
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 2011年01月31日- Activity Indicator 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」。 通常こうしたローディングイメージを実装するにはアニメーションgif等で対応しますが、このプラグインを使うと、画像なしに綺麗なアニメーション付きの読み込みエフェクトを実装出来ます。 SVGやVMLを使ってクロスブラウザで動作するように設計されており、なんとIE6等でもＯＫだそう。 背景が何色だって気にする必要もありません。 関連エントリ クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoade
使いやすくデザインもよい星型レーティング実装jQueryプラグイン「jRating」:phpspot開発日誌
MyjQueryPlugins : jRating - Ajax rating system with jQuery 使いやすくデザインもよい星型レーティング実装jQueryプラグイン「jRating」。 デザインは次のように、綺麗な星のデザインになっており、個性が強すぎず、弱すぎずという感じで汎用に使えそうです。 isDisabledオプションを true にすると、星だけ表示して投票禁止にすることも出来るので、ログインユーザのみに限定したい場合なんかにも使えそうです。 更に次のような小さな星にすることも出来ます。 次のように、成功、失敗時のイベントハンドラを設定することも可能。 $(".exemple6").jRating({ onSuccess : function(){ jSuccess('Success : your rate has been saved :)',{ Horiz
アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」:phpspot開発日誌
アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」 2010年11月29日- jQuery.superselect アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」。 以下が普通のselect ですが…。 使用後は次のようにファンシーな感じに。 なんかページデザインとselectボックスのデザインに統一感がないというようなケースや、アイコンを付けてわかりやすく選択してもらいたい場合に使えそうですね。 <option>タグのrel属性にアイコンを設定しておいて、$(element).superselect() とやると実現できるみたいです。 関連エントリ デザイン性に優れたクリエイティブなフォームデザインのサンプル集 斬新なコメントフォームデザイン集
画像を今風にプレロードするjQueryプラグイン:phpspot開発日誌
How to Create an Awesome Image Preloader | Nettuts 画像を今風にプレロードするjQueryプラグイン。 画像をプレロードするというと、new Image してsrc に指定とかCSSで見えないようにしてロード等いうのが昔は一般的でしたね。 紹介されている jQueryプラグインを使うことで、画像の表示位置にローディングアニメーションを付けつつ、画像が読み終わったらフェードインアニメーションで表示という、今風な感じでロードできるようです。 デモページ 画像を読み込んだ後のコールバック関数を指定することもできるので、更にこれから何かをしたいという場合にも便利。 関連エントリ 画像ギャラリーを作る際に便利に使えそうなjQueryの画像ギャラリー実装プラグイン37種 これはいい！iPadテーマのjQuery画像ギャラリー 画像にぼかし効果を与えられ
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」:phpspot開発日誌
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 2010年11月29日- JQUERY BUBBLE POPUP v.2.3.1 - display animated and shadowed "bubble" popups with few lines of code in jQuery カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 カーソルを合わせた際に、単にポップアップするのではなく、ポップアップ自体がフェードインアニメーションしながら動きをもって表示されることでより、利用者の注意をひくことができそうです。 見た目も影付きでカッコいいのが特徴です。 デザインは選べます。 何かにカーソルを合わせた時だけじゃなくて最初から特定のエレメント上に表示しておくこともでき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
会社ロゴマーク デザインアーカイブ
jQueryだけでURLをパースするプラグイン「jQuery-URL-Parser」 | Web活メモ帳
IDEA * IDEA
