0

JQueryでチェックボックスのスタイルを設定し、見た目どおりにしました。

var content = '<fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">' +
    '<div class="ui-controlgroup-controls">' +
    '<div class="ui-checkbox">' +
    '<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom">' +
    '<label for="checkbox-1a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-checkbox-on ui-btn-up-c">' +
    '<span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Food</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on">&nbsp;</span></span></label></div>' +
    '<div class="ui-checkbox">' +
    '<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom">' +
    '<label for="checkbox-4a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off ui-corner-bottom ui-controlgroup-last">' +
    '<span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Sun Chips</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span></span></label></div>' +
    '</div></fieldset>';

結果は静的です（ボタンをクリックしてもアクションやステータスは変更されません）。

クリックするとチェックされたステータスを変更して、通常のチェックボックスとして機能させるにはどうすればよいですか？

ありがとうございました！

4

2 に答える 2

1

私はあなたがあなたのhtml文字列をIDを持つdivに追加すると思いますmyCheckBoxes

例えば：<div id="myCheckBoxes"></div>

以下のようにしてみてください

$('#myCheckBoxes').html(content);
$('#myCheckBoxes').trigger("create");
于 2013-03-01T06:08:50.177 に答える
0

jQuery Mobileは、要素のスタイルを設定するだけでなく、イベント処理とクラス/属性の切り替えも追加します（JUIと同様ですが、タグにJQMが含まれています）。したがって、この動作を独自に追加するか、JQMが解析を開始する前に標準要素を挿入するか、標準要素を挿入してJQMに再度解析させる必要があります。

JQMでモバイルページのマークアップを再レンダリングするには、次のように呼び出す必要があります。

$jqueryElement.trigger("create");

例$jqueryElement：

$jqueryElement = $('#elementId');

編集：言い換えれば、のようなクラスを使用するべきではありませんui-checkbox。次のようなラベルとフィールドセットを使用して、単純な入力を追加する必要があります。

<fieldset data-role="controlgroup" data-type="vertical">
    <input id="foo1" name="foo" type="checkbox"><label for="foo1">Option 1</label>`
    <input id="foo2" name="foo" type="checkbox"><label for="foo2">Option 2</label>`
</fieldset>
于 2013-03-01T00:49:16.623 に答える