FancyFormでスタイルシートクラスを設定する

これから説明するスタイルシートクラスの設定およびイベントの設定はFirefox、Safari、Operaでは動作しますが、Internet Explorerでは正しく動作しません。あらかじめ、ご了承下さい。FancyFormはバージョン1に満たないため、バージョンアップにより不具合が解消されるでしょう。

FancyFormではチェックされた時のスタイルシートクラスを設定することができます。デフォルトのスタイルシートクラスを書き換えてしまうのが手軽ですが、それができない場合にはスクリプト内で使用する複数のスタイルシートクラスを指定することができます。

FancyFormではページが読み込まれた後にFancyForm.start()を使ってスタイルシートクラスやイベントを設定します。クラスはチェックされている場合とチェックされていない場合の2種類を指定します。チェックされている場合はonClasses、チェックされていない場合はoffClassesに、ラジオボタンとチェックボックスで使用するスタイルシートクラス名を指定します。スタイルシートクラス名は1つしか設定できないわけではなく、半角空白で区切って列記することができます。サンプル03ではチェックされた場合はnoteクラスも適用するように指定しています。

FancyForm.start()の最初のパラメータが0またはfalseなど論理式で偽の場合は、すでにエレメントに設定されている情報を残したまま、新たな設定を反映します。最初のパラメータの種類が配列で、なおかつフォームのエレメントが指定されている場合には、そのエレメントに対して設定が行なわれます。trueや1などを指定した場合でも、すでに設定されているエレメントに対して処理が行なわれます。サンプル03のようにFancyForm(0,～)とFancyForm(1,～)の両方を設定しないとチェックボックスが正しく機能しません(ラジオボタンは機能します)。

サンプル03の実行結果

チェックされている項目の文字が赤色になる

サンプル03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>FancyFormサンプル</title>
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <script type="text/javascript" src="js/mootools.v1.11.js"></script>
        <script type="text/javascript" src="js/moocheck.js"></script>
        <script type="text/javascript"><!--
            window.addEvent("load", function(){
                FancyForm.start( 0, {
                    onClasses: {
                        checkbox: "checked note",
                        radio: "selected note"
                    },
                    offClasses: {
                        checkbox: "unchecked",
                        radio: "unselected"
                    }
                } );

                FancyForm.start( 1, {
                    onClasses: {
                        checkbox: "checked note",
                        radio: "selected note"
                    },
                    offClasses: {
                        checkbox: "unchecked",
                        radio: "unselected"
                    }
                } );

            });
        // --></script>
    </head>
    <body>
    <h1>FancyFormサンプル</h1>
        <form name="dataForm1" action="./check.cgi" method="get">
            【使用OS】
            <label><input type="radio" name="osType" checked>MacOS X</label>
            <label><input type="radio" name="osType">UNIX</label>
            <label><input type="radio" name="osType">Windows</label>
            【主な使用言語】
            <label><input type="checkbox" name="jp" checked>日本語</label>
            <label><input type="checkbox" name="en">英語</label>
            <label><input type="checkbox" name="etc">その他の言語</label>
            <input type="submit" value="送信">
        </form>
    </body>
</html>

また、全てのエレメントに対して同じスタイルシートクラスを設定する場合にはextraClassesでallプロパティに設定したいクラス名を指定します。extraClassesではallだけでなく以下のプロパティも指定できます。

checkbox チェックボックス
radio ラジオボタン
on チェックされている時
off チェックされていない時
all 全て

サンプル04ではチェックボックスとラジオボタンの文字の色が赤色になるようにnoteクラスを追加しています。

サンプル04の実行結果。チェックボックスとラジオボタン項目の文字が赤色になる

サンプル04

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>FancyFormサンプル</title>
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <script type="text/javascript" src="js/mootools.v1.11.js"></script>
        <script type="text/javascript" src="js/moocheck.js"></script>
        <script type="text/javascript"><!--
            window.addEvent("load", function(){
                FancyForm.start( 0, {
                    extraClasses: {
                        all: "note"
                    }
                } );
            });
        // --></script>
    </head>
    <body>
    <h1>FancyFormサンプル</h1>
        <form name="dataForm1" action="./check.cgi" method="get">
            【使用OS】
            <label><input type="radio" name="osType" checked>MacOS X</label>
            <label><input type="radio" name="osType">UNIX</label>
            <label><input type="radio" name="osType">Windows</label>
            【主な使用言語】
            <label><input type="checkbox" name="jp" checked>日本語</label>
            <label><input type="checkbox" name="en">英語</label>
            <label><input type="checkbox" name="etc">その他の言語</label>
            <input type="submit" value="送信">
        </form>
    </body>
</html>