Latest web development tutorials

jQuery UI API -: Selector tabbable

catégorie

Selector (sélecteurs) | le noyau de l' interface utilisateur (UI de base)

usage

onglet Utilisateurs Choisissez l' élément de mise au point clé peut passer: Description.

jQuery( ":tabbable" )

Certains éléments se sont focalisés par la touche de tabulation (tabbable), tandis que d'autres éléments doivent définir explicitement un index de tabulation positive. Dans les deux cas, afin de se concentrer par la touche de tabulation (tabbable), l'élément doit être visible.

Les types d'éléments suivants , sans avoir un index de tabulation négatif et n'a pas été désactivé, se concentre à travers l' onglet clé (tabbable): input , select , textarea , button et object . Si l'ancre avec href ou positif tabindex attribut, est centré (tabbable) à travers la touche de tabulation. area éléments Si une carte nommée, et avec un href attribut, et il y a une image visible en utilisant la carte, il se concentre à travers l' onglet clé (tabbable). Toute autre basée uniquement sur tabindex attributs de l' élément et la visibilité est focalisée par onglet clé (tabbable).

REMARQUE: élément d'onglet avec un indice négatif est :focusable , non :tabbable .

Exemples

Sélectionnez la mise au point de la touche de tabulation à travers les éléments, et mis en évidence avec une bordure rouge.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre>: Sélecteur tabbable Exemples </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Style>
  entrée {
    border: 1px solid # 000;
  }
  div {
    padding: 5px;
  }
  </ Style>
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Div> <valeur d'entrée = "no tabindex"> </ div>
<Div> <input tabindex = "5" value = "tabindex positif"> </ div>
<Div> <input tabindex = "- 1" value = "tabindex négative"> </ div>
 
<Script>
$ ( ": Tabbable") Css ( "border-color", "rouge");
</ Script>
 
</ Body>
</ Html>

la