Hoe u inklapbare panelen kunt maken met jQuery in Dreamweaver - dummies

De jQuery UI-accordeonwidget in Dreamweaver maakt het eenvoudig om opvouwbare panelen toe te voegen die bezoekers van de site kunnen openen en sluiten zonder de webpagina te vernieuwen. Met deze jQuery-functie kunt u de ruimte op een pagina beter benutten door meer informatie in minder ruimte weer te geven in een browservenster.

U kunt zien hoe de samenvouwbare panelen met accordeon de naam-, foto- en habitatvoorkeuren van elke zangvogel op deze natuurwebsite bevatten. Het resultaat is dat u de namen van alle vogels op één pagina gemakkelijk kunt zien. Om de beschrijving van een vogel te bekijken, hoeft een gebruiker alleen op het tabblad boven in het paneel te klikken (waar de naam van de vogel verschijnt) en het paneel wordt onmiddellijk geopend.

De foto en beschrijving voor de oranje-gekroonde zanger is open terwijl de anderen op de pagina gesloten zijn. Het mooie van jQuery is dat de pagina niet opnieuw hoeft te worden geladen om de panelen te openen of te sluiten. Klik eenmaal op een tabblad en een paneel wordt onmiddellijk geopend. Klik op een ander tabblad en dat paneel wordt geopend als het eerder geopende paneel wordt gesloten.

Samenvouwbare deelvensters kunnen worden gebruikt om tekst en afbeeldingen weer te geven, evenals multimediabestanden zoals audio-, video- en Flash-bestanden.

Als u een accordeonpaneel (of veel andere geavanceerde functies in Dreamweaver) wilt bekijken zoals het in een webbrowser wordt weergegeven, moet u op de knop Live weergave linksboven in de Dreamweaver-werkruimte klikken.

Nadat u een set accordeonpanelen hebt gemaakt met het menu van de jQuery-gebruikersinterface in Dreamweaver, kunt u een aantal paneelinstellingen wijzigen met behulp van de eigenschappencontrole, zoals weergegeven in de instructies die volgen.

Volg deze stappen om een accordeonpaneelset te maken:

Plaats de cursor op een pagina waar u de accordeonpanelen wilt laten verschijnen.
Kies Invoegen → jQuery-gebruikersinterface → Accordeon of klik op het item Accordeon in het paneel Insert van de jQuery-gebruikersinterface.

Een jQuery UI inklapbare accordeelpanelengroep met drie panelen verschijnt op de pagina.
Selecteer het woord Sectie bovenaan elk paneel en vervang het door de tekst die u in het tabbladgebied van het paneel wilt weergeven.

Standaard is de tekst in het gebied Tab tekst zonder opmaak, maar u kunt dit wijzigen door de bijbehorende CSS-regel te wijzigen of de tekst op te maken met HTML-tags, zoals de koptags.
Selecteer het woord Inhoud in het hoofdgebied van elk paneel en voer de tekst of afbeeldingen in die u wilt weergeven.

U kunt tekst in een paneel plakken, net zoals u tekst ergens anders op de pagina plakt. Op dezelfde manier voegt u afbeeldingen in panelen in zoals u ergens anders op een pagina zou doen: plaats uw cursor in het paneel, kies Invoegen → Afbeelding → Afbeelding en selecteer het GIF-, JPEG- of PNG-bestand dat u wilt weergeven.U kunt ook een Photoshop-bestand selecteren als u Dreamweaver wilt gebruiken om afbeeldingen te optimaliseren.

Wanneer u tekst in een venster plakt, kiest u Bewerken → Speciaal plakken om de hoeveelheid opmaak te kiezen die u wilt behouden in de tekst die u in Dreamweaver plakt. Door de hoeveelheid opgespaarde opmaak te beperken, kunt u potentiële stijlconflicten verminderen.
Als u de paneelinstellingen wilt wijzigen, klikt u op het blauwe tabblad jQuery-accordeon boven in de panelen in het ontwerpgebied.

Wanneer u op het blauwe tabblad klikt, worden de paneelinstellingen weergegeven in de eigenschappencontrole. (Correct klikken op het blauwe tabblad kan lastig zijn, dus zorg ervoor dat u op het blauwe gebied klikt.) Klik ergens anders op de pagina en het infovenster keert terug naar de standaardinstellingen.
Panelen toevoegen of verwijderen met het veld Panelen in de eigenschappencontrole.

Als u een venster wilt toevoegen, klikt u op het plusteken (+) rechts van het deelvenster Panels. Om een paneel uit een accordeonset te verwijderen, selecteert u eerst de paneelnaam in de vervolgkeuzelijst Panelen in de eigenschappencontrole en klikt u vervolgens op het minteken (@@ min).

U kunt nog een paneel toevoegen door opnieuw op het plusteken te klikken.
Wijzig hoe panelen worden geopend met behulp van het vervolgkeuzemenu Gebeurtenis.

De gebeurtenisinstellingen bepalen of de panelen worden geopend wanneer een gebruiker op een paneeltab klikt (klikken) of een cursor over het paneeltabblad beweegt (mouseover).
Stel desgewenst andere paneelopties in.

De accordeonopties in de eigenschappencontrole zijn optioneel en omvatten de mogelijkheid om een of alle deelvensters uit te schakelen (Uitschakelen) en de weergave van panelen te animeren en te sluiten (Animate-vervolgkeuzelijst).
Kies Bestand → Opslaan om de pagina op te slaan; Wanneer het dialoogvenster Afhankelijke bestanden kopiëren verschijnt, klikt u op OK om alle gerelateerde bestanden te genereren.

Om de Spry-functies te laten werken, moet u deze bestanden uploaden naar uw webserver wanneer u de webpagina uploadt.
Bewerk de bijbehorende CSS-regel om het uiterlijk van het deelvenster, zoals het lettertype of de tekstkleur, te wijzigen.

Opmerking: U kunt de overeenkomstige stijlen voor een accordeonpaneel niet bewerken totdat de pagina is opgeslagen en Dreamweaver de bijbehorende CSS- en JavaScript-bestanden heeft gegenereerd.
Klik op het wereldbolpictogram boven in de werkruimte en selecteer de browser die u wilt gebruiken om een voorbeeld van de pagina te bekijken.

Wanneer u uw computer gebruikt om een voorbeeld te bekijken van een pagina met een interactieve functie waarvoor JavaScript of een andere programmering vereist is, zullen sommige webbrowsers, inclusief Internet Explorer, een waarschuwing weergeven waarin staat dat u ActiveX-besturingselementen moet toestaan om de pagina te bekijken.

Dit is een beveiligingswaarschuwing die alleen wordt weergegeven als de pagina wordt geopend op dezelfde computer waarop de pagina is opgeslagen. Als u de pagina naar een webserver publiceert en deze vervolgens via een internetverbinding bekijkt, verschijnt deze fout niet voor u of de bezoekers van uw site.