VB.NET-TIPS などプログラミングについて

すでにデータグリッドコンポーネントである w2ui.grid については説明しましたが、 今回から複数回に渡りフォームコンポーネントである w2ui.form ついて説明をしていきます。

w2ui.form で入力フォームを作る場合、フォームの属性を各種のプロパティで設定することで表現できます。
先ずは簡単な例を以下に示します。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
    <div id="testForm" style="width: 500px"></div>
</body>
<script>
$(function () {
    $('#testForm').w2form({
        name   : 'testForm',
		header : 'Test Form',
        fields : [
            { field: 'name'   , type: 'text', required: true },
            { field: 'address', type: 'text', required: true },
            { field: 'comment', type: 'text'}
        ],
        actions: {
            reset: function () {
                this.clear();
            },
            save: function () {
                this.save();
            }
        }
    });
});
</script>
</html>

フォームの領域を div タグで宣言し、その領域に対して w2ui の1つの機能である w2form を設定してやります。 w2form への引数は1個のオブジェクトとして宣言したものを渡してやります。そのオブジェクトの中に、フォーム用の各種のプロパティを宣言します。

上記の例ではフォームの名称である name プロパティ、フォームのタイトルである header プロパティ、 入力データの中身である fields プロパティ、さらに処理動作を actions プロパティを宣言します。

さらに fields は各入力フィールドの属性を専用のプロパティで宣言した配列で宣言し actions は行いたい処理をプロパティとして宣言します。 （fields 用のプロパティは下の方で説明します。）

これを実行させると以下の様な表示になります。

■fields プロパティのオブジェクト配列の内部プロパティについて

上記の例では自動で入力フィールドなどを生成できることが分かりましたが、 自分で定義したHTMLに対してフォームオブジェクトを関連付けたい場合があります。 通常はフォームのデザイン等を入れたりしたいので、こちらが普通だとは思います。
そこで、入力フィールドの HTML と w2form オブジェクト宣言を分ける例を示します。

■入力フィールドの HTML と w2form オブジェクト宣言を分ける例

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
    <div id="testForm" style="width: 500px">
        <div class="w2ui-page page-0">
            <div class="w2ui-field">
                <label>名前:</label>
                <div>
                    <input name="name" maxlength="100" size="40"/>
                </div>
            </div>
            <div class="w2ui-field">
                <label>住所:</label>
                <div>
                    <input name="address" maxlength="100" size="40"/>
                </div>
            </div>
            <div class="w2ui-field">
                <label>備考:</label>
                <div>
                    <textarea name="comment" style="width: 300px; height: 50px;"></textarea>
                </div>
            </div>
        </div>
        <div class="w2ui-buttons">
            <input type="button" value="リセット" name="reset"/>
            <input type="button" value="保存" name="save"/>
        </div>
    </div>

</body>
<script>
$(function () {
    $('#testForm').w2form({
        name   : 'testForm',
		header : 'Test Form',
        fields : [
            { field: 'name'   , type: 'text', required: true },
            { field: 'address', type: 'text', required: true },
            { field: 'comment', type: 'text'}
        ],
        actions: {
            reset: function () {
                this.clear();
            },
            save: function () {
                this.save();
            }
        }
    });
});
</script>
</html>

これを実行させると以下の様な表示になります。

今後はさらに w2ui.form のいろんな使い方をご紹介したいと思います。

関連する記事