Установка jquery мобильных слайдеров приводит к ошибке - PullRequest
Новая
       6

Установка jquery мобильных слайдеров приводит к ошибке

0 голосов
/ 27 марта 2019

Я пытаюсь установить значение ползунка в jQuery mobile 1.4.5, JQ 2.1.4 и получаю эту ошибку:

Ошибка: нет такого «значения» метода для экземпляра виджета слайдера

HTML код: 

<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
    <input type="range" name="price_from" id="price_from" min="0" max="30000" step="250"  data-popup-enabled="true">
    <input type="range" name="price_to" id="price_to" min="0" max="30000" step="250"  data-popup-enabled="true">
</div>

JQuery: 

   $('#filter_price').slider();
   $('#filter_price').slider('values', 0,  50);  
   $('#filter_price').slider('values', 1,  100);

Это выглядит точно так же, как в ответе, представленном на SO несколько лет назад, но может быть устаревшим, так как это с 8 лет.

Ответы [ 2 ]

2 голосов
/ 27 марта 2019

Здесь есть пара проблем.Во-первых, вы создали range входные данные внутри div, на котором вы создали экземпляр ползунка.Это только вызовет проблемы, поскольку они мешают расположению слайдера.Я бы предложил удалить их.

Во-вторых, вызов values с двумя аргументами предназначен для использования с ползунком диапазона, а не с ползунком с одним значением.Я бы предположил, что из двух входов диапазона, которые вы имели в DOM, вы пытаетесь сделать выбор диапазона.Таким образом, вам нужно установить range: true на слайдере при его создании.Тогда вы можете позвонить values, как вы сейчас.Попробуйте это: 

$('#filter_price').slider({
  range: true,
  min: 0,
  max: 150
});
$('#filter_price').slider('values', 0, 50);
$('#filter_price').slider('values', 1, 100);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
</div>

Также обратите внимание, что если вы пытаетесь создать ползунок с этими значениями, вы можете предоставить все аргументы в объекте создания экземпляра, без необходимости повторного выбора элемента: 

$('#filter_price').slider({
  range: true,
  min: 0,
  max: 150,
  values: [50, 100]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
</div>
0 голосов
/ 27 марта 2019

Я немного опоздал на вечеринку, но вот решение для jQuery Mobile 1.4.5 rangeslider ( не jQuery-UI ).

Поскольку JQM rangeslider эффективно построен поверх двух ползунков JQM, вы можете программно установить значения min и max внутри этих двух create событий: 

var range = {
  "low": {min: 1, max: 10000}, 
  "medium": {min: 10000, max: 20000}, 
  "high": {min: 20000, max: 30000}
};

$(document).on("slidecreate", "#price_from", function(e) {
  $(this).val(range["medium"].min);
});

$(document).on("slidecreate", "#price_to", function(e) {
  $(this).val(range["medium"].max);
});

$(document).on("rangeslidercreate", "#filter_price", function(e) {
  // rangeslider has been created
});

$(document).on("change", "input:radio[name='price-range']", function() {
  $("#price_from").val(range[this.value].min);
  $("#price_to").val(range[this.value].max);
  $("#filter_price").rangeslider("refresh");
});
.ui-slider-popup {
  width: auto !important;
  padding: 14px 8px 0 !important;
}

.ui-grid-a .ui-block-a,
.ui-grid-a .ui-block-b {
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div id="page-one" data-role="page">
    <div data-role="header">
      <h3>Header</h3>
    </div>
    <div role="main" class="ui-content">
      <br>
      <div class="ui-grid-a">
        <div class="ui-block-a">
          <div data-role="rangeslider" id="filter_price" style="touch-action: none;">
            <input type="range" name="price_from" id="price_from" min="0" max="30000" step="250"  data-popup-enabled="true">
            <input type="range" name="price_to" id="price_to" min="0" max="30000" step="250"  data-popup-enabled="true">
          </div>
        </div>
        <div class="ui-block-b">
          <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
            <input name="price-range" id="price-range-low" value="low" type="radio">
            <label for="price-range-low">Low</label>
            <input name="price-range" id="price-range-medium" value="medium" type="radio" checked="checked">
            <label for="price-range-medium">Medium</label>
            <input name="price-range" id="price-range-high" value="high" type="radio">
            <label for="price-range-high">High</label>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...