1
Here is a link to my JSFiddleCSS를 현재
사용하여 텍스트 상자 후 달러 텍스트 상자 전에 기호와 "K"를 추가하는 방법, 당신은 슬라이더 막대를 이동 할 수 있으며, 텍스트 입력이 변경됩니다 0에서 100
질문 : 내가 텍스트 상자와 텍스트 상자 후 'K'앞에 '$'를 추가하고 싶습니다 - 20 $ 20K로 표시됩니다 즉, 50이 나타 $ 50,000
바람직으로 , '$'와 'k'를 추가하기 위해 CSS를 사용하고 싶습니다. 따라서 값은 영향을받지 않습니다.
HTML :
<div id="container">
<input id="min" type="text" class="sliderValue" data-index="0" value="1" />
<div id="slider"></div>
</div>
CS :
#container {
width:200px;
margin:40px;}
#min, #max {
width: 50px;
height:40px;
border: none;
text-align: center;
font: normal 24px verdana;}
JS를 (위의 jsfiddle 링크에서 볼 수 있듯이) 내가 지금까지 무엇을 가지고
:
$(document).ready(function() {
$("#slider").slider({
range: false,
min: 0,
max: 100,
step: 1,
values: [1],
slide: function (event, ui) {
for (var i = 0; i < ui.values.length; ++i) {
$("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
};
var delay = function() {
var handleIndex = $(ui.handle).data('index.uiSliderHandle');
var label = handleIndex == 0 ? '#min' : '#max';
$(label).html(ui.value).position({
my: 'center top',
at: 'center bottom',
of: ui.handle,
offset: "0, -74"
});
};
setTimeout(delay, 0);
}
});
$("input.sliderValue").change(function() {
var $this = $(this);
$("#slider").slider("values", $this.data("index"), $this.val());
var handle = $(this).attr('id') == 'min' ? 0 : 1;
$(this).position({
my: 'center top',
at: 'center bottom',
of: $('a.ui-slider-handle:eq(' + handle + ')'),
offset: "0, -54"
});
});
$('#min').html($('#slider').slider('values', 0)).position({
my: 'center top',
at: 'center bottom',
of: $('#slider a:eq(0)'),
offset: "0, -54"
});
$('#max').html($('#slider').slider('values', 1)).position({
my: 'center top',
at: 'center bottom',
of: $('#slider a:eq(1)'),
offset: "0, -54"
});
});
감사합니다! - 완벽하게 작동했습니다. – James
살아있는 예제는 404'ing입니다. –
가능한 경우 CSS로 처리하는 것을보고 싶습니다. – pthurmond