如何添加刻度標記沿jQuery Mobile的滑塊

Question

我發現了一個類似的問題在這裏問： Add tick marks to jQuery slider?

但是，這涉及的是jQuery的UI庫，而不是jQuery Mobile的，我不知道它會如何交叉。

我想要做的是增加5刻度標記沿着我的jQuery Mobile的滑塊widgets- @ 0％，25％，50％，75％，100％

我怎麼會去的滑座導軌關於這樣做？

編輯：

我已經實現新航的解決方案，但現在也有一些奇怪的線條粗細問題，我注意到。

這裏是通過新航的解決方案我的滑塊與蜱的圖片：

正如你可以看到，一些蜱有不同的厚度，他們似乎以這種方式重複每個滑塊......這些蜱的CSS和HTML是完全一樣新航的答案保存爲蜱

下面是相關的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

新亞給你一個很好的解決方案。此外，你可以看看有關增強滑塊控件的一些想法此博客條目（全面披露，我寫的）：

Fun with the Slider Widget

有加刻度標記的例子並且您還可以考慮滑塊軌道中帶有標籤的顏色DIV的示例。這裏是用2項技術包括一個小提琴：

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

tickmarks的CSS使DIV透明，併爲vert的中間DIVS添加一個右邊框ical刻度標記。內部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; 
}