自定义 jquery 移动滑块标签
Posted
技术标签:
【中文标题】自定义 jquery 移动滑块标签【英文标题】：Custom jquery mobile slider labels 【发布时间】：2017-04-26 20:13:01 【问题描述】：我正在努力让它正常工作。我想在 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 % 进行填充，但这并没有按预期工作。我也尝试过jQuery UI Slider Labels Under Slider、Add tick marks to jQuery slider? 和Set font on custom span jQuery Mobile slider labels 的建议，但我无法让刻度和标签与滑块保持一致。我认为这将是一个简单的格式问题，但我无法将所有内容放在一起。任何帮助是极大的赞赏。
编辑
经过更多研究后，我偶然发现了这个博客：https://css-tricks.com/equidistant-objects-with-css/ 从中我尝试了使用 flex 的选项。所以我将 flex 样式添加到我的标签类中以获得<div class="labels" style="display: flex; justify-content: space-between;">。我在 chrome 和 safari 上对此进行了测试，它似乎工作正常。但我仍然不确定如何让蜱虫工作。
【问题讨论】：
【参考方案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（将您想要的标签文本放在 span 中）
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;
DEMO
【讨论】：
博文中关于自定义滑块背景的部分也很有趣。【参考方案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>
【讨论】：
你测试了吗？ 我没有你提到的问题【参考方案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 移动滑块标签的主要内容，如果未能解决你的问题，请参考以下文章