aan de slag met jQuery UI

link Wat is jQuery UI?

jQuery UI is een widget en interactie bibliotheek gebouwd op de top van de jquery JavaScript bibliotheek die u kunt gebruiken om zeer interactieve webapplicaties te bouwen. Deze gids is ontworpen om u op de hoogte van hoe jQuery UI werkt. Volg hieronder om te beginnen.

link begin met het bekijken van de demo ‘s

om een idee te krijgen van wat jQuery UI in staat is, bekijk dan de UI demo’ s.

in de demos sectie, De navigatie toont alle interacties en widgets die jQuery UI biedt. Kies een interactie of widget en je zult worden gepresenteerd met verschillende demo configuraties voor die specifieke plugin. Met elke demo kunt u broncode bekijken, thema ‘ s wijzigen en de URL kan altijd worden bladwijzer. Bijvoorbeeld, kijk op de accordeon widget ‘ s vulruimte demo pagina.

link Bouw uw aangepaste jQuery UI Download

zodra u een basiskennis hebt van wat jQuery UI is en wat het doet, bent u klaar om het uit te proberen! Het is tijd om over te gaan naar de Download Builder op de jQuery UI website om een kopie van jQuery UI te downloaden. jQuery UI ‘ S Download Builder kunt u de componenten die u wilt downloaden kiezen en krijg een aangepaste versie van de bibliotheek voor uw project. Er zijn drie eenvoudige stappen om uw aangepaste jQuery UI download te bouwen:

link Stap 1: Kies welke componenten u nodig hebt

in de hoofdkolom van de Downloadbouwer worden alle JavaScript-componenten in jQuery UI gecategoriseerd in groepen: core, interacties, widgets en effecten. Sommige componenten in jQuery UI zijn afhankelijk van andere componenten. Vink gewoon de vakjes aan voor de widgets die je wilt downloaden en alle vereiste afhankelijkheden worden automatisch ook aangevinkt. De componenten die u selecteert zullen allemaal worden gecombineerd in een aangepaste jQuery UI JavaScript-bestand.

link Stap 2: Selecteer een thema (of Rol uw eigen aangepaste thema)

in de rechterkolom van de Download Builder vindt u een veld waar u kunt kiezen uit een aantal vooraf ontworpen thema ‘ s voor uw jQuery UI-widgets.U kunt kiezen uit de verschillende thema ‘ s die wij bieden, of u kunt uw eigen aangepaste thema met behulp van ThemeRoller ontwerpen (daarover later meer).

geavanceerde Thema-instellingen: het thema-gedeelte van de Downloadbouwer biedt ook enkele geavanceerde configuratie-instellingen voor uw thema. Als u van plan bent om meerdere thema ‘ s op een enkele pagina te gebruiken, zullen deze velden van pas komen. Als u van plan bent om slechts één thema op een pagina te gebruiken, kunt u deze instellingen volledig overslaan.

link Stap 3: Kies een versie van jQuery UI

de laatste stap in de Download Builder is het selecteren van een versienummer. Zorg ervoor dat u niet alleen controleren welke versie van jQuery UI u kiest, maar ook de versie van jQuery Core Die versie ondersteunt, als verschillende versies van de bibliotheek ondersteunen verschillende versies van jQuery. Voor meer informatie over wat er nieuw is in elke versie van jQuery UI, zie de upgrade gidsen en changelogs van het project.

link klik op Downloaden!

u bent klaar met de Download Builder! Klik op de knop downloaden en je krijgt een aangepast zip-bestand met alles wat je hebt geselecteerd.

link basisoverzicht: Gebruik jQuery UI op een webpagina

open vervolgens index.html vanuit het gedownloade zip in een teksteditor. Je zult zien dat het verwijst naar uw thema, jQuery, en jQuery UI. Over het algemeen, je nodig hebt om deze drie bestanden op een pagina op te nemen om de jQuery UI widgets en interacties te gebruiken:

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>

als je Eenmaal hebt begrepen de bestanden, kunt u een aantal jQuery widgets naar uw pagina. Bijvoorbeeld, om een datepicker widget te maken, voegt u een tekstinvoer element toe aan uw pagina en roept dan .datepicker() aan. Zoals dit:

HTML:

<input type="text" name="date">

JavaScript:

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

link That’s It!

For demos of all of the jQuery UI widgets and interactions, check out the demos section of the jQuery UI website.

link jQuery UI aanpassen aan uw behoeften

jQuery UI stelt u in staat om het op verschillende manieren aan te passen. Je hebt al gezien hoe de Download Builder kunt u uw exemplaar van jQuery UI aan te passen om alleen de delen die u wilt bevatten, maar er zijn extra manieren om die code aan te passen aan uw implementatie.

link jQuery UI Basics: met behulp van opties

elke plugin in jQuery UI heeft een standaard configuratie die is afgestemd op de meest basale en veel voorkomende use case. Maar als u wilt dat een plugin zich anders gedraagt dan de standaardconfiguratie, kunt u elk van de standaardinstellingen overschrijven met behulp van “opties”. Opties zijn een set van eigenschappen doorgegeven aan een jQuery UI widget als argument. Bijvoorbeeld, de slider widget heeft een optie voor oriëntatie, waarmee u kunt opgeven of de slider horizontaal of verticaal moet zijn. Om deze optie in te stellen voor een slider op je pagina, geef je het gewoon door als een argument, zoals dit:

$( "#mySliderDiv" ).slider({
 orientation: "vertical"
});

You can pass as many different options as you’d like by following each one with a comma (except the last one):

$( "#mySliderDiv" ).slider({
 orientation: "vertical",
 min: 0,
 max: 150,
 value: 50
});

vergeet niet om rondom uw opties met accolades { }, en je bent goed op weg. Natuurlijk, het bovenstaande voorbeeld nauwelijks raakt aan wat je kunt doen met jQuery UI. Om gedetailleerde informatie te krijgen over de volledige set van jQuery UI widgets, bezoek de jQuery UI documentatie.

link visuele aanpassing: Het ontwerpen van een jQuery UI thema

Als u wilt uw eigen thema te ontwerpen, jQuery UI heeft een zeer gelikte toepassing voor precies dat doel. Het heet ThemeRoller, en je kunt altijd naar het door te klikken op de “thema ‘ s” link in de jQuery UI navigatie, of gewoon naar jQuery UI ThemeRoller.

ThemeRoller biedt een aangepaste interface voor het ontwerpen van alle elementen die worden gebruikt door jQuery UI widgets. Als u tweak de “hefbomen” in de linker kolom, de widgets aan de rechterkant zal uw ontwerp weerspiegelen. Het tabblad Galerij van ThemeRoller biedt een aantal vooraf ontworpen thema ‘ s (dezelfde die worden aangeboden door de Download Builder) die u kunt tweaken of downloaden zoals ze zijn.

link downloaden van uw thema

wanneer u op de knop “Download theme” in ThemeRoller klikt, wordt u doorverwezen naar de Downloadbouwer en wordt uw aangepaste thema automatisch geselecteerd in het vervolgkeuzemenu thema. U kunt uw downloadpakket verder van daar configureren. Zodra u downloadt, zult u zien dat deexample.html pagina is opgemaakt met behulp van uw eigen thema.

snelle Tip: Als u ooit uw thema wilt bewerken, opent u gewoon het css-bestand en vindt u waar staat ” om dit thema te bekijken en te wijzigen, bezoek …”Die URL opent het thema in ThemeRoller voor het bewerken.

link Ondersteuning: Waar Kan Ik hulp krijgen?