jQuery Mobile - 使用滑塊並排輸入數字

我正在使用jQuery Mobile。我試圖讓用戶以兩種方式更改滑塊值。數字或百分比。例如，假設一個指標的總數是$ 224。所以50％是112美元。那麼，我希望用戶能夠手動指定$ 100，或手動指定50％。jQuery Mobile - 使用滑塊並排輸入數字

這就是說，我把一個數字文本框和一個滑塊相鄰放置。數字文本框顯示得更大，並且與滑塊的文本框不同。有一點需要注意 - 我已經通過CSS刪除了向上/向下按鈕。

盡我所能，我不能讓這些顯示相同的方式。有人知道需要什麼類嗎？ pageinit（）上完成的更改？

Slider issue

來源

2013-05-20 Paul

使用'UI-grid'把它們並排和文本框，你需要調整其母公司的風格。 '$（'[type = number]'）。closest（'div'）.css（'height'，'30px'）;'。嘗試一下。 – Omar

示例http://jsfiddle.net/Palestinian/2gfVa/ – Omar

謝謝！我玩CSS的時候，直到我還有邊界匹配。你可以張貼這個答案，我可以接受嗎？ – Paul

爲了通過側放元件側，使用ui-grid佈局。對於兩個項目，請將類ui-grid-a添加到div。然後用div和另一個類ui-block-b首先包裝。

Demo

<form> 
<div class="ui-grid-a"> 
    <div class="ui-block-a"> 
    <label for="numbers"></label> 
    <input type="number" name="numbers" id="number" /> 
    </div> 
    <div class="ui-block-b"> 
    <label for="slider-6" class="ui-hidden-accessible">Slider:</label> 
    <input type="range" name="slider-6" id="slider-6" min="0" max="100" value="50" /> 
    </div> 
</div>

可選 - 孩子的div的覆蓋寬度。

.ui-block-a { width: 30% !important; padding-right: 10px !important } 
.ui-block-b { width: 70% !important }

對於輸入，您需要通過jQuery或CSS調整輸入的父div的高度。

注：滑塊有type=number屬性爲好，因此，你需要重寫輸入框僅具有ui-input-text類。

CSS

div.ui-input-text { height: 28px !important }

jQuery的

$('[type=number]').closest('div.ui-input-text').css('height', '28px');

來源

2013-05-22 00:34:21 Omar

jQuery Mobile - 使用滑塊並排輸入數字

回答

相關問題