2015-04-18 55 views
0

我想構建一個滑塊(非範圍)。我希望滑塊在3-4個輸入元素中顯示數據(可能有一個選擇框)。當談到窗體小部件時,我有點新手。使用jQuery v2.1.0和JQM v1.4.5,添加jQuery-UI並不是問題,只要它能夠響應並適用於移動設備即可。jQuery滑塊顯示具有特定數據的多個輸入JQM

<div id="slider"> 
    <div id="slider"></div> 
</div> 
<input id="amount" readonly type="text"> 
<div class="data-display"> 
    <input id="result1" readonly type="text"> 
    <input id="result2" readonly type="text"> 
    <input id="result3" readonly type="text">  
    <select id="result4" readonly type="text"> 
</div> 

我想像這個小提琴找到堆棧溢出減去計算。不計算所需的僅僅是數據顯示:

http://jsfiddle.net/eqnLc9fg/1/

的數據是特定/獨一無二的。滑塊將顯示數據:

1st input = 149.0 F 
2nd input = 100.6 C 
3rd input = 57.8 psig 
4th input (select) = 4.00 bar 
(this would be center of the slider) 

1st input = 150.0 F 
2nd input = 101.1 C 
3rd input = 56.8 psig 
4th input (select) = 3.87 bar 

在一個滑塊中將有30-50個這些數據集。所有具體的範圍都是不可能的。

選擇框也會控制其他輸入和滑塊。

不是100%確定滑塊小部件是我嘗試做的最好的選擇。已經考慮過垂直或表格溢出。滑塊看起來對我來說是最好的選擇,把所有東西放在一個屏幕上。也歡迎提供建議。

我希望我所問的是明確的! ; )

___select box____ ___input box____

-----------------滑塊-----------------

____輸入框____ ____輸入框____

謝謝!

事情是這樣的,以更好地解釋:

http://jsfiddle.net/Mottie/VfBkk/

+0

雖然它的3個滑塊(只需要一個),這甚至可能會接近我我正在尋找除需要輸入和選擇框外[鏈接] http://jsfiddle.net/Mottie/VfBkk/ –

回答

0

你可以建造它是這樣的:

<div class="ui-grid-a"> 
    <div class="ui-block-a"> 
    <input id="result1" readonly type="text" /> 
    </div> 
    <div class="ui-block-b"> 
    <input id="result2" readonly type="text" /> 
    </div> 
</div> 

<!-- /grid-a --> 
<div class="full-width-slider"> 
    <input type="range" name="slider" id="slider" min="0" max="13" value="6" /> 
</div> 
<div class="ui-grid-a"> 
    <div class="ui-block-a"> 
    <input id="result3" readonly type="text" /> 
    </div> 
    <div class="ui-block-b"> 
    <select id="result4" readonly > 
     <option value="0">The 1st Option</option> 
     <option value="1">2Option</option> 
     <option value="2">3Option</option> 
     <option value="3">4Option</option> 
     <option value="4">5Option</option> 
     <option value="5">6Option</option> 
     <option value="6">7Option</option> 
     <option value="7">8Option</option> 
     <option value="8">9Option</option> 
     <option value="9">10Option</option> 
     <option value="10">11 Option</option> 
     <option value="11">12 Option</option> 
     <option value="12">13 Option</option> 
     <option value="13">14 Option</option> 
    </select> 
    </div> 
</div> 

這裏是隱藏滑塊輸入並使其全寬的CSS:

/* Hide the number input */ 
.full-width-slider input { 
    display: none !important; 
} 
.full-width-slider .ui-slider-track { 
    margin-left: 15px; 
} 

我正在使用JQM網格奠定o控制,但你可以通過其他方式做到這一點。然後在腳本趕上滑塊的變化情況來更新輸入:

var menSizes = Array(14) 
    menSizes[0] = [5, 6, 38]; 
    menSizes[1] = [5.5, 6.5, 38.5]; 
    menSizes[2] = [6, 7, 39]; 
    menSizes[3] = [6.5, 7.5, 40]; 
    menSizes[4] = [7, 8, 40.5]; 
    menSizes[5] = [8, 9, 42]; 
    menSizes[6] = [8.5, 9.5, 42.5]; 
    menSizes[7] = [9, 10, 43]; 
    menSizes[8] = [9.5, 10.5, 44]; 
    menSizes[9] = [10, 11, 44.5]; 
    menSizes[10] = [10.5, 11.5, 45]; 
    menSizes[11] = [11, 12, 46]; 
    menSizes[12] = [11.5, 12.5, 46.5]; 
    menSizes[13] = [12, 13, 47]; 

$(document).on("pagecreate", "#page1", function(){ 
    $("#slider").on("change", function(){ 
    var sel = menSizes[$(this).val()]; 
    $("#result1").val(sel[0]); 
    $("#result2").val(sel[1]); 
    $("#result3").val(sel[2]);   
    $("#result4").val($(this).val()).selectmenu("refresh"); 
    }); 
}); 

工作DEMO

+0

嘿,這太棒了!非常感謝!快速提問。是否有更新3個輸入和更改下拉列表(更改選擇)時移動滑塊的方法?現在滑塊更新選擇框,但選擇框不會更新其他字段? –

+0

@JASONFOREST,是的,只需要添加一個更改事件到選擇並更新滑塊值並觸發其更改:http://jsfiddle.net/ezanker/phycv1cr/2/ – ezanker

+0

邦上!非常讚賞。 –