Проблемы при создании слайдера jQuery Mobile UI в динамических элементах - PullRequest
Новая
       13

Проблемы при создании слайдера jQuery Mobile UI в динамических элементах

3 голосов
/ 05 февраля 2012

Я пытаюсь создать виджет слайдера пользовательского интерфейса jQuery в динамически создаваемом элементе списка.В настоящее время список работает, элементы создаются и добавляются в список, ползунок отображается и реагирует на ввод пользователя, но он не инициализируется значениями, которые я передал. Я чувствую, что я близок,но я что то упускаюЯ использую jQuery Mobile 1.0.1, с jQuery 1.6.4, и я относительно новичок в Javascript и jQuery.

Помимо формы верхнего и нижнего колонтитула, вот общая сумма контента на главной странице: 

<div data-role="content">
  <ul data-role="listview" data-theme="g" id="items">
  </ul>      
</div>

Ничего особенного.

Теперь пользователь нажимает несколько кнопок в нижнем колонтитуле, массив обновляется, и я добавляю элемент списка как таковой (урезанный): 

    var item = arguments[0];

    // items_in_order is a 2d global array that's 
    // updated w/ the items the user adds
    var li = get_list_item( item, 
                            items_in_order[item][0], 
                            items_in_order[item][1], 
                            items_in_order[item][2] );

    // if the list item already exists, replace it, 
    // otherwise add it to the list as a new entry.        
    if ( $("#item_" + item).length ) {
      $("#item_" + item).replaceWith( li );
    }
    else {
      $("#items").append( li );
    }

    // this is where I'm creating the slider
    if ( items_in_order[item][2] ) {
      $("#item_" + item + "_price_slider").slider({ value: 1, 
                                                    min: 0, 
                                                    max: 2, 
                                                    step: 1 });

    }

    // if we updated an existing list item, recreate it,
    // otherwise recreate the whole list
    if ( $("#item_" + item).length ) {
      $("#item_" + item).trigger('create');
    }
    else {
      $("#items").trigger('create');
    }

    // and refresh the list view
    $('#items').listview('refresh');

И HTML для спискаВ этой функции создается элемент: 

function get_list_item ( name, qty, price, by_weight ) {

  var str = "";
  str += '<li id="item_' + name + '">';
  str += '<table style=" font-size: 20pt; %" ><tr>';
  str +=   '<td style="width: 50%;">' + name + "</td>";
  str +=   '<td style="width: 50%; ">';
  str +=     '<input style=" width: 40px; float: left " type="number" id="item_' + name + '_qty" value="' + qty + '"> x ' + price;
  str +=   '</td>';      
  str += "</tr></table>";
  if ( by_weight ) {
    str += '<div><div id="item_' + name + '_price_slider"></div></div>';

  }
  str += "</li>";

  return str;
}

Опять ничего сложного.Теперь вот HTML-код, который создается при визуализации страницы.(Скопировано из firebug.) 

<li id="item_Potatoes" class="ui-li ui-li-static ui-body-g">
  <table style="font-size: 20pt; width: 100%;">
    <tbody>
      <tr>
        <td style="width: 50%;">Potatoes</td>
        <td style="width: 10%;">
          <input type="number" value="1" id="item_Potatoes_qty" style="width: 40px; float: left;" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"> x 2
        </td>
        <td style="width: 10%;">$2</td>
      </tr>
    </tbody>
  </table>
  <div>
    <div id="item_Potatoes_price_slider" class="ui-slider-switch"></div>
    <div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all">
      <a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="-1" aria-labelledby="item_Potatoes_price_slider-label" style="left: 0%;" aria-valuetext="" title="-1">
        <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
          <span class="ui-btn-text"></span>
        </span>
      </a>
    </div>
  </div>
</li>

Итак, две вещи, которые я замечаю как новичок:

  1. настройки min, max и т. Д. Не установленыправильно.
  2. У меня было впечатление, что вызов .slider() вставит ползунок пользовательского интерфейса в элемент, идентификатор которого он вызывается, в данном случае #item_Potatoes_price_slider, но, как вы можете видеть, он создает новый элемент«рядом» с тем, к которому он был призван.Это уместно или я что-то неправильно понимаю?
  3. Я также включил обратный вызов на slider, чтобы обновить поле #item_Potatoes_qty, когда оно сдвигается, но это тоже не сработало.Я вырезал его во время отладки, и это, похоже, ни на что не влияло.

Итак, есть идеи, почему это не работает?(Кроме того, я также открыт для предложений по улучшению этого и повышению его чистоты.) Спасибо!

...