11
votes

Créer de manière dynamique des boutons radio groupés verticalement avec jQuery

Je crée de manière dynamique plusieurs boutons radio regroupés verticalement à l'aide de JQuery Mobile 1.0 pour un quiz à choix multiples.

Quand je colle ce code de la JQM BOUTON DE RADIO DOCS TIX STYLES LE CONTRÔLEGROUP correctement. P>

$.getJSON("assets/json/aircraft.json", function (data) {
    var maxQuestions = 10;
    var maxChoices = 4;

    var randomsorted = data.aircraft.sort(function (a, b) {
        return 0.5 - Math.random();
    });

    var quiz = $.grep(randomsorted, function (item, i) {
        return i < (maxQuestions * maxChoices);
    });

    var arr_quiz_markup = [];
    $.each(quiz, function (i, item) {
        var q = Math.floor(i / maxChoices);
        var c = i % maxChoices;

        if (c == 0) arr_quiz_markup.push("<div>Image for question " + q + " goes here...</div><fieldset data-role='controlgroup' data-question='" + q + "'>");

        arr_quiz_markup.push("<input type='radio' name='q" + q + "' id='q" + q + "c" + c + "' data-aircraftid='" + item.id + "' />");
        arr_quiz_markup.push("<label for='q" + q + "c" + c + "'>" + item.name + "</label>");

        if (c == maxChoices - 1 || c == quiz.length - 1) arr_quiz_markup.push("</fieldset><br />");

    });

    $("#questions").html(arr_quiz_markup.join("")).controlgroup("refresh");
});

javascript html jquery-mobile

1 commentaires

Jsfiddle vous permet de "gérer des ressources" pour ajouter JQuery Mobile. Voir JSFIDDLE.net/elijahmanor/5xwe8 Gauche VNI Essayez d'ajouter cette URL code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.js dans votre jsfiddle

3 Réponses :

12
votes

ajoutez cette ligne xxx

après xxx

Cet extrait de code forcera une reconstruction de la page de quiz afin que les styles JQM soient appliqué au contenu de la page.

0 commentaires

3
votes

Vous aurez plus d'informations sur la dynamique de ce jQuery forum thread .

Les styles de défaillance mobiles JQuery seront appliqués une fois que vous utilisez le code suivant. C'est ce que j'ai trouvé et ça marche pour moi. P>

$("input[type='radio']").checkboxradio().checkboxradio("refresh");

0 commentaires

1
votes

Cela fonctionne pour moi (j'utilise jQuery Mobile 1.4.0):

HTML H3>

$.ajax({
    ...
    success: function(data, textStatus, jqXHR) {
        // Hide loading message
        $.mobile.loading("hide");

        // Build page
        $("#location-page").trigger("create");

        // Clear another previos radio options
        $("#locations").controlgroup("container")["empty"]();

        // Read XML response
        var rows = $("Row", data);

        $(rows).each(function(index, value) {
            var locationId = $("LocationID", this).text();
            var locationName = $("LocationName", this).text();
            var $el = $("<label for=\"location" + index + "\">" + locationName + "</label><input type=\"radio\" name=\"location\" id=\"location" + index + "\" value=\"" + locationId + "\">")
            $("#locations").controlgroup("container")["append"]($el);
            $($el[1]).checkboxradio();
        });
        $("#locations").controlgroup("refresh");

        // Change to locations' page
        $.mobile.changePage("#location-page", {transition: "flip"});
    },
    ...
});

0 commentaires