TopJavaScriptjQueryプラグイン > 2012年4月
2012年4月12日

HTML5のplaceholder属性をクロスブラウザ対応にするjQueryプラグイン「jQuery-Placeholder」

April 12,2012 12:03 AM
Tag:[, , ]
Permalink

HTML5のplaceholder属性をクロスブラウザ対応にするjQueryプラグイン「jQuery-Placeholder」jQueryプラグイン「jQuery-Placeholder」を紹介します。

jQuery-Placeholder
jQuery-Placeholder

1.基本

HTML5のplaceholder(プレースホルダー)属性は、フォームのテキストフィールドやテキストエリアに淡い色のテキストを表示する機能です。

HTML

<input type="text" placeholder="入力してください" name="foo" value="" />

実際の表示
実際の表示

HTML5のプレースホルダーをサポートしていないブラウザではplaceholder属性のテキストは表示されませんが、jQuery-Placeholderプラグインを利用すれば表示されるようになります。IE6などでも大丈夫です。

これで、focus()やblur()を使ってフォームを制御する手間から開放されます。

2.jQuery-Placeholderプラグインのダウンロード

「jQuery-Placeholder」のページにある、「Download」をクリック。

jQuery-Placeholder

「Download .zip」または「Download .tar.gz」をクリック。これでダウンロードが開始します。

jQuery-Placeholder

ダウンロードしたアーカイブを展開した中にあるjquery.placeholder.min.js(またはjquery.placeholder.js)を任意の位置にアップロードします。

3.jQuery-Placeholderの設定

サンプルとして、次のinput要素のplaceholder属性に設定したテキストを、未サポートのブラウザでも表示するようにします。

<input type="text" placeholder="入力してください" name="foo" value="" />

まず、jQueryとjquery.placeholder.min.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.placeholder.min.js"></script>

プラグインの起動は次のように、placeholder属性をもつ要素を対象にするようにします。

<script>
$(function(){
    $('input[placeholder]').placeholder();
});
</script>

これでプレースホルダーが未サポートのブラウザでも表示されるようになります。textarea要素も対象にする場合は次のようにします。

<script>
$(function(){
    $('input[placeholder],textarea[placeholder]').placeholder();
});
</script>

4.CSSの設定

プレースホルダのサポート/未サポートはプラグインで自動的に判断し、未サポートのブラウザの場合、placeholder属性をもつ要素にフォーカスがあたっていないときだけ、class属性値「placeholder」を自動的に付与します。

よって次のようなCSSを設定すれば、テキストを淡い表示に変更できます。

.placeholder {
    color: #777
}
Comments [0] | Trackbacks [0]
2012年4月10日

ブラウザの幅にあわせてフォントサイズを拡大・縮小するjQueryプラグイン「FitText」

April 10,2012 1:55 AM
Tag:[, , ]
Permalink

ブラウザの幅にあわせてフォントサイズを拡大・縮小するjQueryプラグイン「FitText」を紹介します。

FitText
FitText

ウェブサイトをPC・スマホ・タブレットなど色々なサイズのディスプレイに対応させるときに便利そうです。

1.サンプル

上記の配布サイト自体がサンプルになっていますが、ためしに作ってみました。

サンプル
サンプル

ブラウザの幅を変更するとタイトルの「FitTextサンプル」の部分が拡大・縮小します。

以下、具体的な設定方法です。

2.FitTextのダウンロード

FitText」のページにある、「Download on Github」をクリック。

Download on Github

「ZIP」をクリック。これでダウンロードが開始します。

Github

ダウンロードしたアーカイブを展開した中にあるjquery.fittext.jsを任意の位置にアップロードします。

3.FitTextの設定

次のHTMLを拡大・縮小の対象にしてみます。

<h1>FitTextサンプル</h1>

まず、jQueryとjquery.fittext.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>

jquery.fittext.jsの起動は次のように記述します。

<script>
$(function(){
    $("h1").fitText(1.2);
});
</script>

fitText()のパラメータのデフォルト値は「1」です。「1」よりも値を大きくすると文字の圧縮率が大きくなり、「1」より小さくすると圧縮率が低くなります。

また次のように設定すれば、最小フォントサイズと最大フォントサイズを指定することもできます。

<script>
$(function(){
    $("h1").fitText(1.2, { 
        minFontSize: '20px',
        maxFontSize: '40px'
    })
});
</script>

minFontSizeが最小フォントサイズ、maxFontSizeが最大フォントサイズです。

ここではh1要素のみを例にしましたが、対象の要素を親要素で括るときは、親要素にwidthプロパティを%指定する必要があるようです(タイトルでは「ブラウザの幅にあわせる」と書きましたが、厳密には親要素の幅にあわせて拡大・縮小します)。

<div style="width:100%">
    <h1>FitTextサンプル</h1>
</div>

%指定をすればOKなので、「100%」以外の値でも動作します。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3