代码之家 › 专栏 › 技术社区 › eozzy

请解释一下这个jquery

tabs jquery-ui jquery

eozzy · 技术社区 · 15 年前

也许我的最后一个问题(现在已删除)被误解了,所以这次我要更清楚地转载它:

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时,对输入所做的操作可以重现相同的效果。希望我说得通。

谢谢你的帮助!

3 回复 | 直到 15 年前

T.J. Crowder 15 年前

当 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');

找到任何 输入 元素和 特克斯塔利亚 具有名称的元素 输入输出 和与的值匹配的类 ui.panel.id 属性并启用它们。

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

找到 输入 元素(或元素,但我敢打赌只有一个)的名称 source 并将其值设置为 I.PANEL.ID 财产。

例如。: 禁用所有 输入输出 输入 和 特克斯塔利亚 元素除了一个匹配的 I.PANEL.ID 属性,并设置 输入 命名 来源 到该属性,大概是为了跟踪启用了哪些输入/显示了哪些选项卡。

gnarf 15 年前

.tabs() 是一个jquery ui插件,它将您刚才给出的标记转换为选项卡式浏览界面。你可以自己写 tabs() 如果您愿意,可以在jquery中使用,但是您可以轻松地 download a custom build of jQuery UI . 取消选择所有内容,然后选择选项卡(这只需要核心和小部件)。

如果你已经更换了标签,T.J.会给出一个明确的答案,描述 select 事件处理程序正在执行。每次选择一个新的活动选项卡时,它都会被激发。

Benson 15 年前

您似乎错误地认为jquery ui是jquery的一个版本。实际上,它是一个jquery插件。它相当重,重达几千字节。在不使用jquery ui的情况下复制jquery ui选项卡代码是一项重要的工作。您向我们展示的代码只是调用jquery ui来创建选项卡,但是这个选项卡插件在幕后做了大量的工作。您可能希望重新考虑离开jquery ui的愿望。