Latest web development tutorials

jQuery UI API - membro scheda (schede Widget)

categoria

Widget (Widget)

uso

Descrizione: uno spazio unico dei contenuti multi-panel, ogni pannello nel titolo lista.

Nuova versione: 1.0

Schede (schede) viene utilizzato normalmente contenuto in una pluralità di sezioni, al fine di risparmiare spazio, come la fisarmonica (fisarmonica) stesso.

Tabs (Spartiti) ha uno specifico insieme di tag che deve essere utilizzato al fine di funzionare correttamente schede:

  • Tabs (Spartiti) devono essere ordinata ( <ol> ) o non ordinata ( <ul> list)
  • tag "Title" di ogni pagina deve essere un elemento della lista ( <li> interno), e deve essere utilizzato con un href attributo del ancoraggio ( <a> ) pacchetto.
  • Ogni piatto tag può essere qualsiasi elemento della pagina valida, ma deve avere un ID, ancora hash associato all'ID schede corrispondenti.

Il contenuto di ogni scheda piatto possono essere definite nella pagina è buona, o può essere caricato tramite Ajax. Entrambi i metodi si basano sulla pagina dedicata del tag di ancoraggio href processo automatico. Per impostazione predefinita, quando si fa clic sulla scheda per attivare, ma per event opzioni è possibile modificare o sostituire evento.

Qui ci sono alcuni tag di esempio: 

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

l'interazione della tastiera

Quando il focus è su una scheda, i seguenti comandi da tastiera sono disponibili:

  • UP / SINISTRA: Sposta il cursore alla scheda precedente. Se l'etichetta sulla prima pagina, quindi spostare il focus all'ultima scheda. In un breve ritardo dopo l'attivazione della scheda focalizzato.
  • Giù / destra: Sposta il cursore alla scheda successiva. Se un'etichetta nell'ultima pagina, quindi spostare la messa a fuoco per la prima scheda. In un breve ritardo dopo l'attivazione della scheda focalizzato.
  • Casa: Spostare il cursore alla prima scheda. In un breve ritardo dopo l'attivazione della scheda focalizzato.
  • FINE: Sposta il cursore all'ultima scheda. In un breve ritardo dopo l'attivazione della scheda focalizzato.
  • SPAZIO: attivazione associata con il pannello scheda focalizzato.
  • ENTER: Attivare o interruttore associato al pannello scheda focalizzato.
  • ALT + PAGINA SU: sposta il cursore alla scheda precedente e immediatamente attivato.
  • ALT + PGGIÙ: Spostare il cursore alla scheda successiva, e attivato immediatamente.

Quando il focus è sul pannello, i seguenti comandi da tastiera sono disponibili:

  • CTRL + UP: Sposta il cursore fino alla scheda appropriata.
  • ALT + PAGINA SU: sposta il cursore alla scheda precedente e immediatamente attivato.
  • ALT + PGGIÙ: Spostare il cursore alla scheda successiva, e attivato immediatamente.

tematizzazione

membro Tab (Tabs Widget) utilizzando framework jQuery UI CSS per definire l'aspetto del suo stile. Se è necessario utilizzare le schede di stile specificato, è possibile utilizzare il seguente nome della classe CSS:

  • ui-tabs : la scheda contenitore esterno. Quando si imposta un collapsible opzioni -time, gli elementi aggiuntivi sono dotati di una ui-tabs-collapsible , di classe.
    • ui-tabs-nav : lista scheda.
      • Navigazione elemento della lista sarà attivato con un ui-tabs-active , di classe. Contenuto caricato tramite Ajax chiamata apparirà con un elenco di elementi ui-tabs-loading , di classe.
        • ui-tabs-anchor : Centralino per le ancore.
    • ui-tabs-panel : i pannelli scheda legate. Solo la scheda corrispondente è visibile solo quando attivata.

fare affidamento

Ulteriori informazioni

  • La parte richiede un po 'di CSS funzionale, altrimenti non funzionerà. Se si crea un tema personalizzato, utilizzare il file CSS widget di specificato come punto di partenza.

Esempi

Un semplice schede jQuery UI (Spartiti). 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> membro scheda (schede Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<div id = "schede">
  <Ul>
    <Li> <a href="#fragment-1"> <span> a </ span> </a> </ li>
    <Li> <a href="#fragment-2"> <span> due </ span> </a> </ li>
    <Li> <a href="#fragment-3"> <span> tre </ span> </a> </ li>
  </ Ul>
  <Div id = "frammento-1">
    <P> Il primo tag è abilitato di default: </ p>
    <Code> $ ( "#tabs") .tabs (); </ code>
  </ Div>
  <Div id = "frammento-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat Volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat Volutpat.
  </ Div>
  <Div id = "frammento-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat Volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat Volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat Volutpat.
  </ Div>
</ Div>
 
<Script>
$ ( "#tabs") .tabs ();
</ Script>
 
</ Corpo>
</ Html>