Come viene eseguito il rendering di un oggetto jQuery Mobile UI post-caricamento

Question

Ho un codice HTML che sto generando utilizzando JS sul lato client. Mi piacerebbe ancora applicare lo stile e le funzionalità dell'interfaccia utente di jQuery Mobile a quegli oggetti. Io non riesco a capire come se ...

dire che ho generare un:

<div data-role="fieldcontain"> 
    <label for="select-choice-1" class="select">Choose shipping method:</label> 
    <select name="select-choice-1" id="select-choice-1"> 
     <option value="standard">Standard: 7 day</option> 
     <option value="rush">Rush: 3 days</option> 
     <option value="express">Express: next day</option> 
     <option value="overnight">Overnight</option> 
    </select> 
</div> 

E voglio renderlo tramite jQuery Mobile UI all'interno di una pagina di ... come si potrebbe farlo?

So con standard di jQuery UI avrei solo fare una chiamata lungo le linee di:

$("#select-choice-1").buttonset(); 

c'è qualcosa di simile per jQuery Mobile UI?

Answer 1

UPDATE!

Sì! La nuova implementazione con l'evento è appena atterrato!

http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/

Ora in beta2 ci sarà un evento che ha attivato create su un elemento causerà la sua resa.

Aggiornerò le faq quando la beta2 viene spedita.

Trova l'elemento più in alto che aggiungi al DOM e chiama .page() su di esso. Questa domanda in effetti duplica molte altre domande taggate con jquery-mobile, quindi ho creato un tutorial per scattare non per descriverlo di nuovo ogni volta.

Vedi primo post qui: http://jquerymobiledictionary.dyndns.org/faq.html

Answer 2

Se chiamato pagecreate

$('#page').live('pagecreate',function(event){ 
    $('#elem_container').page(); 
}); 

si va a fare un giro ciclo ricorsivo. Ho scritto la mia funzione enhance() per occuparmi di questo problema.

$('#page').live('pagecreate',function(event){ 
    enhance($('#elem_container')); 
}); 

La funzione è fondamentalmente solo condensato il codice qui sotto ...

function enhance(dis){ 
    dis.find("[type='radio'], [type='checkbox']").checkboxradio(); 
    dis.find("button, [type='button'], [type='submit'], [type='reset'], [type='image']").not(".ui-nojs").button(); 
    dis.find("input, textarea").not("[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']").textinput(); 
    dis.find("input, select").filter("[data-role='slider'], [data-type='range']").slider(); 
    dis.find("select:not([data-role='slider'])").selectmenu(); 
} 

più vecchio:

Dopo aver scavato intorno al file cellulare jQuery ho finalmente capito che fuori ... abbastanza facile in realtà ...

$("#select-choice-3").selectmenu(); 

E ecco il pezzo di codice ho scavato questo in ...

_enchanceControls: function() { 
    var o = this.options; 
    // degrade inputs to avoid poorly implemented native functionality 
    this.element.find("input").each(function() { 
     var type = this.getAttribute("type"); 
     if (o.degradeInputs[ type ]) { 
      $(this).replaceWith(
       $("<div>").html($(this).clone()).html() 
        .replace(/type="([a-zA-Z]+)"/, "data-type='$1'")); 
     } 
    }); 

    // enchance form controls 
    this.element 
     .find("[type='radio'], [type='checkbox']") 
     .checkboxradio(); 

    this.element 
     .find("button, [type='button'], [type='submit'], [type='reset'], [type='image']") 
     .not(".ui-nojs") 
     .button(); 

    this.element 
     .find("input, textarea") 
     .not("[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']") 
     .textinput(); 

    this.element 
     .find("input, select") 
     .filter("[data-role='slider'], [data-type='range']") 
     .slider(); 

    this.element 
     .find("select:not([data-role='slider'])") 
     .selectmenu(); 
}