Question

也许我的最后一个问题（现已删除）被误解了，所以这次我更加清晰地重新发布它：

的jQuery（UI）：

$("#tabs").tabs({
   select: function(event, ui) { 
        alert(ui.panel.id);
        $('input[name=myinput], textarea[name=myinput]').attr('disabled', true); 
        $('input[name=myinput].' + ui.panel.id + ', textarea[name=myinput].' + ui.panel.id).removeAttr('disabled'); 
        $('input[name=source]').val(ui.panel.id);
   }
});

HTML：

<div id='tabs'>
    <ul>
        <li><a href="#direct">Direct input</a></li>
        <li><a href="#files">File upload</a></li>
        <li><a href="#uri">URI</a></li>
    </ul>
    <div id="direct">
        <textarea name='myinput' class='direct'></textarea>
    </div>
    <div id="file">
       <input type='file' name='myinput' class='file' />
    </div>
    <div id="uri">
       <input type='text' name='myinput' class='uri' />
    </div>
</div>
<input type='hidden' name='source' value='direct' />
<input type='submit' value='GO' />

我不太明白jQuery在输入方面做了什么。我想使用常规的jQuery并避免使用“jQueryUI”选项卡，因此我了解输入时发生的事情很重要，我可以在使用常规jQuery时重现相同的效果。希望我有意义。

感谢您的帮助！

Answer 1

调用select函数时：

$('input[name=myinput], textarea[name=myinput]').attr('disabled', true);

查找名为input的所有textarea和myinput元素，然后停用它们。

$('input[name=myinput].' + ui.panel.id + ', textarea[name=myinput].' + ui.panel.id).removeAttr('disabled');

查找名称为input 的所有textarea元素和myinput元素以及与ui.panel.id属性值匹配的类并启用它们。

$('input[name=source]').val(ui.panel.id);

找到名为input的{{1}}元素（或元素，但我打赌只有一个元素），并将其值设置为source属性的值。

例如：停用所有ui.panel.id myinput和input元素，但与textarea匹配的元素除外属性根据其类，并将名为ui.panel.id的{{1}}的值设置为该属性，可能是为了跟踪哪些输入已启用/哪个选项卡显示。

Answer 2

.tabs()是一个jQuery UI插件，可将您刚刚提供的标记转换为选项卡式浏览界面。如果你愿意，你可以在jQuery中编写自己的tabs()函数，但是你很容易download a custom build of jQuery UI。取消选择所有内容，然后选择选项卡（仅需要Core和Widget）...

如果您已经更换了标签，那么T.J.汇总了一个可靠的答案，描述了select事件处理程序正在做什么。每次选择新的活动选项卡时都会触发它。

Answer 3

你似乎错误地认为jQuery UI是jQuery的一个版本。事实上，它是一个jQuery插件。它相当重量级，重达数千字节。要在不使用jquery ui的情况下重现jquery ui选项卡代码将是一项重大的工作。您向我们展示的代码只是调用jquery ui来创建选项卡，但是tab插件在幕后进行了大量的工作。您可能希望重新考虑离开jquery ui的愿望。

请解释这个jQuery

3 个答案: