jQuery Mobile的複選框造型問題

我設法風格我複選框在JQuery的，因爲我想他們看：jQuery Mobile的複選框造型問題

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>';

結果是靜態的（無操作或單擊按鈕時，狀態變化）。

如何讓他們充當正常複選框，點擊時更改其檢查狀態？

謝謝！

來源

2013-03-01 galgo

我想你你的HTML字符串附加到具有ID myCheckBoxes

例如DIV：<div id="myCheckBoxes"></div>

嘗試如下

$('#myCheckBoxes').html(content); 
$('#myCheckBoxes').trigger("create");

來源

2013-03-01 06:08:50

檢查小提琴似乎你需要進一步的工作風格http://jsfiddle.net/XN5Xt/ – 2013-03-01 06:09:20

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-01 00:49:16 Nux

對不起，但你失去了我：s – galgo 2013-03-01 02:02:39

我試圖告訴你，你添加的類是內部JQM類，你不應該是真正的請使用它們。使用標準的HTML和少量的'data-'屬性並在容器上創建觸發器。這將添加類和行爲。 – Nux 2013-03-01 02:17:39

區別在於我可以對實際按鈕進行樣式設置，如下所示：[鏈接]（http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html） – galgo 2013-03-01 02:20:50

jQuery Mobile的複選框造型問題

回答

相關問題