Question

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

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

我想做的是在我的jQuery Mobile滑块小部件的滑块轨道上添加5个刻度线 - @ 0％，25％，50％，75％，100％

我将如何做到这一点？

修改

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

这是我的滑块的图片，通过Sia的解决方案打勾：

enter image description here

正如你所看到的，一些刻度具有不同的厚度，它们似乎以这种方式为每个滑块重复...这些刻度的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给了你一个很好的解决方案。此外，您可以查看此博客条目，了解有关增强滑块小部件的一些想法（完全披露，我写了它）：

<强> Fun with the Slider Widget

有一个添加刻度线的示例，您还可以考虑滑块轨道中带有标签的颜色DIV的示例。这里有两种技巧：

<强> 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并将它们插入滑块轨道：

$(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添加背景颜色和一些圆角，以便它们匹配轨道的圆角：

.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;   
}

Answer 2

这可能不是最优雅的解决方案，但我认为这就是你要找的东西

示例：http://jsfiddle.net/gravitybox/5tfPj/

JS

$(document).ready(function() {
$("div.ui-slider").append("<div class='tick' id='percent25'></div><div class='tick' id='percent50'></div><div class='tick' id='percent75'></div><div class='number' id='number0'>0</div><div class='number' id='number25'>25</div><div class='number' id='number50'>50</div><div class='number' id='number75'>75</div><div class='number' id='number100'>100</div>");

});

CSS

.tick {
    width: 1px;
    background-color:#999999;
    height:5px;
    position:absolute;
    bottom:0px;
}

#number0{
     margin-left:0%;   

}

#percent25, #number25{
     margin-left:25%;   

}
#percent50, #number50{
     margin-left:50%;   

}
#percent75, #number75{
     margin-left:75%;   

}

#number100{
     margin-left:100%;   

}

.number {
    position:absolute;
    top:18px;
    left:-5px;
    bottom:0px;
    font-size:10px;
    color:#999999;
}

如何在jQuery Mobile滑块上添加刻度线

2 个答案: