HTML
<div class="container">
<div class="dropdown">
<button id="min-max-price-range" class="dropdown-toggle" href="#" data-toggle="dropdown">Budget<strong class="caret"></strong>
</button>
<div class="dropdown-menu col-sm-2" style="padding:10px;">
<form class="row">
<div class="col-xs-5">
<input class="form-control price-label" placeholder="Min" data-dropdown-id="price-min" />
</div>
<div class="col-xs-2"> - </div>
<div class="col-xs-5">
<input class="form-control price-label" placeholder="Max" data-dropdown-id="price-max" />
</div>
<div class="clearfix"></div>
<ul id="price-min" class="col-sm-12 price-range list-unstyled">
<li data-value="0">0</li>
<li data-value="10">10</li>
<li data-value="20">20</li>
<li data-value="30">30</li>
<li data-value="40">40</li>
<li data-value="50">50</li>
<li data-value="60">60</li>
</ul>
<ul id="price-max" class="col-sm-12 price-range text-right list-unstyled hide">
<li data-value="0">0</li>
<li data-value="10">10</li>
<li data-value="20">20</li>
<li data-value="30">30</li>
<li data-value="40">40</li>
<li data-value="50">50</li>
<li data-value="60">60</li>
</ul>
</form>
</div>
</div>
</div>
HTML
$('#min-max-price-range').click(function(event) {
setTimeout(function() {
$('.price-label').first().focus();
}, 0);
});
var priceLabelObj;
$('.price-label').focus(function(event) {
priceLabelObj = $(this);
$('.price-range').addClass('hide');
$('#' + $(this).data('dropdownId')).removeClass('hide');
});
$(".price-range li").click(function() {
priceLabelObj.attr('value', $(this).attr('data-value'));
var curElmIndex = $(".price-label").index(priceLabelObj);
var nextElm = $(".price-label").eq(curElmIndex + 1);
if (nextElm.length) {
$(".price-label").eq(curElmIndex + 1).focus();
} else {
$('#min-max-price-range').dropdown('toggle');
}
});
<div class="container">
<div class="dropdown">
<button id="min-max-price-range" class="dropdown-toggle" href="#" data-toggle="dropdown">Budget<strong class="caret"></strong>
</button>
<div class="dropdown-menu col-sm-2" style="padding:10px;">
<form class="row">
<div class="col-xs-5">
<input class="form-control price-label" placeholder="Min" data-dropdown-id="price-min" />
</div>
<div class="col-xs-2"> - </div>
<div class="col-xs-5">
<input class="form-control price-label" placeholder="Max" data-dropdown-id="price-max" />
</div>
<div class="clearfix"></div>
<ul id="price-min" class="col-sm-12 price-range list-unstyled">
<li data-value="0">0</li>
<li data-value="10">10</li>
<li data-value="20">20</li>
<li data-value="30">30</li>
<li data-value="40">40</li>
<li data-value="50">50</li>
<li data-value="60">60</li>
</ul>
<ul id="price-max" class="col-sm-12 price-range text-right list-unstyled hide">
<li data-value="0">0</li>
<li data-value="10">10</li>
<li data-value="20">20</li>
<li data-value="30">30</li>
<li data-value="40">40</li>
<li data-value="50">50</li>
<li data-value="60">60</li>
</ul>
</form>
</div>
</div>
</div>
HTML
$('#min-max-price-range').click(function(event) {
setTimeout(function() {
$('.price-label').first().focus();
}, 0);
});
var priceLabelObj;
$('.price-label').focus(function(event) {
priceLabelObj = $(this);
$('.price-range').addClass('hide');
$('#' + $(this).data('dropdownId')).removeClass('hide');
});
$(".price-range li").click(function() {
priceLabelObj.attr('value', $(this).attr('data-value'));
var curElmIndex = $(".price-label").index(priceLabelObj);
var nextElm = $(".price-label").eq(curElmIndex + 1);
if (nextElm.length) {
$(".price-label").eq(curElmIndex + 1).focus();
} else {
$('#min-max-price-range').dropdown('toggle');
}
});
No comments:
Post a Comment