jQuery: как использовать один и тот же виджет несколько раз на одной странице - PullRequest
Новая
       28

jQuery: как использовать один и тот же виджет несколько раз на одной странице

1 голос
/ 29 августа 2010

jQuery UI кажется чувствительным к атрибутам элементов, составляющих виджет.Как тогда я могу использовать один и тот же виджет несколько раз на одной странице \ форме?

Пример - виджет выбора радио, который находится в файле demo index.html, который загружается с помощью jQuery-ui: 

<!DOCTYPE html> 
<html>
    <head> 
        ...
        $(function(){
            $("#radioset").buttonset();
        }
        ...
    </head>
    <body>
        ...
        <form style="margin-top: 1em;"> 
            <div id="radioset"> 
                <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
                <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
                <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
            </div> 
        </form> 
        ...
    </body>
</html>

Какой код я должен добавить, чтобы иметь второй div с другим набором переключателей?

Ответы [ 3 ]

4 голосов
/ 27 ноября 2012

Это на самом деле не требует обтекания формы. Вместо этого вам просто нужно убедиться, что ваши радиогруппы имеют разные названия. Это объяснено более подробно здесь .

3 голосов
/ 11 января 2011

Я считаю, что это то, что вы хотите, а также пример того, как поместить 2 разных радиоприемника в одну форму. Обратите внимание на НАИМЕНОВАНИЕ входов 

$(function(){
            $(".radioset").buttonset();
        }
<form name="form1" style="margin-top: 1em;"> 
    <div id="radioset1" class="radioset"> 
        <input type="radio" id="radioset1-1" name="radio1" /><label for="radioset1-1">Choice 1</label>
        <input type="radio" id="radioset1-2" name="radio1" checked="checked" /><label for="radioset1-2">Choice 2</label> 
        <input type="radio" id="radioset1-3" name="radio1" /><label for="radioset1-3">Choice 3</label>
    </div> 
    <div id="radioset2" class="radioset"> 
        <input type="radio" id="radioset2-1" name="radio2" /><label for="radioset2-1">Choice 1</label>
        <input type="radio" id="radioset2-2" name="radio2" checked="checked" /><label for="radioset2-2">Choice 2</label> 
        <input type="radio" id="radioset2-3" name="radio2" /><label for="radioset2-3">Choice 3</label>
    </div> 
</form>
2 голосов
/ 29 августа 2010 
   $(function(){
            $("#radioset2").buttonset();
        }
<div id="radioset2">

Или вы можете использовать 

$(".radioset").buttonset();

Кто выберет класс радиосети, а не идентификатор, чтобы вы могли иметь много.

На Ваш комментарий: 

$(function(){
                $("#radioset1").buttonset();
                $("#radioset2").buttonset();
            }

<form name="form1" style="margin-top: 1em;"> 
            <div id="radioset1"> 
                <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
                <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
                <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
            </div> 
</form>
<form name="form2" style="margin-top: 1em;"> 
            <div id="radioset2"> 
                    <input type="radio" id="radioAgain1" name="radio" /><label for="radio1">Choice 1</label>
                    <input type="radio" id="radioAgain2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
                    <input type="radio" id="radioAgain3" name="radio" /><label for="radio3">Choice 3</label>
                </div> 
        </form>

Я не вижу причин для того, чтобы вышеупомянутое не работало.

...