Стили, которые не применяются должным образом в динамически создаваемых переключателях - PullRequest
Новая
       15

Стили, которые не применяются должным образом в динамически создаваемых переключателях

2 голосов
/ 07 октября 2011

Мне нужно создать группу радиокнопок динамически. Я могу ее успешно создать. Но проблема в том, что динамически созданные радиокнопки не похожи на статические.

Я попробовал два подхода:1) Вызываемый create в классе fieldset - ui-corner-all добавляется на внутренний диапазон, и в результате все переключатели выглядят округленными.2) Вызывается create на элементе div, который включает в себя fieldset - Здесь проблема лучше. Но все еще существуют некоторые проблемы. Сначала, когда есть только радиокнопка, класс ui-controlgroup-last добавляется к этому переключателю. Далее,при добавлении второй радиокнопки класс ui-controlgroup-last добавляется к этой радиокнопке. Но ui-controlgroup-last все еще присутствует в первой радиокнопке, и этот цикл повторяется. В результате все радиокнопки имеют стили последней радиокнопки.

Это мой код: 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
    <script>
$(document).ready(function()
{
    for (var i = 0; i < 3; i++)
    {
        $("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label for="radio1-'+i+'">Value</label>');
        $("#rgroup1").trigger("create");

        $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label for="radio2-'+i+'">Value</label>');
        $("#radiodiv1").trigger("create");

    }
});

    </script>
</head>

<body>
  <div data-role="content">
    <h3>Normal radio buttons</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup">
            <input type="radio" name="rg" id="radio-1"/><label for="radio-1">Value</label>
            <input type="radio" name="rg" id="radio-2"/><label for="radio-2">Value</label>
            <input type="radio" name="rg" id="radio-3"/><label for="radio-3">Value</label>
        </fieldset>
    </div>
    <h3>Dynamically created-Div Refresh</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup1">
        </fieldset>
    </div>
     <h3>Dynamically created-Fieldset Refresh</h3>
    <div id="radiodiv1">
        <fieldset data-role="controlgroup" id="rgroup2">
        </fieldset>
    </div>
  </div>
</body>

PS. Причина, по которой я вызываю команду create после каждого добавления, заключается в том, что именно так она работает в моем фактическом сценарии использования.В каждый момент создается только одна радиокнопка.

Сгенерированный источник 

<html lang="en" class="ui-mobile"><head><base href="http://localhost:8081/html5/calendar-new/radio_issue.html">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css">
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
    <script>
$(document).ready(function()
{
    for (var i = 0; i < 3; i++)
    {
        $("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label for="radio1-'+i+'">Value</label>');
        $("#rgroup1").trigger("create");

        $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label for="radio2-'+i+'">Value</label>');
        $("#radiodiv1").trigger("create");

    }
});

    </script>
<title></title></head>

<body class="ui-mobile-viewport"><div data-role="page" data-url="/html5/calendar-new/radio_issue.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 933px; ">
  <div data-role="content" class="ui-content" role="main">
    <h3>Normal radio buttons</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
            <div class="ui-radio"><input type="radio" name="rg" id="radio-1"><label for="radio-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-top ui-btn-up-c"><span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div>
            <div class="ui-radio"><input type="radio" name="rg" id="radio-2"><label for="radio-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div>
            <div class="ui-radio"><input type="radio" name="rg" id="radio-3"><label for="radio-3" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div>
        </fieldset>
    </div>
    <h3>Dynamically created-Div Refresh</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup1" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
        <div class="ui-radio"><input type="radio" name="rg1" id="radio1-0"><label for="radio1-0" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg1" id="radio1-1"><label for="radio1-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg1" id="radio1-2"><label for="radio1-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div></fieldset>
    </div>
     <h3>Dynamically created-Fieldset Refresh</h3>
    <div id="radiodiv1">
        <fieldset data-role="controlgroup" id="rgroup2" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
        <div class="ui-radio"><input type="radio" name="rg2" id="radio2-0"><label for="radio2-0" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-top ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg2" id="radio2-1"><label for="radio2-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg2" id="radio2-2"><label for="radio2-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div></fieldset>
    </div>
  </div>

</div><div class="ui-loader ui-body-a ui-corner-all" style="top: 290px; "><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div></body></html>

Ответы [ 4 ]

2 голосов
/ 31 октября 2011

Я исправил эту проблему, явно удалив классы ui-controlgroup-last и ui-corner-bottom из всех меток, кроме метки для последнего переключателя 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
    <script>
$(document).ready(function()
{
    for (var i = 0; i < 3; i++)
    {
        /*$("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label id="label1-'+i+'" for="radio1-'+i+'">Value</label>');
        $("#rgroup1").trigger("create");*/


        $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label id="label2-'+i+'"for="radio2-'+i+'">Value</label>');
        $("#radiodiv1").trigger("create");


    }
    for (var i = 0; i < 2; i++)
    {
        $('#label2-'+i).removeClass("ui-controlgroup-last ui-corner-bottom");
    }
});

    </script>
</head>

<body>
  <div data-role="content">
    <h3>Normal radio buttons</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup">
            <input type="radio" name="rg" id="radio-1"/><label for="radio-1">Value</label>
            <input type="radio" name="rg" id="radio-2"/><label for="radio-2">Value</label>
            <input type="radio" name="rg" id="radio-3"/><label for="radio-3">Value</label>
        </fieldset>
    </div>
    <!-- <h3>Dynamically created-Div Refresh</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup1">
        </fieldset>
    </div> -->
     <h3>Dynamically created-Fieldset Refresh</h3>
    <div id="radiodiv1">
        <fieldset data-role="controlgroup" id="rgroup2">
        </fieldset>
    </div>
  </div>
</body>

1 голос
/ 07 октября 2011

Вам нужно обновить кнопки ..

Обновление радиокнопки

Если вы манипулируете радиокнопкой через JavaScript, вы должны вызвать для нее метод обновления, чтобы обновить визуальный стиль.Вот пример: 

$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-radiobuttons.html

0 голосов
/ 08 ноября 2016

Если кто-то столкнется с этим вопросом, правильный способ применить стиль с текущей версией (1.4.5) будет EnhifyWithin

В фрагменте кода, который я написал, после создания небольшого динамического HTML-кода я добавляю его, а затем применяю стили: 

var currentAddressInput = new AddressInterface();
jQuery("#contentDiv").append(currentAddressInput.domElement).enhanceWithin();
0 голосов
/ 07 октября 2011

поскольку вы используете jquery, я бы порекомендовал вам использовать

$ ("# radio1 -" + i) .addClass ("classname")

...