javascript - 如何沿 jQuery Mobile slider 添加刻度线

Question

我在这里发现了一个类似的问题: Add tick marks to jQuery slider?

但这涉及 jQuery-UI 库而不是 jQuery Mobile，我不确定它的交叉效果如何。

我想做的是沿着我的 jQuery Mobile slider 小部件的 slider 导轨添加 5 个刻度线 - @ 0%、25%、50%、75%、100%

我该怎么做？

编辑:

我已经实现了 Sia 的解决方案，但现在我注意到一些奇怪的线条粗细问题。

这是我的 slider 的图片，通过 Sia 的解决方案带有刻度:

如您所见，一些刻度线的粗细不同，并且它们似乎对每个 slider 都以这种方式重复...这些刻度线的 css 和 html 与 Sia 的答案完全相同，除了包含下面的数字滴答声

这里是相关的JS代码:

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

    var ticks2 = "<div class='tick' id='ticka'></div>"
    ticks2 += "<div class='tick' id='tickb'></div>";
    ticks2 += "<div class='tick' id='tickc'></div>";
    ticks2 += "<div class='tick' id='tickd'></div>";
    ticks2 += "<div class='tick' id='ticke'></div>";
    ticks2 += "<div class='tick' id='tickf'></div>";
    ticks2 += "<div class='tick' id='tickg'></div>";
    ticks2 += "<div class='tick' id='tickh'></div>";

    $("div.ui-slider-track").append(ticks2);
    ...
    }

还有 CSS:

.tick {
    width: 1px;
    background-color:#3388cc;
    height:100%;
    position:absolute;
    bottom:0px;
}

#ticka{
    margin-left:11.1%;
}

#tickb{
    margin-left:22.2%;
}

#tickc{
    margin-left:33.3%;
}
#tickd{
    margin-left:44.4%;
}

#ticke{
    margin-left:55.5%;
}

#tickf{
    margin-left:66.6%;
}
#tickg{
    margin-left:77.7%;
}

#tickh{
    margin-left:88.8%;
}

Answer 1

Sia 为您提供了一个很好的解决方案。此外，您可以查看此博客条目，了解有关增强 slider 小部件的一些想法(完全公开，我写的):

Fun with the Slider Widget

有一个添加刻度线的示例，您还可以考虑 slider 轨道中带有标签的颜色 DIV 的示例。这是包含两种技术的 fiddle :

DEMO

<div id="tickMarks" >
    <label for="theSlider2">Slider with Tick marks:</label>
    <input type="range" name="theSlider2" id="theSlider2" min="0" max="100" value="60" />
</div> 
<br /><br />
<div id="tickMarks2" >
    <label for="theSlider3">Slider Background Ranges:</label>
    <input type="range" name="theSlider3" id="theSlider3" min="0" max="100" value="55" />
</div> 

javascript 动态创建背景 DIV 并将它们插入 slider 轨道:

$(document).on("pagecreate", "#page1", function () {
    var ticks  = '<div class="sliderTickmarks "><span>0%</span></div>';
        ticks += '<div class="sliderTickmarks "><span>25%</span></div>';
        ticks += '<div class="sliderTickmarks "><span>50%</span></div>';
        ticks += '<div class="sliderTickmarks "><span>75%</span></div>';
        ticks += '<div class="sliderTickmarks "><span>100%</span></div>';

   $("#tickMarks .ui-slider-track").prepend(ticks);


    var colorback  = '<div class="sliderBackColor color1">0-24%</div>';
        colorback += '<div class="sliderBackColor color2">25-50%</div>';
        colorback += '<div class="sliderBackColor color3">50-75%</div>';        
        colorback += '<div class="sliderBackColor color4">75-100%</div>';

    $("#tickMarks2 .ui-slider-track").prepend(colorback);
});

刻度线的 CSS 使 DIV 保持透明，并为垂直刻度线的中间 DIVS 添加右边框。使用相对定位将内部 SPANS 移动到轨道下方。对于颜色 DIV，我们向第一个和最后一个 DIV 添加背景颜色和一些圆 Angular ，以便它们与轨道的圆 Angular 相匹配:

.sliderTickmarks{
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    height: 100%;
    width: 25%;    
    float: left;
    border-right: 1px solid #888;
}
.sliderTickmarks span{
    position: relative;
    left: 100%;
    top: 125%;
    margin-left: -10px;
    font-size: 12px;
    font-weight: normal;
}

.ui-slider-track > div.sliderTickmarks:first-child{
    border-right: 0;
    width: 0;
}
.ui-slider-track > div.sliderTickmarks:first-child span{
    margin-left: -5px;
}
.ui-slider-track > div.sliderTickmarks:last-of-type{
     border-right: 0;
}

.sliderBackColor{
    height: 100%;
    width: 25%;    
    float: left;
    color: white;
    text-align: center;
    font-size: 10px;
    font-weight: normal;
    text-shadow: 0px 1px 2px #333;
}
.color1 { background-color: #D6AA26;}
.color2 { background-color: #93A31C;}
.color3 { background-color: #408156;}
.color4 { background-color: #30374F;}

.ui-slider-track > div.sliderBackColor:first-child{
    border-top-left-radius: 0.3125em;
    border-bottom-left-radius: 0.3125em;
}
.ui-slider-track > div.sliderBackColor:last-of-type{
    border-top-right-radius: 0.3125em;
    border-bottom-right-radius: 0.3125em;   
}