Jadery mobiline dinamik içerik eklerken uygun biçimlendirme

Bazı içeriği dinamik olarak jQuery Mobile'da katlanabilir <li> öğesindeki onay kutularının listesine eklemek istiyorum. Güzel yuvarlak köşeler ve gruplanmış öğelerle doğru formatlamayı alamıyorum. Yaprak seviyesinde diğer elementleri eklediğimde daha da kötüleşiyor. Jadery mobiline dinamik içerik eklerken uygun biçimlendirme

Here

sorunu (tabii ki başlığındaki jquery ve jquerymobile komut ve CSS ekleyin) gösteren bir örnektir:

<body> 
<div data-role="page" id="page"> 
    <ul id="listList" data-role="listview"> 
    <li id="list1" data-role="collapsible"> 
    <h3>list 1</h3> 
    <div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup" id="fs1"> 
     <input type="checkbox" id="cb1" /><label for="cb1">text</label></fieldset></div></li> 
    <li id="list2" data-role="collapsible"> 
    <h3>list 2</h3> 
    <p>here comes another list of checkboxes...</p></li></ul> 
<input type="button" onclick="addCheckbox();" value="add a checkbox to list1" /></div> 
</body> 
<script> 
function addCheckbox() { 
    $("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>'); 
} 
</script>

Ben append() çağrısının ardından .page() eklemeye çalıştı ama düzgün olsa işe yaramadı biraz daha iyi.

Örneğimin ötesinde, jenerik soru, jQuery Mobile DOM yapısıyla oynadıktan sonra dinamik olarak DOM ağacına içerik eklemektir. Ağacın "jquerymobilizes" parçasını içeren bir işlev olduğuna inanıyorum ama bulamıyorum.

Yardımlarınız için çok teşekkürler!

DÜZENLEME: Kısacası, dinamik listview biri <li> unsuru haline elemanları eklemeye çalışırken ve listenin kendisine unsurları eklemek çalışmıyorum. listview'u yenilemek, burada yardımcı görünmüyor.

DÜZENLEME 2: Ben .append() (cf JQM FAQ) zincirlenmiş edilebilir .trigger("create") fonksiyonunu buldum gibi biraz daha yakın alıyorum. Aşağıdaki betik ile data-role="controlgroup" güzel yuvarlak kutular ile doğru biçimlendirme sağlamaz olsa biraz daha iyi çalışır.

$("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>').trigger("create");

Bir noktaya varırsam tam yanıtı gönderirim.

DÜZENLEME 3: İşte benim örnek

kaynak

2012-02-26 Mad Echet

Not: Ayrıca örnekte onay kutusunun neden devre dışı bırakıldığını ve varsayılan olarak daraltılmış öğelerin daraltılmadığını merak ediyorum. –

herhangi deneyin ne var:

dinamik jQuery Mobile öğeleri eklemek için

.trigger("create")

katlanabilir elemanın katlanabilir kısmına eklemek için
gruplandırılmış güzel oluşturmasını almak böylece doğrudan oraya içerik eklemek div.ui-collapsible-content eklemek veya katlanabilir kısım harcama öncesi içinde div kapsayıcı oluşturmak Onay kutuları, sen ne gerekli yaptığı Yani burada benim son script Ben sırayla

onları eklendiğinde ben şık yuvarlak köşeler alamadım (bir kerede tüm onay kutularını eklemek gerekir:

$("#list1 div[data-role='fieldcontain']").append('<fieldset data-role="controlgroup">' 
    +'<input type="checkbox" id="cb1" /><label for="cb1">text</label>' 
    +'<input type="checkbox" id="cb2" /><label for="cb2">More text</label></fieldset>' 
    +'<a href="index.html" data-role="button" data-icon="delete">Delete</a>') 
    .trigger("create");

Umarım yardımcı olur!

kaynak

2012-02-27 09:41:54

İşte benim http://jsfiddle.net/hbbvM adresindeki çalışma örneğim –

oldukça emin benim takip Değil jsFiddle gösterilmektedir. Uygun stili nasıl uygulayacağınız hakkında daha fazla bakıyorsunuz. Bu durumda, aşağıdakileri kullanmanız gerekecektir: Listenize yeni öğeler ekledikten sonra bu olacaktır.

kaynak

2012-02-27 02:11:41 imaginethepoet

Teşekkürler, ama sorun şu ki, jQuery mobile bir dizi kapsayıcı yaratıyor ve sayfa yüklendiğinde öğeleri yeniden düzenler. Dinamik olarak yeni jquery öğeleri eklediğimde (bu durumda giriş onay kutularını ve etiketlerini), yeniden düzenleme hiçbir zaman gerçekleşmez, bu nedenle de çirkin sunum. Yenile, liste görünümünde çalışır ancak benim örneğimde sorun, giriş onay kutularından geliyor, listeye herhangi bir öğe eklemiyorum ancak listedeki bir öğenin katlanabilir kısmına öğeler eklemiyorum. –

Bu sorun, dinamik içeriği liste görünümüne ekledikten sonra, jquery mobil sınıfları liste görünümünüz için geçerli olmayabilir. bu yüzden ben bu yüzden benim kendi soru cevap verebilir düşünüyorum şu

$('#listList').listview('refresh'); //which refresh your list view 
$('#listList').listview('refresh',true); //which rebuilds the listview with your new content

kaynak

2012-02-27 04:01:45

Teşekkürler, ancak başka bir yorumda açıklamaya çalıştığım için liste görünümüne öğeler eklemiyorum, ancak öğeleri div öğesinin bir parçasının daraltılabilir kısmına eklemiyorum. Liste görünümünü yenilemek, burada herhangi bir yardıma sahip görünmüyor. –

@Mad Echet: Onclick etkinliğinizin "addCheckbox()" işleviyle çalışmadığını düşünüyorum. Fonksiyon kodunuzun ilk satırına uyarı koyarak bunu kontrol edebilir misiniz? Örneğinizi buradan kontrol edebilirsiniz [link] http://jsfiddle.net/reddyprasad321/wECQx/5/ –

Bir göz attığınız için teşekkürler Niçin olayın neden örneklemede ateş etmediğini (jsfiddle'la aşina değilim) biliyorum ama ateş etmek benim için sorun değildi (metin düzgün bir şekilde eklendi ancak format eksikti). Jsfiddle'a örnek bir çalışma göndermeye çalışacağım ama çözümümümü cevabımda bulabilirsin. –

Jadery mobiline dinamik içerik eklerken uygun biçimlendirme

cevap

İlgili konular