レスポンシブなjQueryスライダー実装プラグイン８個:phpspot開発日誌
8 Responsive jQuery Slider Plugins | Resources レスポンシブなjQueryスライダー実装プラグイン８個 多様化するデバイス環境の中、レスポンシブの簡単さと柔軟さは今後はWEBデザイナーさんの常識となってくると思いますが、レスポンシブな仕組みを使ったスライダー実装プラグインです。 今後はプラグインもレスポンシブがデフォルトなんていう時代になっていくんじゃないかと思っています。 iPhoneに対応したらそのまま使えないプラグインって微妙〜、という感じになっちゃうかも。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 次世代のイメージマップを実現できるjQueryプラグイン「ImageMaps
Youtube動画をページ背景にするjQueryプラグイン「tubular」:phpspot開発日誌
tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design Youtube動画をページ背景にするjQueryプラグイン「tubular」 こんなことが出来ちゃうのかという感じですが、ページ背景全体をYoutube動画にできます。 実装は、$('body').tubular('_VKW_M_uVjw','wrapper'); のように、tubular にvideoIDの引数とラッパーのIDを渡せばOK。 背景をクリックで動画にとんじゃいますが、ホスティングしてもらってるわけなのでしょうがないですね。 コンテンツ領域は問題なくクリックできるところがナイスです。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 時間の入力を楽にすることが出来るjQuer
impress.jsライクなダイナミックなプレゼンテーションを作成するjQuery依存タイプのライブラリ・jmpress.js - かちびと.net
なかなか斬新なプレゼンを作成出来る事で ちょっと話題になった impress.jsという jsライブラリがあるんですが、これのjQuery 依存型があったのでご紹介します。元々 jQueryを使用しているサイトならこちら のほうが導入が楽かもですね。 3Dなプレゼンを作成出来るライブラリ、impress.jsのjQuery版です。impress.jsに関しては以下をご参照下さい。 3Dで斬新なプレゼンが作れる『impress.js』の使い方をざっと説明してみるよ で、このjQuery依存型が出てきました。 デモを作りたかったんですが、昨日今日は少し時間がなくて出来ませんでした。というわけで公式のデモをどうぞ。 Sample もちろんキーボードでも操作できますし、impress.js同様にハッシュチェンジイベント対応済みです。 コード <script type="text/javascrip
画像のズーム効果、画像の一部を拡大表示｜jQuery plugin｜Ajax｜PHP & JavaScript Room
jQueryを使用して、簡単に画像にズーム効果を付ける方法が掲載されています。 使用する画像は原寸大の画像1枚。 img要素のwidth/height属性にサムネイル表示時のサイズを指定しておきます。 サムネイル画像にマウスがのった時に、画像をサムネイル表示時よりCSSで画像サイズを25%大きくするアニメーションを行い、z-indexをあげて他の要素より上に表示するようにしています。 マウスが離れた時に、CSSで画像サイズを元のサイズに戻すアニメーションを行い、z-indexを元に戻す方法がとられています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
jQueryのカルーセル系プラグイン・Caroufredselだけで「こんな事も出来るよ！」をまとめたサイト・Cool Carousels - かちびと.net
Caroufredselという、結構人気なプラグイン があるんですが、このプラグインの開発者が 応用例をサンプルソース付きでまとめてくれ ていましたのでご紹介。1つのプラグインで ここまで出来るってちょっと凄いですね。 もう少し軽量になってくれると嬉しいんです けど・・ カルーセル系プラグインの定番的なライブラリ、Caroufredselの応用例を開発者さん本人がまとめてくれていました。もともと沢山例があったんですが、更に一歩進んだ使い方を紹介してくれています。サンプルはダウンロードできます。
2011年にリリースされた、使えるjQueryプラグイン50「The 50 Most Useful jQuery Plugins from 2011」
2011年にリリースされた、使えるjQueryプラグイン50「The 50 Most Useful jQuery Plugins from 2011」 WEB制作の現場で利用されているjQuery。非常に軽量かつ、高機能なjavascriptライブラリで、世界中で様々なプラグインがリリースされていますが、今日紹介するのは2011年にリリースされた、使えるjQueryプラグインをまとめたエントリー「The 50 Most Useful jQuery Plugins from 2011」です。 Response Javascript 全部で50ものプラグインがまとめられていますが、今日はその中から特に気になったものを紹介したいと思います。 詳しくは以下 Minimit 様々な動きが実現できるjQueryギャラリープラグイン。 Overscroll スマートフォンやタブレットの操作感をWEBで実
組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」:phpspot開発日誌
jQuery Org Chart ? a plugin for visualising data in a tree-like structure The Silver Lining 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」 次のような組織図を作ることができます。ドラッグ＆ドロップでインタラクティブに再配置することも可能です ドラッグ＆ドロップで再配置可能 気になるマークアップですが、ul, li を階層的に記述するだけでよいものになっています。これを上記のようにビジュアライズしてくれるのは楽ですね 関連エントリ アニメーションするスピードメーターを実装できるjQueryプラグイン「Speedometer」 複数要素の関連をビジュアライズできるライブラリ「arbor.js」
テーブルを直接編集できるjQuery.TableEditorプラグイン
テーブルを直接編集できるようにするjQuery.TableEditorプラグインを紹介します。 １．サンプル 以下のリンク先にサンプルを用意しました。jQuery.TableEditorプラグインの動作を確認できます。 サンプル 「編集」をクリックすれば、テーブルのセルがテキストフィールドに切り替わります。 「保存」をクリックすれば、テキストフィールドに入力した値がテーブルに表示されます。入力した値は保存時に起動する関数を利用してデータベースやファイルに保存できます。 ２．プラグインのダウンロード TableEditorのページから「tableEditor」と「tableSorter」をダウンロードします。 TableEditor ３．jquery.tableEditor.jsの修正 ダウンロードしたjquery.tableEditor.jsはjQueryの最新バージョン（2011年11月
jQueryの便利に使えるスニペット１０:phpspot開発日誌
10 awesome jQuery snippets | CatsWhoCode.com jQueryの便利に使えるスニペット１０。 次のような使えそうなスニペットが１０個あります 画像のプレロード rel="external"なリンクのtarget="_blank"化 アンカーへのスムーススクロール divカラムの高さを合わせる CSSプロパティに対応しているかテストする URLのパラメータを得る フォームでEnterキーを無効にする よく使う処理は覚えておくとよさそう 関連エントリ コンテンツをページ内でハイライトしつつ切り替えられるjQueryデモ iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」 ギャラリー等を面白く見せられるjQu
注目！サーバサイドからjQueryを使ってDOM操作·nodeQuery MOONGIFT
nodeQueryはnode.js用のサーバサイドjQueryで、サーバサイドでクライアントサイドのDOMを変更できたりします。 node.jsでjQueryライブラリを読み込むと、jQueryが提供するメソッドを使えますが、さらに一歩進めたのがnodeQueryです。サーバサイドからクライアントサイドの描画を変更できたりしてとても面白い実装ができます。 インストールはnpmで行います。 まずサンプルのブログです。普通に表示されているのが分かります。 サーバサイドです。node.jsのスクリプトの中でHTMLタグを出力しているのが分かります。構文にjQueryが使われているのも分かります。 ブログの新規投稿です。 投稿できました。 Twitter検索です。 時間が更新されるデモです。サーバサイドの時間であるのがミソです。 サーバサイドのソースです。 nodeQueryを使うとサーバサイドと
スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと.net
題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか？え、無いの・・じゃあいらないかｎ Sample まぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックすると回転するんですがこれはcss3のkeyframeとanimateでうごかｓ、あ、どうでもいいですよね。 IE6/7 IEで
jQuery 1.7の on() off()について調べてみた | バシャログ。
新しいチャリを手に入れたら歯車や金属のバーを眺めてニヤニヤするようになったminamiです。 11/3にjQueryの最新バージョン1.7がリリースされました。大小さまざまな機能追加がされましたが、その中でもかなり大きな「.on()」「.off()」というイベントAPIが追加されましたが、今までのイベントAPIとどう違うのかいまいちわからなかったので調べてみました。 「.on()」「.off()」の使いどころ jQueryには今までのバージョンにも、「.bind()」「.live()」「.delegate()」といったイベントAPIがありました。今回追加された「.on()」「.off()」はそれら3つの機能をカバーしたメソッドになります。 「.bind()」「.live()」「.delegate()」については今後も利用できますが、「.on()」「.off()」の使用が推奨されていくようで
長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」:phpspot開発日誌
NeoAlchemy Table Pagination 長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」 縦に長かったりするとテーブルは読みにくかったりしますが、このプラグインで初期化してしまえば一瞬でページ分けが完了します ページングするコードは次のように書けばOKです テーブル自体はそのままHTMLを書いておけばいいので楽チンですね。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 中身が画像のselectボックスを作るjQueryプラグイン
jQuery 1.7の更新内容をまとめたよ。 | Ginpen.com
jQuery 1.7が公開されたので、早速1.6.xからの更新内容をまとめてみました。 jQuery: » jQuery 1.7 Released （リリース記事） Version 1.7 – jQuery API （公式ドキュメント、1.7で変更があったもののみ） 1.7 all tickets – jQuery Core – Bug Tracker （1.7の全チケット） リリース記事の翻訳じゃないです。 主な変更点 個人的に気になったものをピックアップしてみますよ。 既存の .bind()や .live()等に置き換わる .on(), .off()を追加 .bind(), .delegate(), .live()が統合されました。（これらも引き続き使用できます。） →詳細後述します。 toggleと.stop()の連携を改善 toggle系と組み合わせた際におかしくなってしまうのが改
HTML5+jQuery製の管理画面を作るためのテンプレート・HTML5 ADMIN - かちびと.net
なかなかユニークだったのでメモ的に。 HTML5+jQueryで使いやすい管理画面を 作るためのテンプレート・HTML5 ADMIN です。管理画面は見た目よりも機能性 のみに焦点が絞られるのでこういった テンプレートは結構貴重ですね。 テンプレートそのものを使う予定は無いですけど、管理画面におけるUI構築は、見た目ではなく、利便性、ユーザービリティのみに焦点が当てられるのでこういうテンプレで学べることも割と多いです。贔屓するわけじゃ無いですけど、WordPressの管理画面は他のCMSやブログエンジンよりはるかに万人に分かりやすく使いやすいように出来ていてとても参考になる点が多いです。機能を意識せずとも使える、というのは秀逸なデザインであるともいえます。 画像だけじゃ全然利便性が伝わりませんがｗ よく使われるUIが一式揃っている、という感じです。fluidレイアウトにも対応。modern
jQuery 1.7 Released | Official jQuery Blog
jQuery 1.7 is ready for download! You can get the code from the jQuery CDN: http://code.jquery.com/jquery-1.7.js http://code.jquery.com/jquery-1.7.min.js This new release should also be available on the Google and Microsoft CDNs within a day or two. Thanks to your help in testing and reporting bugs during the beta period, we believe we have a solid, stable release. If you do find problems, file a
使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」:phpspot開発日誌
使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 2011年11月02日- nicescroll : stylish scrollbars ios look-alike | jQuery Plugins 使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 OSによってスクロールバーデザインが違ったり、常に表示されていたりというのが当たり前でしたが、独自スクロールバーにするのが最近のトレンドっぽいですね。 今回紹介するプラグインを使えばiPhoneのあのスマートなスクロールバーをPCブラウザでも実現出来ます。 エレメントにカーソルを合わせると次のような独自実装のスクロールバーが現れます スクロールすると当然、スクロールバーの位置も変化 時間を置くと勝手にスクロールバーがフェードアウトで消えます。
jsdo.itの最新マイコードをブログに流すjQueryプラグインdoticker.js | ゆっくりと…
Twitter 公式のプロフィールウィジェット のように、jsdo.it で公開したコードをブログでプチ紹介してくれるティッカーのようなものがあればなぁと思い立ち、作りましたので公開したいと思います。Twitter の JavaScript は、スタンドアロンで動作するようにできていますが、そのソースコードを jsbeautifier などで整形すると2000行近くもあり、こんなプログラミングは私にはとても無理です。そこでお手軽に jQuery のプラグインとています。 ほとんど jQuery バージョン 1.0 のルーチンを使っているので、古い jQuery でも動くと思います （1.3.2 までは動作することを確認をしています）。 ブラウザは、IE6 〜 8 (IETesterで）、IE9、Firefox 7、Chrome 15 （いつの間に！）、Safari 5 での動作を確認済みで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
Blogger