• RSS

jQueryプラグイン・ライブラリ の記事一覧

[JS]IE8 以下で角丸を使えるjQuery プラグイン「jQuery curvyCorners」

CSS3 の border-radius を使えば簡単に角丸を実現できますが、CSS3 が対応していないIE8 以下でも角丸を使えるようにするjQuery プラグインが「jQuery curvyCorners」です。

jQuery curvyCorners は要素の四隅の半径を個別に指定できるだけでなく、背景画像に対しても角丸を適用させることができますので、

個人的には、IE9 とその他のモダンブラウザにはCSS3 の border-radius で角丸を指定した上で、IE8 やIE7 でも角丸に対応しないといけない…という場合にだけjQuery curvyCorners を利用しています。
続きを読む

[JS]複数の要素を縦にも横にも「ふわふわ」動かすjQueryプラグイン「jqFloat」

指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」 の記事でも、要素を「ふわふわ」と動かすjQueryプラグイン jquery.yurayura.js について紹介させていただきましたが、今回紹介させていただく「jqFloat」プラグインでも同様の動きを実現できます。

プラグイン提供先でも動きを確認できますが、jqFloat により複数の要素を同時に縦にも横にも動かすことができるので、特に可愛いイラスト中心のサイトとかだとかなり使えるプラグインではないかと思います。
続きを読む

[JS]フォームのバリデーションと入力ヒントの表示も可能なjQueryプラグイン「JQuery Form Validation And Hints」

フォームのバリデーションと入力ヒント用jQuery プラグイン「JQuery Form Validation And Hints」のご紹介です。

設置とカスタマイズが簡単なので、お問い合わせや見積、資料請求などの各種メールフォームが必要な企業サイトでも使えるんじゃないかなと思います。
続きを読む

[JS]IEでも CSS3の Media Queries を対応させるスクリプト「css3-mediaqueries.js」

なんて素敵なスクリプト! さすがGoogle先生!!!

最近はレスポンシブWEBデザインのサイトも増えてきましたので、ブラウザの幅やデバイスによってサイトの見せ方を変える必要もあるんです。

例えば、一見普通のPCサイトと思いきや、ブラウザの幅を縮めてみるとスマフォでもちゃんと収まって見えるように最適化されてある!!!みたいな。

これを実現する方法として CSS3 の Media Queries を利用する訳ですが、ここでもやっぱりIE がすんなり話を通してくれません > <;

ですので、IEでも Media Queries を利用するために、Google Code で公開されている css3-mediaqueries.js を利用します。
続きを読む

[JS]IEでもプレースホルダ を利用できるjQueryプラグイン「jQuery ah-placeholder」

HTML5 で強化された form の placeholder 属性は、javascript を使わなくてもプレースホルダを使える優れものですが、これがやっぱりIE には対応していない > <;

placeholder のIE対応となると、何だかんだでjavascript のお世話にならないといけないので矛盾しますが、jQueryプラグイン「ah-placeholder.js」を使えば実現可能です。
続きを読む

画像の読み込みを遅延させるjQueryプラグイン「Lazy Load Plugin for jQuery」

img 要素の画像を遅延ロードさせることができるjQuery プラグイン「Lazy Load Plugin for jQuery」。

ブログで大量の画像を掲載しているような場合は、ページのスクロールに合わせて画像を読み込む(遅延ロード)ようにしてくれる Lazy Load Plugin を利用すると良いかもしれません。
続きを読む

[JS]郵便番号から住所を自動入力できるjavascript 「ajaxzip3」

お問い合わせフォームや見積フォームで「住所」を都道府県から手打ちで入力するのは面倒ですので、郵便番号を入力するだけでその後の住所を自動入力してくれる javascript「ajaxzip3」が便利です。
続きを読む

[JS]jQuery と jQueryUI を利用したお手軽Datepicker の実装方法

日付を入力するフォームを用意する際、手打ちで年月日を入れると面倒なので、jQuery の Datepicker を利用して、カレンダーから日付を選んで自動入力できるようにする方法です。
続きを読む

[JS]Pinterestっぽいサイトを作れるjQueryプラグイン「jQuery Masonry」

Pinterest風のタイルを敷き詰めたようなレイアウトを実現するために、jQueryプラグインの「The Wookmark jQuery plugin」を使う方法は以前にも紹介させていただきましたが、やはり「jQuery Masonry」の方が有名かな。

と言うことで、基本的な使い方になりますがザックリとご紹介。
続きを読む

[JS]「jQuery Text Resizer」と「jQuery Cookie」を利用して文字サイズを大中小と変更する

企業サイトであれば「文字の大中小」ボタンをクリックしてページ内のフォントサイズを変更することがよくあると思いますが、jQuery プラグイン jQuery Text Resizer を使えば手軽に実装できます。

また、jQuery Cookie と併用することで、現在のフォントサイズ(の状態)を Cookie に保持できるので、サイト内の別ページへ遷移したりページを離脱してもう一度戻ってきた場合でもサイズを維持することができます。
続きを読む

[JS]レスポンシブWEBデザイン対応のコンテンツスライダー「Flex Slider」

スライドショーのjQuery プラグインは山ほどありますが、FlexSlider はレスポンシブWEBデザイン対応なので、スマホサイトでスライドコンテンツを利用する際には重宝しています。

また、カルーセルが使えるなどカスタマイズ性にも優れており、非常に使い勝手がよいプラグインだと思います。
続きを読む

[JS]WYSIWYGエディタを実装できるシンプルで軽量なjQueryプラグイン「CLEditor」

シンプルなWYSIWYGエディタを簡単に設置できるjQueryプラグイン CLEditor です。

各種ボタンのカスタマイズができる他、フルブラウザ対応(リサイズ)や幅固定バージョンも用意されていますのでサイトに合わせて利用できます。
続きを読む

[JS]Pinterestのようにタイル状にコンテンツを配置できるjavascript「The Wookmark jQuery plugin」

Pinterestのようなサイトをよく見るようになりました。

この手のサイトは jQuery Masonry を利用することが多いのですが、今回は The Wookmark jQuery plugin を使ったPinterest 風のタイル状サイトを構築しましたので、その備忘録です。
続きを読む

[IE]IE6でも min-width、min-height、max-width、max-height を使う方法

またまたIE6ですが、

IE6 ではCSSの「min-width」「min-height」「max-width」「max-height」が効かないため、javascript などを利用して別途対応してあげる必要があります。

今回紹介させていただく minmax.js は、設置するだけでIE6でも「min-width」や「min-height」が使えるようになりますので、企業サイト構築時にIE6対応までやる場合は外せません。
続きを読む