0

http://jqueryui.com/demos/slider/#stepsのような入力スライダーを備えたWebページがあります。

私が必要としているのは、送信ボタンを押す前に、ユーザーにスライダーを移動させることです。

そこで、ハンドルのデフォルトの色を赤にすることを考えています。赤のときに送信を押すと、ハンドルをクリックまたは移動する必要があることを警告するアラートウィンドウが表示されます。もちろん、そうすると色が変わり、続行できるようになります。

私がこれまでに行ったことは次のとおりです。

<html>
    <head>
        <meta charset="utf-8">
        <link type="text/css" href="jQuery/css/start/jquery-ui-1.8.21.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="jQuery/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jQuery/js/jquery-ui-1.8.21.custom.min.js"></script>
            <style>
                #demo-frame > div.demo { padding: 10px !important; };
            </style>
        <script>
            $(document).ready(function() {
                $(".slider").slider({
                    step: 0.01,
                    min: 0,
                    max: 1,
                    value: 0.5,
                    slide: function(event, ui) {
                        $("input[name=" + $(this).attr("id") + "_question]").val(ui.value); 
                        }
                });
            });

        </script>

        <form action="next.php" method="POST">
                <input type="hidden" value=0.5 name="first_question"/>
            <div class="demo">
                <p>
                    <label>question 1:</label>
                </p>
                <div class="slider" id="first"></div>   
                <br />
                <br />
                <input type="hidden" value=0.5 name="second_question"/>
                <p>
                    <label>question 2:</label>
                </p>
                <div class="slider" id="second"></div>
            </div><!-- End demo -->
                <br />
                <input type="submit" value="submit" id="bt"/>
        </form>
    </body>
</html>

これは実装するには複雑すぎますか？どんな助けでも大歓迎です。

4

1 に答える 1

1

これは間違いなくできます。スライダーが操作されたかどうかを HTML データ属性に保存することをお勧めします。slideすでに持っているイベントでこれを設定できます。次に、フォームが送信されると、すべてのスライダーにデータ属性が設定されていることを確認できます。

これをユーザーに表示するためにいくつかの基本的な視覚的なことを行う例をまとめました - http://jsfiddle.net/s6XTu/2/。

于 2012-06-27T10:45:53.413 に答える