jQuery for Beginners (Deel 6) - jQuery UI en verder lezen

In onze laatste les hierin jQuery voor beginners tutorialseries, we gaan een korte blik werpen op jQuery UI - de meest gebruikte jQuery-plug-in voor het toevoegen van grafische gebruikersinterfaces aan web-apps. Van fraaie vormen en visuele effecten, tot dragbare widgets, spinners en dialoogvensters - jQuery UI biedt u de kracht om rijke web UI's te maken.

Als je dat nog niet hebt gedaan, lees dan onze vorige artikelen in de serie:

• Introductie: Wat is jQuery en waarom zou het jou iets kunnen schelen? Het web interactief maken: een inleiding tot jQuery Het web interactief maken: een inleiding tot jQuery jQuery is een client-side scriptingbibliotheek die bijna elke moderne website gebruikt - het maakt websites interactief. Het is niet de enige JavaScript-bibliotheek, maar het is de meest ontwikkelde, meest ondersteunde en meest gebruikte ... Lees meer
• 1: Selectors en Basics jQuery Tutorial - Aan de slag: Basics & Selectors jQuery Tutorial - Aan de slag: Basics & Selectors Vorige week sprak ik over hoe belangrijk jQuery is voor elke moderne webontwikkelaar en waarom het geweldig is. Deze week denk ik dat het tijd wordt dat we onze handen vuil maken met een code en leren hoe ... Lees meer
• 2: Methoden Inleiding tot jQuery (deel 2): ​​methoden en functies Inleiding tot jQuery (deel 2): ​​methoden en functies Dit is onderdeel van een doorlopende introductie voor beginners van de jQuery-webprogrammeringsserie. Deel 1 behandelde de jQuery-basisprincipes van hoe deze in uw project moest worden opgenomen, en selectors. In deel 2 gaan we verder met ... Lees meer
• 3: wachten op paginabelasting en anonieme functies Inleiding op jQuery (deel 3): wachten op de te laden pagina en anonieme functies Inleiding op jQuery (deel 3): wachten op de pagina om te laden en anonieme functies jQuery is aantoonbaar een essentiële vaardigheid voor de moderne webontwikkelaar, en in deze korte miniserie hoop ik je de kennis te geven om er gebruik van te maken in je eigen webprojecten. In ... Lees meer
• 4: Events jQuery Tutorial (Deel 4) - Event Luisteraars jQuery Tutorial (Deel 4) - Event Luisteraars Vandaag gaan we een tandje bijsteken en laten we echt zien waar jQuery opduikt - evenementen. Als je de eerdere tutorials hebt gevolgd, zou je nu een redelijk goed begrip van de basiscode moeten hebben ... Lees meer
• Foutopsporing met Chrome-ontwikkelaarstools Uitvinden Websiteproblemen met Chrome-ontwikkelaarstools Or Firebug berekenen problemen met de website met Chrome-ontwikkelaarstools of Firebug Als u mijn jQuery-zelfstudies tot nu toe hebt gevolgd, is het mogelijk dat u al een aantal codeproblemen tegenkomt en niet bekend bent om ze te repareren. Wanneer je geconfronteerd wordt met een niet-functioneel stukje code, is het erg ... Lees meer
• 5: AJAX jQuery Tutorial (Deel 5): AJAX Them All! jQuery-zelfstudie (deel 5): AJAX allemaal! Aan het einde van onze jQuery mini-tutorial-serie wordt het tijd dat we dieper ingaan op een van de meest gebruikte functies van jQuery. AJAX staat een website toe te communiceren met ... Lees meer

Wat is jQuery UI en waarom zou ik het gebruiken?

jQuery UI biedt u alle componenten die nodig zijn voor een moderne webtoepassing met een GUI. Bij gebrek aan een betere beschrijving is het een verzameling widgets.

Voor een snel idee van wat u ermee kunt doen, bladert u eenvoudig rond MakeUseOf. In de onze is de inhoud eigenlijk gewoon gescheiden divs met een ongeordende lijst om op te treden als een index. Voer de jQuery-tabs-functie uit en deze worden op magische wijze in tabbladen omgezet. Geweldig! U kunt zelfs tabinhoud laden via AJAX als u dat wilt.

De Rewards-pagina gebruikt ook een “modale popup” dialoogvenster om de actie van de gebruiker te bevestigen en berichten terug te sturen. Om de aandacht van de gebruiker te richten, kunt u het dialoogvenster de rest van de pagina-inhoud laten dimmen totdat de interactie is voltooid.

Op onze website Answers gebruiken we het eenvoudige tooltip functie om hints op knoppen te geven.

jQuery UI blinkt echt uit als het gaat om formulieren en geeft toegang tot een groot aantal schuifregelaars en pickers. Ik ben een grote fan van de datumkiezer widget mezelf, die je bovenop een regulier tekstinvoervak ​​kunt laden waar de gebruiker een datum moet typen.

Ziet er ingewikkeld uit, toch? Kun je je voorstellen dat je zoiets codeert in pure JavaScript? Zo doe je het met de gebruikersinterface van jQuery:

$ ( "# Datefield") datepicker (.);

Ik zal geen tijd meer besteden aan het uitleggen hoe geweldig het is, omdat de officiële demo's van jQuery UI een goed overzicht geven van alle beschikbare functies, evenals eenvoudige codevoorbeelden. Ga het lezen.

De gebruikersinterface van jQuery toevoegen

De eenvoudigste manier om met de gebruikersinterface van jQuery aan de slag te gaan, is door de volgende regels toe te voegen aan uw koptekst, maar zorg ervoor dat deze worden toegevoegd NA de jQuery-hoofdreferentie, omdat jQuery UI vereist dat jQuery vooraf moet worden geladen. U hebt zowel een verwijzing naar het plug-inscript als een a nodig stylesheet die de visuele beschrijving van die UI-elementen bevat.

>