Como crear pestanas ou pestanas en JavaScript con jQuery

Compartir o noso contido!

0shares
  • Twitter
  • Pinterest
  • ligazón

  • correo electrónico
Prema para avaliar esta entrada!

(votos: 0 media: 0)

Aínda que nunha ocasión anterior aprendemos a crear fiestras de diálogo con Javascript, esta vez crearemos pestanas ou pestanas utilizando o subconxunto da biblioteca jQuery coñecido como jQueryui. Esta biblioteca ofrécenos a vantaxe de crear obxectos típicos de interface de usuario, como Windows, Tabs ou Sliders con pouco código.

Táboa de contido

Preparamos os elementos que se mostrarán nas nosas pestanas

no noso editor Código preferido, inicie un novo ficheiro en formato HTML, coa seguinte estrutura base:

<!doctype html><html> <head> <meta charset="utf-8" /> <title>Prueba de Tabs en jQueryUI</title> </head> <body> </body></html>

Despois diso, colocamos un

DIV id = “c62091d46a”>

DIV > cunha identificación e dentro dunha lista de tipo < ul > con tres elementos:

<div> <ul> <li><a href="#cat1">Frutas</a></li> <li><a href="#cat2">Verduras</a></li> <li><a href="#cat3">Legumbres</a></li> </ul></div>

Coloque un < DIV > coa primeira categoría:

<div> <p>Se denomina fruta a aquellos frutos comestibles obtenidos de plantas cultivadas o silvestres que, por su sabor generalmente dulce-acidulado, su aroma intenso y agradable y sus propiedades nutritivas</p></div>

Entón a segunda categoría:

<div> <p>Las verduras son hortalizas cuyo color predominante es el verde. Sin embargo, el uso popular suele extender su significado a otras partes comestibles de las plantas, como hojas, inflorescencias y tallos</p></div>

e finalmente, a terceira categoría:

<div> <p>Se denomina legumbre (del latín legumen) a la semilla contenida en las plantas de la familia de las Leguminosas.</p></div>

e o resultado é tan lonxe como ata agora.

Como crear pestanas ou pestanas en JavaScript con jQuery - Cablilenja

Descargar jQueryui para o noso traballo

Necesitamos descargar jQueryui, polo que imos directo á súa páxina oficial. Ao momento de escribir este artigo, a versión dispoñible é de 1.12.1. Imos facer clic na descarga personalizada.

Como crear pestanas ou pestanas en JavaScript con jQuery - CABBLENEARNJA

A seguinte pantalla chámase Descargar Builder, o primeiro será escoller a versión de jqueryui que queremos, neste caso o 1.12.1. Tamén podemos eliminar algúns compoñentes que non necesitamos.

Como crear pestanas ou separadores en JavaScript con jQuery - Cabineranja

Finalmente, eliximos un tema para os compoñentes (o tema base está ben) e prema a descarga.

Como crear pestanas ou pestanas en JavaScript con jQuery - CABBLENEARNJA

Mantemos o ficheiro no noso cartafol de traballo.

Como crear pestanas ou pestanas en JavaScript con jQuery - CabblenEarnja

situado o ficheiro .zip que descargamos, o seguinte é extraer o seu contido (isto pode variar segundo o software que usa no seu computador)

Como crear pestanas ou pestanas en JavaScript con jQuery - CABBLENEARNJA

Despois de extraer todo o contido, a estrutura do cartafol que se crea debe ser similar a esta.

Como crear pestanas ou pestanas en JavaScript con jQuery - CABBLENEARNJA

incluíndo jQueryui no noso código

Dentro do cartafol externo, é o primeiro ficheiro que necesitamos incluír, que é a base de jQuery.

Fóra, na raíz do cartafol jqueryui, é o ficheiro jQuery-ui.min.js que é a versión de produción, imos usar ese ficheiro.

<script type="text/javascript" src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

e chamaremos a súa folla de estilos na versión de produción.

<link href="jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" type="text/css" />

Polo momento, o noso código parece así:

Como crear pestanas ou pestanas en javascript con jQuery - Cabblenja

imos poñer as nosas pestanas para operar

Inserir un fragmento de código JavaScript:

<script type="text/javascript"></script>

Tempo de Converte o noso < DIV > en pestanas, insira o taquighand do documento.Listo

$(function(){ });

imos traballar nesta función, imos levar a identificación “categorías” e convertémolo coa función de pestanas:

$("#categorias").tabs();

e polo momento, parece así:

Crear pestanas ou separadores en JavaScript con jQuery - Cabloney

é hora de definir as súas propiedades

As pestanas de tipo de táboa JQUeryui teñen moitas propiedades e algúns métodos. Neste caso, imos enumerar algunhas das súas propiedades máis interesantes:

colapsible permítelle retraer (verdadeiro) ou non (falso) o contido das pestanas.
Active Establece a pestana activa, de acordo coa súa posición.
Desactivado desactivar (verdadeiro) ou activo (falso) o
controla o alto O obxecto de acordo cos seguintes valores:
Auto: Todos teñen a mesma alta
Encha: Usando o contido dos obxectos de Alto Del
Contido: cada obxecto usará o alto de acordo co seu contido.
evento permítelle aplicar un evento á páxina

Por exemplo, deixe que a pestana activa sexa número 2, que reacciona ao evento típico de mouseover e que todas as pestanas teñen o mesmo.

$("#categorias").tabs({ active: 1, event: "mouseover", heightStyle: "auto"});

O código permanece así:

Como crear pestanas ou pestanas en JavaScript con jQuery - CABBLENEARNJA

Tentamos o exemplo

O resultado é Como segue:

¿Estiveches? Déixenos saber nos comentarios a continuación, na nosa conta de Twitter @ Cablarenja7 ou na nosa páxina de Facebook.

Avatar Usuario 2 1518106013

Docencia, Xestor de TI, Blogger & desarrollador. Escribo para divertirse, educar por paixón. | A granstanding non é a miña cousa.

0Shares
  • Twitter
  • Pinterest
  • LinkedIn
  • Email

Leave a Comment

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *