動的に作成されたリスト要素で jQuery UI スライダー ウィジェットを作成しようとしています。現状では、リストは機能し、アイテムが作成されてリストに追加され、スライダーが表示されてユーザー入力に応答しますが、渡した値で初期化されていません。しかし、私は何かが欠けています。私は 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>
だから、私が初心者として気づく2つのこと：
- 最小、最大などの設定が正しく設定されていないようです。
.slider()を呼び出すと、id が呼び出された要素 (この場合は ) に ui スライダーが挿入されるような印象を受けましたが、#item_Potatoes_price_sliderご覧のとおり、呼び出された要素の「隣」に新しい要素が作成されています。これは関連性がありますか、それとも何か誤解していますか?sliderボックスがスライドしたときにボックスを更新するためのコールバックも含めていました#item_Potatoes_qtyが、それも機能していませんでした。デバッグ中に切り取りましたが、何の影響もないようです。
それで、これが機能しない理由はありますか？(余談ですが、これを改善し、よりクリーンにするための提案も受け付けています。) ありがとう!