-1

フォームの各フィールドにどのような種類のデータを入力する必要があるかを説明/明確化する、[質問する] ページのボックスと非常によく似たボックスが必要です。このページの「ソースを表示」しようとしましたが、何が起こっているのか頭も尻尾もわかりません。誰かがそれを説明してもらえますか、それとも私が使用できるチュートリアルがありますか?

例：

  1. ユーザーがテキスト入力をクリックすると、ボックスに何が表示されるかが説明されます

  2. いくつかのタイプの会社を含む Company Type というラベルのドロップダウン メニュー。ユーザーは、各タイプが何を指しているのかを理解していないため、自分自身を誤って分類しています。ユーザーがドロップダウン メニューをクリックすると、ボックス内のテキストで各会社の種類が説明されます。

フォームの一部のスクリーンショットのリンクを参照してください: http://imgur.com/TYOmT

また、ボックスがフォームを下に移動するようにしたいと思います（ユーザーが作業しているフィールドのすぐ右側になるように）

ありがとうございました！

4

1 に答える 1

0

HTML が次のように与えられた場合:

    <form>
        <select name="some_name" id="some_name">
            <option value="option1" data-description="Description of option1">option1</option>
            <option value="option2" data-description="Description of option2">option2</option>
        </select>
    </form>
    <div id="description">
        Default Description
    </div>​

次の JavaScript はdata-description、選択したオプションの値を取得し#description、それを設定します。

    var $description = $('#description');
    $('#some_name').on('change', function(event){
        var $option = $(event.currentTarget).find(':selected');
        $('#description').html($option.attr('data-description'));
    });

これが実際の例です。

これを簡単に拡張して、入力ごとに追加のハンドラーを作成するか、フォーム上の任意の入力用のハンドラーを作成することで、特定の入力ごとにより多くの情報を提供するものを作成できます。

display:fixedTwitter Bootstrap のaffixなどを使用して、説明を固定しておくにはさまざまな方法があります。

于 2012-09-26T01:18:53.207 に答える