S'il vous plaît expliquer jQuery

Question

Peut-être ma dernière question (maintenant supprimé) a été mal compris, donc je suis reposter avec plus de clarté cette fois:

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

Je ne comprends pas très bien ce que fait jQuery avec l'entrée. Je veux utiliser jQuery régulière et éviter les onglets "jQueryUI" il est donc important que je comprenne ce qui se passe avec l'entrée pour que je puisse reproduire le même effet lorsque j'utilise jQuery régulière. J'espère que j'ai du sens.

Merci pour votre aide!

Answer 1

Lorsque la fonction est appelée select:

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

Trouver tous input et textarea éléments nommés myinput et les désactiver.

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

Trouver tous input éléments et textarea éléments avec le nom myinputet la classe qui correspond à la valeur de la propriété ui.panel.id et leur permettre.

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

Trouver l'élément input (ou des éléments, mais je parie qu'il n'y a qu'un seul) avec le nom source et définissez sa valeur à la valeur de la propriété ui.panel.id.

Exemples: Désactiver tous les myinputinput et textarea éléments , sauf l'un correspondant à la propriété ui.panel.id en fonction de sa classe, et définir la valeur de la input nommé source à cette propriété, sans doute pour garder une trace de ce qui les entrées sont activées/quel onglet est affiché.

Answer 2

.tabs() est un plugin jQuery UI qui transforme le marquage que vous venez de donner en une interface de navigation par onglets. Vous pouvez écrire votre propre fonction tabs() dans jQuery si vous le souhaitez, mais vous pouvez facilement download a custom build of jQuery UI. Désélectionner tout, puis sélectionnez les onglets (qui ne nécessite que de base et Widget) ...

Si vous avez déjà votre remplacement des onglets, T.J. mettre en place une réponse solide décrivant ce que fait le gestionnaire d'événements select. Il est déclenché chaque fois que vous sélectionnez un nouvel onglet actif.

Answer 3

Vous semblez avoir l'impression erronée que jQuery UI est une version de jQuery. C'est, en fait, un plugin jQuery. C'est assez lourd, pesant plusieurs kilo-octets. Reproduire le code de l'onglet jquery ui sans utiliser jquery ui serait un effort important. Le code que vous nous avez montré appelle simplement jquery ui pour créer les onglets, mais le plugin de l'onglet fait énormément de travail en coulisse. Vous voudrez peut-être repenser votre désir de vous éloigner de jquery ui.