Всем привет. Появилась такая простенькая задачка, но, почему-то не выходит её толком закончить. Необходимо переключатель количества материалов внедрить на страницу, где нет возможности редактировать html код. Сам выбор значений выглядит так:
(function ($) {
$('.spinner').each(function() {
var spinner = $(this),
input = spinner.find('input[type="text"]'),
btnUp = spinner.find('.up'),
btnDown = spinner.find('.down'),
// options
step = 1,
min = 1,
max = 100;
input.val(min);
btnUp.click(function(){
input.val() >= max ? $(this).prop("disabled",true) : input.val((input.val()*1) + step);
});
btnDown.click(function(){
input.val() <= min ? $(this).prop("disabled",true) : input.val((input.val()*1) - step);
});
});
})(jQuery);
.spinner {
width: 100px;
height: 50px;
display: table;
margin-bottom: 30px;
}
.spinner input[type="text"] {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
width: 50px;
text-align: center;
height: 50px;
float: left;
border: 1px solid #ccc;
border-right: none;
}
.spinner .nav {
float: left;
}
.spinner .nav .up,
.spinner .nav .down {
cursor: pointer;
border: 1px solid #ccc;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
background-color: #ddd;
color: #333;
font-size: 20px;
}
.spinner .nav .up:hover,
.spinner .nav .down:hover {
box-shadow: inset 0px 0px 17px 0px rgba(255, 255, 255, 0.5);
}
.spinner .nav .up {
border-top-right-radius: 3px;
}
.content .container .spinner .nav .down {
border-bottom-right-radius: 3px;
}
Там же есть и пример кода с инпутами, к которым необходимо добавить кнопки + и - . Пробовал через .append создать структуру перед выполнением функции внутри блока с инпутами, но переключатель перестает работать. Если нужно, добавлю свой код, но, учитывая, что он не работает, толку от этого не много. Буду благодарен за пример или хотя бы направление мысли.
Ответ
Вот готовое решение для ваших нужд:
$(document).ready(function(){
inputNumberPolyfill();
});
var increaseIv = null;
var increaseTm = null;
function inputNumberPolyfill()
{
//if(Modernizr.inputtypes.number) return;
$('.spinner input[type="text"]').each(function(){
var $this = $(this);
var step = parseInt($this.attr('step'), 10);
if(isNaN(step)) step = 1;
$this.parent().append(
'
Комментариев нет:
Отправить комментарий