jQuery：如何在单个页面上多次使用相同的小部件

发布于 2024-09-16 13:58:37 字数 936 浏览 3 评论 0原文

jQuery UI 似乎对组成小部件的元素的属性很敏感。那么如何在单个页面\表单中多次使用相同的小部件？

示例 - 单选选择小部件，它位于使用 jQuery-ui 下载的演示 index.html 文件中：

<!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？

原文

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>
    <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>

What code then should I add to have a second div with a different set of radio buttons?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

筱果果 2024-09-23 13:58:37

它实际上并不需要将表格包裹起来。相反，您只需确保您的无线电组具有不同的名称即可。此处有更详细的解释。

回复收藏 0 原文

木森分化 2024-09-23 13:58:37

我相信这就是您想要的，以及如何将 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>

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>

回复收藏 0 原文

注定孤独终老 2024-09-23 13:58:37

   $(function(){
            $("#radioset2").buttonset();
        }
<div id="radioset2">

或者你可以使用

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

Wich 选择无线电集类而不是 id，这样你就可以有很多。

针对您的评论：

$(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>

我认为上述内容没有理由不起作用。

   $(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.

回复收藏 0 原文

~没有更多了~