[英]Custom jquery mobile slider labels
我正在努力使它正常工作。 我想向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上测试了它,看来效果很好。 但是我仍然不确定如何使刻度线正常工作。
前一段时间,我写了一个博客条目来定制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;
}
可能听起来很脏,使用桌子将这些标签很好地显示出来。
<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>
尝试一下。 我同意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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.