Latest web development tutorials

jQuery UI API - élément de patte (Tabs Widget)

catégorie

Widgets (Widgets)

usage

Description: Un multi-panel zone de contenu unique, chaque panneau dans le titre de la liste.

Nouvelle Version: 1.0

Onglets (Tabs) est normalement utilisé le contenu en une pluralité de sections, afin d'économiser de l'espace, comme l'accordéon (accordéon) le même.

Onglets (Tabs) a un ensemble spécifique de balises qui doit être utilisé afin de fonctionner correctement onglets:

  • Onglets (Tabs) doit être un ordre ( <ol> ) ou unordered ( <ul> liste)
  • "Titre" tag de chaque page doit être un élément de la liste ( <li> interne), et doit être utilisé avec un href attribut de l'ancre ( <a> ) package.
  • Chaque plaque d'étiquette peut être tout élément de page valide, mais il doit avoir un id, hachage d'ancrage associé à l'identifiant onglets correspondants.

Le contenu de chaque page de l'onglet de la plaque peuvent être définies dans la page est bonne, ou peut être chargé via Ajax. Les deux méthodes sont basées sur la page de l'ancre tag href processus automatique. Par défaut, lorsque vous cliquez sur l'onglet pour activer, mais l' event options que vous pouvez modifier ou annuler l' événement.

Voici quelques exemples d'étiquettes: 

<div id = "tabs">
  <Ul>
    <Li> <a href="#fragment-1"> </a> </ li>
    <Li> <a href="#fragment-2"> deux </a> </ li>
    <Li> <a href="#fragment-3"> trois </a> </ li>
  </ Ul>
  <Div id = "fragment-1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed nonummy diam nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </ Div>
  <Div id = "fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed nonummy diam nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </ Div>
  <Div id = "fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed nonummy diam nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </ Div>
</ Div>

Clavier interaction

Lorsque l'accent est mis sur un onglet, les commandes clavier suivantes sont disponibles:

  • UP / LEFT: Déplacez le curseur sur l'onglet précédent. Si l'étiquette sur la première page, puis déplacer le focus vers le dernier onglet. Dans un court délai après l'activation de l'onglet ciblée.
  • BAS / DROITE: Déplacez le curseur sur l'onglet suivant. Si une étiquette sur la dernière page, puis déplacer le focus sur le premier onglet. Dans un court délai après l'activation de l'onglet ciblée.
  • HOME: Déplacez le curseur sur le premier onglet. Dans un court délai après l'activation de l'onglet ciblée.
  • END: Déplacez le curseur sur le dernier onglet. Dans un court délai après l'activation de l'onglet ciblée.
  • ESPACE: activation associé au panneau de l'onglet ciblé.
  • ENTRER: activer ou commutateur associé au panneau de l'onglet ciblé.
  • ALT + PAGE UP: Déplacer le curseur à l'onglet précédent et immédiatement activé.
  • ALT + PAGE DOWN: Déplacez le curseur sur l'onglet suivant, et activé immédiatement.

Lorsque l'accent est mis sur le panneau, les commandes clavier suivantes sont disponibles:

  • CTRL + UP: Déplacez le curseur sur l'onglet correspondant.
  • ALT + PAGE UP: Déplacer le curseur à l'onglet précédent et immédiatement activé.
  • ALT + PAGE DOWN: Déplacez le curseur sur l'onglet suivant, et activé immédiatement.

theming

membre Tab (Tabs Widget) en utilisant framework jQuery UI CSS pour définir l'aspect et la convivialité de son style. Si vous avez besoin d'utiliser les onglets de style spécifiés, vous pouvez utiliser le nom de la classe CSS suivante:

  • ui-tabs : l'onglet conteneur extérieur. Lorsque vous définissez un collapsible d' options -time, les éléments supplémentaires sont fournis avec un ui-tabs-collapsible , classe.
    • ui-tabs-nav : liste des onglets.
      • Liste de navigation item sera activé avec un ui-tabs-active , classe. Contenu chargé via Ajax appel apparaîtra avec une liste d'éléments ui-tabs-loading , classe.
        • ui-tabs-anchor : Switchboard pour les ancres.
    • ui-tabs-panel : les panneaux liés tabulations. Seul l'onglet correspondant est visible uniquement lorsqu'il est activé.

Fiez

informations complémentaires

  • La partie exige une certaine CSS fonctionnelle, sinon cela ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS widget spécifié comme un point de départ.

Exemples

Un simple onglets jQuery UI (onglets). 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> élément de patte (Tabs Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <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 id = "tabs">
  <Ul>
    <Li> <a href="#fragment-1"> <span> a </ span> </a> </ li>
    <Li> <a href="#fragment-2"> <span> deux </ span> </a> </ li>
    <Li> <a href="#fragment-3"> <span> trois </ span> </a> </ li>
  </ Ul>
  <Div id = "fragment-1">
    <P> La première balise est activée par défaut: </ p>
    <Code> $ ( «#tabs») .tabs (); </ code>
  </ Div>
  <Div id = "fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed nonummy diam nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed nonummy diam nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </ Div>
  <Div id = "fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed nonummy diam nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed nonummy diam nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed nonummy diam nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </ Div>
</ Div>
 
<Script>
$ ( "#tabs") .tabs ();
</ Script>
 
</ Body>
</ Html>

la