Question

我的雇主希望我改变在我的应用程序中实现滑块的方式。他们希望我区分已经与之交互的滑块和未使用的滑块。

如果未使用滑块，滑块手柄将出现在滑块中间，不显示蓝色进度条。此外，所有数字滑块值都不会出现（滑块手柄或滑块左侧的输入框）。

如果使用了滑块，则会出现蓝色进度条，数值（在输入框和滑块手柄上）也会出现。

然后，如果用户试图在不使用所有滑块的情况下转到下一个调查页面，他们将无法使用。

当前幻灯片：

sliders example

这些滑块中的每一个都属于自定义类#jquerymobileslider。是否可以将此功能仅应用于此类的滑块？

更新我已经在下面标记为答案的帖子中实现了更改，但是现在滑块无法正确更新存在问题。

当我更改页面时，每个滑块的手柄将恢复为默认位置 -

left: 50%;

进度条和数值都保留在修改后的值中，但是：

这可能是需要刷新jquerymobileslidercont元素的问题吗？

Slider Error

更新更新：

我已经通过为每个调查滑块页面使用条件更正了上述问题，并且当用户进行调查时，滑块手柄的位置现在正常运行。但是，现在当用户提交调查并进行新调查时，滑块小部件无法正确恢复到其默认状态（没有可见的进度条，滑块没有值，滑块内的任何元素都没有显示任何值）

相反，我看到了这一点：

Slider new survey error

这是我试图用来将滑块元素重置为默认值的代码，但是数字句柄标签没有更新，进度条也没有...但是你可以看到输入框的滑块反映了滑块值的变化：

    function resetSurveyWidgets(){
        visitedSurvey1a = false;
        visitedSurvey1b = false;
        visitedSurvey1c = false;

        $(".jquerymobileslider").val(null);//.slider("refresh");
        $(".jquerymobileslidercont .ui-slider-handle").css("left", "50%");
        ...
     }

我觉得包括作为解决方案提供的原始代码在开头：

$(document).on("pageinit","#survey1a", function(){

            $(".jquerymobileslider").on("change", function () {
            $(this).closest(".ui-slider").find("a .ui-btn-text").html($(this).val());
         }).on("keyup", function () {
                        $(this).closest(".ui-slider").find("a .ui-btn-text").html($(this).val());
            });

           $("#survey1a .jquerymobileslidercont .ui-slider-handle").css("left", "50%");

           ...
        }

可能会解决问题，但我的pageinit的结构来自PhoneGap命令行工具生成的项目模板，我不想偏离它创建的内容。

我的pageinit（）的结构是......

$(document).on("pageinit",function(){

        $(".jquerymobileslider").on("change", function () {
            $(this).closest(".ui-slider").find("a .ui-btn-text").html($(this).val());
         }).on("keyup", function () {
                        $(this).closest(".ui-slider").find("a .ui-btn-text").html($(this).val());
            });

        if(!visitedSurvey1a){
            $("#survey1a .jquerymobileslidercont .ui-slider-handle").css("left", "50%");
        }

        if(!visitedSurvey1b){
            $("#survey1b .jquerymobileslidercont .ui-slider-handle").css("left", "50%");
        }

        if(!visitedSurvey1c){
            $("#survey1c .jquerymobileslidercont .ui-slider-handle").css("left", "50%");
        }


        $("#survey1a").on("pagecreate", function(){
            var html = Mustache.to_html(survey1atemplate, survey1adata);
            $("#survey1acontent").html(html);
        });

        $("#survey1b").on("pagecreate", function(){
            var html = Mustache.to_html(survey1btemplate, survey1bdata);
            $("#survey1bcontent").html(html);
        });

        $("#survey1c").on("pagecreate", function(){
            var html = Mustache.to_html(survey1ctemplate, survey1cdata);
            $("#survey1ccontent").html(html);
        });
        ...

因此，对于每个调查页面而不是.on（pageinits），我会在每个调查页面中调用.on（pagecreate），在一个通用的.on（pageinit）中

我试图在每个$ selector.on（“pagecreate”，function（）中包含滑块手柄css左：50％规则，但滑块总是在最左边加载。

Answer 1

这是一个有效的 DEMO

在滑块上放置一个类没有帮助，因为轨道标记不包含在该类中。为此，我在每个滑块/标签周围添加了一个容器div，其中包含一类jquerymobileslidercont（如果您愿意，可以在几个滑块周围使用单个容器）。

<div class="jquerymobileslidercont">
    <label for="slider-1">Frustrated:</label>
    <input class="jquerymobileslider" data-highlight="true" type="range" name="slider-1" id="slider-1" min="0" max="10" value="" />
</div>

要显示蓝色进度条，请在输入上设置data-highlight="true"，然后开始为空，请设置value=""。

用于设置更大轨道和句柄的CSS：

.jquerymobileslidercont {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}
.jquerymobileslidercont label {
    font-weight: bold;
}
.jquerymobileslidercont .ui-slider-track {
    height: 32px;
    margin-top: -8px;
}
.jquerymobileslidercont .ui-slider-handle {
    height: 40px !important;
    width: 40px !important;
    margin-top: -20px !important;
    line-height: 40px;
}
.jquerymobileslidercont .ui-slider-handle .ui-btn-text {
    font-weight: bold;
    font-size: 18px;
}

最后在javascript中，我们通过左css将句柄初始化到中间点，然后处理change事件和keyup事件以设置句柄中的文本：

$(document).on("pageinit", "#page1", function () {
    $(".jquerymobileslidercont .ui-slider-handle").css("left", "50%");   

    $(".jquerymobileslider").on("change", function () {
        $(this).closest(".ui-slider").find("a .ui-btn-text").html($(this).val());
    }).on("keyup", function () {
        $(this).closest(".ui-slider").find("a .ui-btn-text").html($(this).val());    
    });
});

<强>更新如果代码不在pageinit中并且可能运行多次，那么您希望确保仅在输入没有值时才将句柄移动到50％：

$( ".jquerymobileslidercont .ui-slider-handle" ).each(function( index ) {
    if ($(this).parents(".ui-slider").find("input").val() == '' ){
       $(this).css("left", "50%");
    }
});

以下是更新的 DEMO

区分初始和＆amp;使用状态的jQuery Mobile滑块

1 个答案: