クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
jQueryでスマホサイト向けに画像サイズを縮小する方法
jQueryでスマホサイト向けに画像サイズを縮小する方法を紹介します。 １．サンプル 次のようなPCサイト用のページがあります。この場合、Movable Typeでページを出力しています。ページで使っている記事内の画像サイズは幅470pxです。 このページをスマホサイト向けに別のページを作り、画像サイズを縮小して表示します。画像サイズは幅280pxに縮小しています。 ２．カスタマイズ サイズを変更するには、下記のスクリプトをページ内にあるhead終了タグの直前に追加します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function(){ $('img').each(functio
Web制作をちょっとだけ楽にするjQueryプラグイン 「laquu.js」 | webox blog
知り合いが便利そうなものを作っていたのでご紹介します。 Web制作時によく使う機能をひとまとめにしたjQueryプラグインです。 読み込むjsのファイルが増えてきたり、その都度追加していくのが面倒だなと感じてきていたのでこういうのは非常に助かりますね。 Laquu.js 個人的によく使う機能 アコーディオン ドロップダウン ブランク XHTMLで非推奨とされているtarget属性の代替となる機能です。 個人的にはJSで実装するなら非推奨でも入れてしまいますが… ちなみにHTML5ではtarget属性は復活しています。 スクローラー ページ内リンクのスムーススクロールを実装する機能です。 スクロール2ビュー スクロールを検知して指定要素を表示/非表示してくれる機能です。 イメージオーバー そのうちプリロードしてくれるようにするそうです。 ツールチップ コナミコマンド ネタ機
jQuery Mobileβ3公開でついにフィーチャーフリーズ、今月末にはリリース候補版へ
HTML5をベースにしたモバイルアプリケーション開発のためのJavaScriptライブラリとして注目されている「jQuery Mobile」がベータ版として最後となるβ3を公開。これで機能を確定するフィーチャーフリーズとなり、次はリリース候補版が今月末には登場すると説明されています。 クリーンなURLを採用へ β3で変更された点の1つがクリーンなURLです。これまでAjaxベースのナビゲーションを採用していたため、URLにハッシュ記号が含まれていました。 これがβ3ではAjaxナビゲーションの機能は維持したまま、一部のOSとWebブラウザでクリーンなURLを実現しています。対応するのはAndroid 2.2以上、デスクトップ版のSafari、Chrome、Operaで、iOS5でも対応予定とのこと。 またiOS5ではページ遷移や、スクロールしても画面上に固定位置で表示されるツールバーの表示
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
[JS]jQueryのプラグイン33+1選 -2011年8月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
WebサイトにおけるjQueryの利用率がFlashを上回る
主要なWebサイト約1万8000を対象に、Webサイトの動向を調査している「http archive｣によると、8月15日付けの調査結果ではFlashを用いるWebサイトが全体の47％、JavaScriptライブラリのjQueryを用いたサイトが48％となり、jQueryの利用率がFlashを上回りました。jQueryに特化したサービスを提供している企業appendToが発表しました。 jQuery：48％、Flash：47％ http archiveによると、主要なWebサイトに対するJavaScriptライブラリの調査で、jQueryは48％のWebサイトで使われています。 Webアプリケーションのフレームワークが新たなステージへ jQueryとFlashは、機能が一致する部分と異なる部分をそれぞれ抱えており、必ずしも直接比較できるものではありません。しかしWebブラウザの上でリッチな
画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」:phpspot開発日誌
spin.js 画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」。 あのローディング画像を画像を使わず、外部CSSも使わない方法で実現でいるライブラリです。 パラメータをいじくれば簡単にローディングイメージをカスタマイズ可能です。 独立して動く方式をベースとして、jQueryプラグイン方式で動くコードも公開されているみたいです。 最初は画像だったものが、画像不使用に変化し、ライブラリによってより便利になってますね。 関連エントリ 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ ブロック内コンテンツを読込画像と共にAjaxで読み込ませアニメーション切替えできるjQueryプラグイン「Ajaxloader」
簡単なjQueryコードでリストメニューにフィルタリング機能を加える - かちびと.net
縦長になってしまったリストメニューは非常に 見にくく、使いづらいものです。ECサイトなんか でも頻繁に見かける光景ですが、カテゴリで 分けてもそれはそれで探しにくくなってしまった りと、あっちたてればこっち立たずみたいな経験 は無いでしょうか？あ、無いですか・・ そんな縦長のリストメニューの使いにくさを解消する一つの手としてフィルタリング機能があります。フィルタリングは簡単なjQueryのコードで実現することが可能です。 デモ 縦長のメニューです。テキスト入力でフィルタリングできます。 北海道（ほっかいどう） 青森県（あおもり） 岩手県（いわて） 宮城県（みやぎ） 秋田県（あきた） 山形県（やまがた） 福島県（ふくしま） 茨城県（いばらき） 栃木県（とちぎ） 群馬県（ぐんま） 埼玉県（さいたま） 千葉県（ちば） 東京都（とうきょう） 神奈川県（かながわ） 新潟県（にいがた） 富山県（とやま
[JS]jQueryのプラグイン33 1選 -2011年7月 | コリス
jquery.transitions CSS transitionのサポートを検出し、classベースのアニメーションを与えることができます。
jQuery Mobileで作るスマホ向けFacebookアプリ
jQuery Mobileで作るスマホ向けFacebookアプリ：無料クラウドでできるFacebookアプリ開発入門（3）（1/5 ページ） 連載第1回の「基礎から分かる、Facebookアプリの作り方」と第2回の「クラウドに載せてFacebookアプリを全世界に公開する」では、Facebookアプリの開発と公開まで行いました。最終回となる本稿では、公開したアプリケーションの管理について紹介します。また、ちょっとしたアレンジとして、jQuery Mobileを使ったスマートフォン向けのFacebookアプリ開発について説明します。 公開したFacebookアプリを管理するには Facebookアプリでは、ユーザーが簡単にアプリを探せる「アプリディレクトリ」や、アプリのお知らせや情報を公開するための「アプリケーションプロファイルページ」、アクティブユーザーやニュースフィードの記事数、Face
[JS]jQueryのプラグインを開発するためのテンプレート -jQuery Boilerplate
jQuery Boilerplate [ad#ad-2] jQuery BoilerplateはjQueryのドキュメント「Plugins/Authoring」から、より良いパフォーマンスとメモリ使用を提供することを目標として開発したとのことです。 jQuery Boilerplate (stripped version) jQueryのプラグインのテンプレート(stripped version)です。 ※2011年7月26日現在のものです。 (function($) { $.pluginName = function(element, options) { var defaults = { foo: 'bar', onFoo: function() {} } var plugin = this; plugin.settings = {} var $element = $(element)
jQuery Clip - jQueryのプラグインをまとめました。
jQueryの便利で実用的なイメージスライダーやレスポンシブ対応のプラグインをタグやカテゴリで見やすくまとめました。
スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」:phpspot開発日誌
DropKick - a jQuery plugin for beautiful dropdowns スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 次のようなデザインのドロップダウンが実装できます。大きめなデザインなのでスマフォでも使えます。 テーマは2種類あってホワイトとブラックから選べます マークアップとしては単なるselectなのでJSがおふでも使えるというものです 関連エントリ 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」 テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
かなりクールなjQueryのメニュープラグインやチュートリアル集:phpspot開発日誌
15 Fresh jQuery Menu Plugins and Tutorials かなりクールなjQueryのメニュープラグインやチュートリアル集 メニューというと便利なものが多かったりしますがデザイン性も秀逸なものといえば、その中から限られたものになります。 「むむぅ、これは」というデザインのものが多数紹介されていましたのでご紹介です。 １からリデザインしなくても少しの手間で実用的なものが実装できそうです これはつかえますね 関連エントリ WindowsのメニューバーっぽいUIを実現できるjQueryプラグイン「Win Menu」 Googleスタイルのシンプルなドロップダウンメニュー実装jQueryプラグイン 画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」 カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flowe
jQuery プラグインを書くための資料と便利ツール - わからん
次の3つが役立っている。最近実際にいくつか読んでいるけど、複数ブラウザ対応していたり、完成度の高いものばかりというわけではないんだなと知った。そのことにネガティブな印象はなくて、そのまま使えるものじゃなくても、公開して頂けるだけありがたいといった気分。どうせなら GitHub に置いてくれれば、気軽に修正の報告ができるしいいなとは思った。 http://docs.jquery.com/Plugins/Authoring 公式サイトの Plugins/Authoring というセクションに丁寧な解説がある。 http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ テンプレ。コメント付きのほうを一度読み下すだけでも、ためになった。わざわざこのネタのための RSS フィード もあった。 http://jquery.cod
デザインから選ぶjQueryツールチップ5つ
ちょっとした解説や情報を表示したい時、あらかじめデザインに当てはめておくよりも 必要な時だけに表示させる方が より目を引く場合があります。 そんな時に利用できそうなツールチップの中から使ってみたいデザインのものをピックアップしてみました :)
スマホ用JavaScriptフレームワーク5つ＋1を徹底研究（1/5） - ＠IT
スマホ用JavaScriptフレームワーク5つ ＋1を徹底研究 jQuery Mobile、iUI、jQTouch、 Sencha Touch、Wink toolkit、PhoneGapとは アシアル株式会社 鴨田健次 2011/6/22 スマートフォン向けJavaScriptフレームワーク／ライブラリを使うと、スマートフォンアプリっぽい見た目のページデザイン、UI（ユーザーインターフェイス）パーツやページ遷移アニメーションを簡単に実装できます。多くは、おのおののフレームワークのルールにのっとったHTMLを書くことで、それらの機能を実現します。 本稿では、jQuery Mobileを筆頭として、いくつか発表されているスマートフォンサイト向けJavaScriptフレームワークを紹介します。 ■ PCサイト向けJavaScriptフレームワークについて PCサイト向けJavaScriptフレー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
simplelib with jQuery