Please explain this jQuery

Question

Perhaps my last question (now deleted) was misunderstood so I'm reposting it with more clarity this time:

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

I don't quite understand what the jQuery is doing with the input. I want to use regular jQuery and avoid the "jQueryUI" tabs so its important that I understand what happening with the input to I can reproduce the same effect when I use regular jQuery. Hope I'm making sense.

Thanks for your help!

Answer 1

When the select function is called:

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

Find all input and textarea elements named myinput and disable them.

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

Find any input elements and textarea elements with the name myinput and the class that matches the value of the ui.panel.id property and enable them.

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

Find the input element (or elements, but I bet there's only one) with the name source and set its value to the value of the ui.panel.id property.

E.g.: Disable all of the myinput input and textarea elements except the one matching the ui.panel.id property according to its class, and set the value of the input named source to that property, presumably to keep track of which inputs are enabled / which tab is showing.

Answer 2

.tabs() is a jQuery UI plugin that turns the markup you just gave into a tabbed browsing interface. You could write your own tabs() function in jQuery if you wished, but you could easily download a custom build of jQuery UI. Deselect everything, then select tabs (which only requires Core and Widget)...

If you already have your tabs replacement, T.J. put together a solid answer describing what the select event handler is doing. It is fired every time you select a new active tab.

Answer 3

You seem to be under the mistaken impression that jQuery UI is a version of jQuery. It is, in fact, a jQuery plugin. It's fairly heavyweight, weighing in at many kilobytes. To reproduce the jquery ui tab code without using jquery ui would be a significant effort. The code you've shown us is simply calling jquery ui to create the tabs, but the tab plugin is doing a massive amount of work behind the scenes. You may wish to rethink your desire to move away from jquery ui.