缺少手柄視圖jQuery Mobile的

Question

嗨，我jQuery Mobile的應用程序，我缺少的處理程序，我做了滑蓋格我希望它看起來如下

第一所有我無法看到手柄的，也是我想看到手柄中的值我這樣做如下

HTML：

<div id="slider"> 

     <div id="red"></div> 
     <div id="green"></div> 
     <div id="blue"></div> 

    </div> 

的Javascript

$("#slider").slider({ 

}); 

的CSS

#slider { 
    height: 30px; 
    width: 300px; 
} 
#red { 
    height: 30px; 
    width: 100px; 
    background-color: red; 
    float: left; 
} 
#green { 
    height: 30px; 
    width: 100px; 
    background-color: green; 
    float: left; 
} 
#blue { 
    height: 30px; 
    width: 100px; 
    background-color: blue; 
    float: left; 
} 

任何幫助表示讚賞。

Answer 1

如果你想使用JQM滑塊控件和剛纔添加的3個色段在滑塊軌道，你可以做這樣的：

DEMO

使用標準標記爲爲了方便，我把它放在一個容器中：

<div id="sliderContainer" > 
    <label for="theSlider">A Slider:</label> 
    <input type="range" name="theSlider" id="theSlider" min="0" max="200" value="60" /> 
</div> 

在代碼中，插入th E彩色的div成當創建滑塊增強了JQM滑塊軌道：

$(document).on("pagecreate", "#page1", function(){ 
    var colorback = '<div class="sliderBackColor red">Low</div><div class="sliderBackColor green">Medium</div><div class="sliderBackColor blue">High</div>'; 

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

}); 

這裏是CSS：

.sliderBackColor{ 
    height: 100%; 
    width: 33.33%;  
    float: left; 
    color: white; 
    text-align: center; 
    font-size: 10px; 
    font-weight: normal; 
    text-shadow: 0; 
} 
.red { 
    background-color: red; 
    border-top-left-radius: 0.3125em; 
    border-bottom-left-radius: 0.3125em; 
} 
.green { 
    background-color: green; 
} 
.blue { 
    background-color: blue; 
    border-top-right-radius: 0.3125em; 
    border-bottom-right-radius: 0.3125em; 
} 

注意：如果你想跟蹤更高喜歡你的形象，你可以調整CSS的味道。

德勒軌道DEMO