Video: 2: How to add jQuery to your website | Learn jQuery | jQuery tutorial 2024
Het schrijven van jQuery UI-code is niet moeilijk, maar het verkrijgen van de juiste delen van de bibliotheek kan een beetje verwarrend zijn voor HTML5- en CSS3-programmeurs. De jQuery UI-bibliotheek is veel groter dan het standaard jQuery-pakket, dus u wilt misschien niet alles opnemen als u het niet nodig hebt.
Eerdere versies van de gebruikersinterface van jQuery stonden u toe het volledige pakket te downloaden, maar alle verschillende elementen in een apart JavaScript-bestand te bewaren. Het was gebruikelijk om zes verschillende scripttags actief te hebben om de verschillende elementen op hun plaats te krijgen.
Er waren nog enkele afhankelijkheidsproblemen, dus je moest ervoor zorgen dat bepaalde pakketten waren geïnstalleerd voordat je andere pakketten gebruikte. Dit maakte een eenvoudige bibliotheek vrij complex om te gebruiken.
Gelukkig maken de nieuwste versies van de gebruikersinterface van jQuery dit proces een stuk eenvoudiger:
-
Kies (of maak) uw thema.
Gebruik de themeRoller-site om een startplaats uit de sjabloonbibliotheek te kiezen. U kunt vervolgens uw thema precies zo aanpassen dat het maakt wat u maar wilt (van kleuren, lettertypen en andere elementen veranderen).
-
Download het thema.
Het thema Roller heeft een downloadknop. Klik hierop als u klaar bent om uw thema te downloaden.
-
Kies de elementen die u zoekt.
Wanneer u voor het eerst met een project begint, kiest u waarschijnlijk alle elementen. Als u vindt dat de pagina te langzaam wordt geladen, kunt u een kleinere versie maken die alleen die elementen bevat die u nodig hebt. Kies voor nu alles.
-
Download het bestand.
Nadat u de gewenste elementen hebt gekozen, kunt u ze downloaden in een zipbestand.
-
Installeer de inhoud van het zipbestand in uw werkdirectory.
Het zip-bestand bevat een aantal bestanden en mappen. Kopieer de css- en js-directory's naar de map waar uw webpagina's zich bevinden (vaak de map public_html of htdocs). U hoeft de map development-bundel of de index niet te kopiëren. html-pagina.
-
Als u meerdere thema's installeert, kopieert u alleen de themagegevens uit aanvullende thema's.
Alle thema's gebruiken hetzelfde JavaScript. Alleen de CSS (en gerelateerde afbeeldingsbestanden) veranderen. Als u meerdere thema's in uw project wilt hebben, kopieert u eenvoudig de CSS-inhoud. Elk thema is een andere submap van de hoofddirectory van CSS.
-
Link naar de CSS-bestanden.
Gebruik de standaardlinktechniek om een koppeling te maken naar de CSS-bestanden die zijn gemaakt door de gebruikersinterface van jQuery. U kunt ook een koppeling maken naar uw eigen CSS-bestanden of interne CSS gebruiken naast de aangepaste CSS. Zorg ervoor dat je het pad goed vindt.
-
Link naar de JavaScript-bestanden.
De toolkit van jQuery UI installeert ook twee JavaScript-bestanden: de standaard jQuery-bibliotheek en de jQuery UI-bibliotheek. Standaard zijn beide bestanden geïnstalleerd in de js-map. U moet naar beide bestanden linken. Soms zie je geminimaliseerde bestanden naast gewone versies. De geminimaliseerde versie heeft de term min ingesloten. Beide versies zijn prima, maar de geminimaliseerde versie wordt sneller geladen.
Als iets niet goed werkt, controleert u uw bestandspaden opnieuw. Bijna altijd doen zich problemen voor omdat u niet aan alle juiste bestanden hebt gekoppeld. Merk ook op dat de CSS-bestanden gemaakt door jQuery UI ook afbeeldingen bevatten. Zorg ervoor dat uw thema een bijbehorende afbeeldingenmap heeft, anders werkt uw project mogelijk niet correct. Als je de volledige CSS- en JS-directory's hebt gekopieerd van de download, zou het in orde moeten zijn.
