Come si fa a rendere jQuery Mobile UI oggetto di caricamento della pagina postale

Question

Ho un po 'di HTML che sto generando utilizzando JS sul lato client. Mi piace ancora per applicare lo stile e la funzionalità di jQuery Mobile UI a quegli oggetti pure. Io non riesco a capire come se ...

Di 'a 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 fare?

So che la norma jQuery UI che avevo 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.

I aggiornerà la faq quando le navi beta2.

Trova l'elemento più in alto si aggiunge al DOM e call .page() su di esso. Questa domanda, infatti, riproduce un sacco di altre domande tagged jquery-mobile, quindi ho creato un colpo tutorial non per descrivere di nuovo ogni volta.

Vedere 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 di migliorare () per prendersi cura 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 ... in realtà abbastanza facile ...

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

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