jQuery: How to use the same widget multiple times on a single page
jQuery UI seems to be sensitive to the attributes of the elements that compose a widget. How then can I use the same widget mutiple times in a single page\form?
Example - the radio select widget, which comes in the demo index.html file that downloads with jQuery-ui:
<!DOCTYPE html>
<html>
<hea开发者_JAVA百科d>
...
$(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>
What code then should I add to have a second div with a different set of radio buttons?
It doesn't actually require the form to be wrapped around. Instead, you just need to make sure your radio groups have different names. It's explained in greater detail here .
I believe this is what you want, along with an example of how to put 2 different radio sets into one form. Notice the NAME of the inputs
$(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>
$(function(){
$("#radioset2").buttonset();
}
<div id="radioset2">
Or you could use
$(".radioset").buttonset();
Wich would select the radioset class not the id so you could have many.
To address your comment:
$(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>
I see no reason for the above not to work.
加载中,请稍侯......
精彩评论