自定義jQuery移動滑塊標簽

Question

我正在努力使它正常工作。 我想向jquery mobile的滑塊小部件（ https://api.jquerymobile.com/slider/ ）添加刻度線和自定義標簽。首先，我想在0、25、50、75和100處添加刻度線。勾選我想要一個自定義的字符串/標簽。 最后，我希望標簽隨着頁面大小的變化而隨着jquery滑塊縮放。 現在，我可以添加沒有刻度的標簽，但是它僅適合一種屏幕尺寸。

 $( ".ui-content" ).on( "slidestop", function( event, ui ) { event.preventDefault(); event.stopImmediatePropagation(); var newState = $("#slider-0").val(); } );

 <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="main" class="ui-content" style="padding: 40px;"> <div role="main" class="ui-content"> <div class="labels" > <label for="points" style="display: inline; padding: 55px;">volume off</label> <label style="display: inline; padding: 50px;" for="points">quiet</label> <label style="display: inline; padding: 50px;" for="points">normal</label> <label style="display: inline; padding: 50px" for="points">loud</label> <label style="display: inline; padding: 50px" for="points">max</label> </div> <input type="range" data-highlight="true" data-popup-enabled="true" name="slider-0" id="slider-0" value="50" min="0" max="100" data-theme="b" data-track-theme="a"/> </div> </div> </div> </body> </html>

我已經嘗試過使用CSS％進行填充，但是沒有按預期工作。 我也在這里嘗試了建議，在Slider下的jQuery UI Slider Labels ，在這里向jQuery滑塊添加刻度線？ 在自定義跨度jQuery Mobile滑塊標簽上設置字體，但我無法使刻度和標簽與滑塊保持一致。 我以為這是一個簡單的格式化問題，但是我很難將所有內容放在一起。 任何幫助是極大的贊賞。

編輯

經過更多研究后，我偶然發現了該博客： https : //css-tricks.com/equidistant-objects-with-css/，從中我嘗試使用flex選項。 因此，我將flex樣式添加到了標簽類中，以獲取<div class="labels" style="display: flex; justify-content: space-between;"> 。 我在chrome和safari上測試了它，看來效果很好。 但是我仍然不確定如何使刻度線正常工作。

Answer 1

前一段時間，我寫了一個博客條目來定制jQM滑塊小部件：

https://jqmtricks.wordpress.com/2014/04/21/fun-with-the-slider-widget/

在其中的示例中，添加了可以隨着滑塊縮放的刻度線和標簽。 這是更新后的代碼，使標簽在滑塊上方而不是滑塊下方，以及在CodePen中運行的代碼的演示：

的HTML

    <div id="example2a" class="example" >
        <label for="theSlider2a">Slider with Tick marks:</label>
        <input type="range" name="theSlider2a" id="theSlider2" min="0" max="100" value="60" />
    </div>

JavaScript （將所需的標簽文本放入跨度中）

var ticks  = '<div class="sliderTickmarks "><span>volume off</span></div>';
    ticks += '<div class="sliderTickmarks "><span>Quiet</span></div>';
    ticks += '<div class="sliderTickmarks "><span>Normal</span></div>';
    ticks += '<div class="sliderTickmarks "><span>Loud</span></div>';
    ticks += '<div class="sliderTickmarks "><span>Max</span></div>';

$("#example2a .ui-slider-track").prepend(ticks);

的CSS

.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: -135%;
    margin-left: -16px;
    font-size: 12px; font-weight: normal; white-space: nowrap;
}
.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;
}

演示

Answer 2

可能聽起來很臟，使用桌子將這些標簽很好地顯示出來。

        <div role="main" class="ui-content">
            <table class="labels">
            <tr>
              <td>volume off</td>
              <td>quiet</td>
              <td>normal</td>
              <td>loud</td>
              <td>max</td>
            </tr>
            </table>
            <input type="range" data-highlight="true" data-popup-enabled="true" name="slider-0" id="slider-0" value="50" min="0" max="100" data-theme="b" data-track-theme="a"/>
        </div>

Answer 3

嘗試一下。 我同意flexbox方法是最好的方法。 您的剔號問題的答案可能是左邊框為黑色的偏移div。

  //I didn't touch this $( ".ui-content" ).on( "slidestop", function( event, ui ) { event.preventDefault(); event.stopImmediatePropagation(); var newState = $("#slider-0").val(); } );

 .labels { display: flex; justify-content: space-between; width: 92.5%; margin-left:7.5% } .verticalLine { height:10px; border-left: solid black; margin-left: 50%; }

 <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="main" class="ui-content" style="padding: 40px;"> <!-- Remove padding. Add tick divs --> <div role="main" class="ui-content"> <div class="labels" > <label for="points" style="display: inline;">volume off <div class="verticalLine"></div> </label> <label style="display: inline;" for="points">quiet <div class="verticalLine"></div> </label> <label style="display: inline;" for="points">normal <div class="verticalLine"></div> </label> <label style="display: inline;" for="points">loud <div class="verticalLine"></div> </label> <label style="display: inline;" for="points">max <div class="verticalLine"></div> </label> </div> <input type="range" data-highlight="true" data-popup-enabled="true" name="slider-0" id="slider-0" value="50" min="0" max="100" data-theme="b" data-track-theme="a"/> </div> </div> </div> </body> </html>

自定義jQuery移動滑塊標簽

問題描述

3 個解決方案

解決方案1
1 已采納 2016-12-12 13:21:24

解決方案2
0

解決方案3
0 2016-12-12 04:16:09

自定義jQuery移動滑塊標簽

問題描述

3 個解決方案

解決方案1 1 已采納 2016-12-12 13:21:24

解決方案2 0

解決方案3 0 2016-12-12 04:16:09

解決方案1
1 已采納 2016-12-12 13:21:24

解決方案2
0

解決方案3
0 2016-12-12 04:16:09