jQueryプラグイン・ライブラリ の記事一覧
CSS3 の border-radius を使えば簡単に角丸を実現できますが、CSS3 が対応していないIE8 以下でも角丸を使えるようにするjQuery プラグインが「jQuery curvyCorners」です。
jQuery curvyCorners は要素の四隅の半径を個別に指定できるだけでなく、背景画像に対しても角丸を適用させることができますので、
個人的には、IE9 とその他のモダンブラウザにはCSS3 の border-radius で角丸を指定した上で、IE8 やIE7 でも角丸に対応しないといけない…という場合にだけjQuery curvyCorners を利用しています。
続きを読む
指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」 の記事でも、要素を「ふわふわ」と動かすjQueryプラグイン jquery.yurayura.js について紹介させていただきましたが、今回紹介させていただく「jqFloat」プラグインでも同様の動きを実現できます。
プラグイン提供先でも動きを確認できますが、jqFloat により複数の要素を同時に縦にも横にも動かすことができるので、特に可愛いイラスト中心のサイトとかだとかなり使えるプラグインではないかと思います。
続きを読む
フォームのバリデーションと入力ヒント用jQuery プラグイン「JQuery Form Validation And Hints」のご紹介です。
設置とカスタマイズが簡単なので、お問い合わせや見積、資料請求などの各種メールフォームが必要な企業サイトでも使えるんじゃないかなと思います。
続きを読む
なんて素敵なスクリプト! さすがGoogle先生!!!
最近はレスポンシブWEBデザインのサイトも増えてきましたので、ブラウザの幅やデバイスによってサイトの見せ方を変える必要もあるんです。
例えば、一見普通のPCサイトと思いきや、ブラウザの幅を縮めてみるとスマフォでもちゃんと収まって見えるように最適化されてある!!!みたいな。
これを実現する方法として CSS3 の Media Queries を利用する訳ですが、ここでもやっぱりIE がすんなり話を通してくれません > <;
ですので、IEでも Media Queries を利用するために、Google Code で公開されている css3-mediaqueries.js を利用します。
続きを読む
HTML5 で強化された form の placeholder
属性は、javascript を使わなくてもプレースホルダを使える優れものですが、これがやっぱりIE には対応していない > <;
placeholder のIE対応となると、何だかんだでjavascript のお世話にならないといけないので矛盾しますが、jQueryプラグイン「ah-placeholder.js」を使えば実現可能です。
続きを読む
img 要素の画像を遅延ロードさせることができるjQuery プラグイン「Lazy Load Plugin for jQuery」。
ブログで大量の画像を掲載しているような場合は、ページのスクロールに合わせて画像を読み込む(遅延ロード)ようにしてくれる Lazy Load Plugin を利用すると良いかもしれません。
続きを読む
お問い合わせフォームや見積フォームで「住所」を都道府県から手打ちで入力するのは面倒ですので、郵便番号を入力するだけでその後の住所を自動入力してくれる javascript「ajaxzip3」が便利です。
続きを読む
日付を入力するフォームを用意する際、手打ちで年月日を入れると面倒なので、jQuery の Datepicker を利用して、カレンダーから日付を選んで自動入力できるようにする方法です。
続きを読む
Pinterest風のタイルを敷き詰めたようなレイアウトを実現するために、jQueryプラグインの「The Wookmark jQuery plugin」を使う方法は以前にも紹介させていただきましたが、やはり「jQuery Masonry」の方が有名かな。
と言うことで、基本的な使い方になりますがザックリとご紹介。
続きを読む
企業サイトであれば「文字の大中小」ボタンをクリックしてページ内のフォントサイズを変更することがよくあると思いますが、jQuery プラグイン jQuery Text Resizer を使えば手軽に実装できます。
また、jQuery Cookie と併用することで、現在のフォントサイズ(の状態)を Cookie に保持できるので、サイト内の別ページへ遷移したりページを離脱してもう一度戻ってきた場合でもサイズを維持することができます。
続きを読む
スライドショーのjQuery プラグインは山ほどありますが、FlexSlider はレスポンシブWEBデザイン対応なので、スマホサイトでスライドコンテンツを利用する際には重宝しています。
また、カルーセルが使えるなどカスタマイズ性にも優れており、非常に使い勝手がよいプラグインだと思います。
続きを読む
シンプルなWYSIWYGエディタを簡単に設置できるjQueryプラグイン CLEditor です。
各種ボタンのカスタマイズができる他、フルブラウザ対応(リサイズ)や幅固定バージョンも用意されていますのでサイトに合わせて利用できます。
続きを読む
Pinterestのようなサイトをよく見るようになりました。
この手のサイトは jQuery Masonry を利用することが多いのですが、今回は The Wookmark jQuery plugin を使ったPinterest 風のタイル状サイトを構築しましたので、その備忘録です。
続きを読む
またまたIE6ですが、
IE6 ではCSSの「min-width」「min-height」「max-width」「max-height」が効かないため、javascript などを利用して別途対応してあげる必要があります。
今回紹介させていただく minmax.js は、設置するだけでIE6でも「min-width」や「min-height」が使えるようになりますので、企業サイト構築時にIE6対応までやる場合は外せません。
続きを読む