[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate

フォームのさまざまなエレメントを異なるブラウザ、異なるスクリーンでも美しく同じ見た目にするjQueryのプラグインを紹介します。

デモのキャプチャ

Formplate
Formplate -GitHub

Formplateのデモ

デモをWin7とOS Xの各ブラウザで表示させてみました。

デモのキャプチャ

デモ:IE11/Win7で表示

デモのキャプチャ

デモ:Firefox/Win7で表示

デモのキャプチャ

デモ:Chrome/OS Xで表示

デモのキャプチャ

デモ:Safari/OS Xで表示

フォームの見た目はどのブラウザでも美しく表示されていました。スクリーンサイズを変更しても同様に美しく表示されます。

Formplateの使い方

Step 1: 外部ファイル

当スクリプト・スタイルシートとjquery.jsModernizrを外部ファイルとして記述します。

<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

top of page

©2024 coliss