Cum se creează file sau file în JavaScript cu jQuery

Distribuiți conținutul nostru!

DIV>

0SHARES
Faceți clic pentru a evalua această intrare!

(voturi: 0 media: 0)

Deși într-o ocazie anterioară am învățat să creăm ferestre de dialog cu JavaScript, de data aceasta vom crea file sau file folosind subsetul bibliotecii JQuery cunoscut sub numele de JQueryui. Această bibliotecă ne oferă avantajul de a crea obiecte tipice de interfață utilizator, cum ar fi ferestrele, filele sau glisoarele cu un cod mic.

Masa de conținut

Pregătim elementele care urmează să fie afișate pe filele noastre

în editorul nostru Cod preferat, porniți un fișier nou în format HTML, cu următoarea structură de bază:

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

După aceea, punem un < div > ul > cu trei elemente:

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

Plasați un < Div > cu prima categorie:

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

apoi a doua categorie:

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

și în cele din urmă, a treia categorie:

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

și rezultatul este până acum ca până acum.

divid id = „0B805CC345”>Cum se creează file sau file în JavaScript cu jquery - Cablilenja

Descărcarea jqueryui pentru munca noastră

Trebuie să descoperim JQueryui, așa că vom merge direct la pagina dvs. oficială. La momentul scrierii acestui articol, versiunea disponibilă este 1.12.1. Să facem clic pe Descărcare personalizată.

Cum se creează file sau tab-uri în JavaScript cu jQuery - Cablenearnja

Următorul ecran se numește Builder de descărcare, primul va fi de a alege versiunea jqueryui pe care o dorim, în acest caz 1.12.1. De asemenea, putem elimina unele componente pe care nu le avem nevoie.

Cum se creează file sau tab-uri în JavaScript cu jQuery - Cabineranja

În cele din urmă, alegem o temă pentru componente (tema de bază este fină) și apăsați descărcarea.

Cum se creează file sau file în JavaScript cu jQuery - Cablenearnja

Păstram fișierul în dosarul nostru de lucru.

Cum se creează file sau tab-uri în JavaScript cu jQuery - Cablenearnja

Situat fișierul .zip pe care l-am descărcat, următoarele este de a extrage conținutul său (aceasta poate varia în funcție de software-ul pe care îl utilizați pe computer)

Cum se creează file sau file în JavaScript cu jQuery - Cablenearnja

După extragerea întregului conținut, structura folderului care este creată trebuie să fie similară cu aceasta.

Cum se creează file sau file în JavaScript cu jQuery - Cablenearnja

Inclusiv JQueryui în codul nostru

în interiorul dosarului extern, este primul fișier pe care trebuie să îl includeți, care este baza de jQuery.

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

exterior, pe rădăcina dosarului JQueryui, este fișierul JQuery-Ui.JS, care este versiunea de producție, vom folosi acel fișier.

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

și vom apela stilurile dvs. în versiunea de producție.

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

Codul nostru arată astfel:

Cum se creează file sau Fab-uri în JavaScript cu jQuery - Cabblenja iv id = „7e56bfadca”

hai să punem filele noastre să funcționeze

Am introdus un fragment de cod JavaScript:

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

Timpul de Conversia „DIV id =” C62091D46A „> div > pe filele, introduceți stenograma documentului.Ready

iv id = „b76e8f6ad3”

Să lucrăm în această funcție, să luăm codul „categorii” și le convertim cu funcția Tabs:

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

și pentru moment, se pare că:

Creați file sau file în JavaScript cu jQuery - Cabloney

este timpul pentru a defini proprietățile sale

Tabrele de tip JQueryui Tablu are multe proprietăți și câteva metode. În acest caz, să lizăm unele dintre cele mai interesante proprietăți:


Roabă Vă permite să retrageți (TRUE) sau nu (FALSE) Conținutul filelor. /td>
Active Setează fila activă, în funcție de poziția sa.
Dezactivat Dezactivează (adevărat) sau activ (FALSE)
Controlează înălțimea Obiectul conform următoarelor valori:
Auto: Toate au același nivel înalt, completați: Folosind părul Alto Del Parent
Conținut: Fiecare obiect va folosi înălțimea în funcție de conținutul său.
Vă permite să aplicați un eveniment în fila

De exemplu, fila activă să fie numărul 2, care reacționează la evenimentul tipic Mouseover și că toate filele au același lucru.

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

Codul rămâne astfel:

Cum se creează file sau tab-uri în JavaScript cu jQuery - Cablenearnja iv id = „7e56bfadca” După cum urmează:

Ați fost? Spuneți-ne în comentariile de mai jos, pe contul nostru Twitter @ Cablarenja7 sau pe pagina noastră de Facebook.

predare, manager IT, blogger & dezvoltator. Eu scriu pentru distracție, educați prin pasiune. | Grandstanding nu este lucrul meu

Distribuiți conținutul nostru!

0shares
  • Twitter
  • LinkedIn
  • e-mail

Leave a Comment

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *