Question

我有一个网页，其中包含一些输入滑块，如下所示：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>

实施这个太复杂了吗？欢迎任何帮助。

Answer 1

这绝对可以做到。我建议存储是否已在HTML数据属性中与滑块进行交互。您可以在已有的slide事件中进行此设置。然后，在提交表单时，您可以确保为所有滑块设置了数据属性。

我整理了一个示例，该示例执行一些基本的视觉效果向用户展示 - http://jsfiddle.net/s6XTu/2/。

自定义jQuery表单滑块

1 个答案: