[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate
Post on:2014年11月26日
sponsors
フォームのさまざまなエレメントを異なるブラウザ、異なるスクリーンでも美しく同じ見た目にするjQueryのプラグインを紹介します。
Formplateのデモ
デモをWin7とOS Xの各ブラウザで表示させてみました。
デモ：IE11/Win7で表示
デモ：Firefox/Win7で表示
デモ：Chrome/OS Xで表示
デモ：Safari/OS Xで表示
フォームの見た目はどのブラウザでも美しく表示されていました。スクリーンサイズを変更しても同様に美しく表示されます。
Formplateの使い方
Step 1: 外部ファイル
当スクリプト・スタイルシートとjquery.jsとModernizrを外部ファイルとして記述します。
<head>
// Required javascript
<script src="js/min/jquery-v1.10.2.min.js"></script>
<script src="js/min/modernizr-custom-v2.7.1.min.js"></script>
// Formplate
<script src="js/min/formplate.min.js"></script>
<link href="css/formplate.css" rel="stylesheet" type="text/css">
</head>
Step 2: HTML
適用するフォームの各エレメントにclassを与えます。
<div class="formplate">
<label for="text-input">Text Input:</label>
<input type="text" id="text-input" name="text-input">
</div>
Step 3: JavaScript
適用するフォーム全体をjQueryのセレクタで指定し、スクリプトを実行します。
<script>
$(document).ready(function()
{
$('body').formplate();
});
</script>
フォームの各エレメントのアクティブ時のカラーも簡単に変更することができます。
<body data-formplate-colour="orange">
表示すると、こんな感じに。
カラースキームをオレンジに変更
sponsors
