¿Cómo se renderiza la carga de la página de publicación del objeto de interfaz de usuario móvil de jQuery?

Question

Tengo algo de HTML que estoy generando usando JS en el lado del cliente. También me gustaría aplicar el estilo y la funcionalidad de la interfaz de usuario de jQuery Mobile a esos objetos. Me parece que no puede encontrar la manera de que ...

Di genero una:

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

Y quiero volverlo a través de la interfaz de usuario jQuery Mobile dentro de una página ... ¿cómo se hacer eso?

Sé que con la norma jQuery UI que acababa de tener que hacer una llamada a lo largo de las líneas de:

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

¿Existe algo como esto para jQuery Mobile interfaz de usuario?

Answer 1

ACTUALIZACIÓN!

Sí! ¡La nueva implementación con evento acaba de aterrizar!

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

ahora en beta2 habrá un evento create que desencadenó en un elemento hará que su prestación.

Voy a actualizar el faq cuando se envía beta2.

Encuentra el elemento superior que agregas a DOM y llama al .page() en él. Esta pregunta, de hecho, duplica muchas otras preguntas etiquetadas jquery-mobile, por lo tanto, creé un tutorial de disparos para no describirlo nuevamente cada vez.

Ver primer post aquí: http://jquerymobiledictionary.dyndns.org/faq.html

Answer 2

Si se le pide pagecreate

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

que vaya a dar un paseo bucle recursivo. Escribí mi propia función enhance() para solucionar este problema.

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

La función es básicamente sólo condensa el código de abajo ...

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(); 
} 

antigua Página:

Después de cavar alrededor del archivo móvil jQuery que finalmente lo descubrí ... bastante fácil en realidad ...

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

Y aquí está el trozo de código Cavé esto en ...

_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(); 
}