0

我有一个带有一些输入滑块的网页，就像这样：http: //jqueryui.com/demos/slider/#steps。

我需要的是强制用户在按下提交按钮之前移动滑块。

所以我正在考虑将手柄的默认颜色设置为红色，如果他在红色时按下提交，则会出现一个警告窗口，警告他需要单击或移动手柄。当然，当他这样做时，颜色会改变，他将能够继续。

我到目前为止是：

<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 回答