Hoe u panelen met tabbladen maakt met jQuery in Dreamweaver - dummies

Met de optie voor de jQuery-gebruikersinterface-tab in Dreamweaver kunt u eenvoudig een reeks panelen toevoegen die inhoud weergeven of verbergen die overeenkomt met een reeks tabbladen. Vergelijkbaar met de samenvouwbare panelen, kunt u met deze jQuery-gebruikersinterface meer informatie weergeven in minder ruimte binnen een browservenster.

Net als bij de accordeonpanelen, kunnen panelen met tabbladen worden gebruikt om tekst, afbeeldingen en multimedia weer te geven.

Wanneer u vensters met tabbladen maakt met de jQuery UI-widget in Dreamweaver, kunt u de volgorde van de tabbladen opgeven, zodat u effectief kunt bepalen welke inhoud wordt weergegeven wanneer de pagina voor het eerst wordt geladen.

Volg deze stappen om een ​​paneelgroep met tabbladen te maken:

1. Plaats de cursor op een pagina waar u het paneel met tabbladen wilt weergeven.

2. Kies Invoegen → jQuery-gebruikersinterface → Tabbladen of klik op het item Tabs in het invoegdeelvenster van jQuery UI.

   Een paneel met tabbladen wordt ingevoegd in de pagina en de bijbehorende CSS-bestanden verschijnen in het paneel CSS Designer Source.

   

3. Selecteer in de hoofdwerkruimte achtereenvolgens de tekst Tab1, Tab2, en Tab 3 en vervang vervolgens elke tabbladkop door de tekst die u op het tabblad van het deelvenster wilt weergeven Gebied.

   U kunt de inhoud van de tabbladen alleen in de werkruimte bewerken en niet in de eigenschappencontrole. Standaard is de tekst in het gebied Tab vet en zwart, maar u kunt die opmaak wijzigen door de bijbehorende CSS-regel te wijzigen.

4. Als u het formaat van elk tabblad wilt aanpassen, selecteert u het tabblad en gebruikt u de instellingen voor Hoogte en Breedte in Eigenschapcontrole.

   Als een afzonderlijk tabblad is geselecteerd, geeft de eigenschappencontrole specifiek de instellingen voor dat tabblad weer.

   

5. Als u inhoud wilt toevoegen, selecteert u het woord Inhoud in het hoofdgebied van een willekeurig tabblad en voert u vervolgens tekst, afbeeldingen of multimedia in.

   U kunt tekst in een paneel kopiëren door het te plakken zoals u de tekst ergens anders op de pagina plakt. Voeg op dezelfde manier afbeeldingen in panelen in zoals u dat ergens anders op een pagina zou doen: Kies Invoegen → Afbeelding → Afbeelding en selecteer vervolgens het GIF-, JPEG- of PNG-bestand dat u wilt weergeven. U kunt ook multimedia- of Photoshop-bestanden toevoegen als u Dreamweaver wilt gebruiken om uw afbeeldingen te optimaliseren.

6. Bewerk de bijbehorende CSS-regel om het uiterlijk van een tabblad of paneel, zoals het lettertype of de kleur, te wijzigen.

   Als u bijvoorbeeld de tekstkleur of het lettertype in de tabbladen wilt bewerken, selecteert u het vak rond het tabblad en wordt het kader om stijl automatisch geselecteerd in het paneel CSS Designer Selector.

7. Als u het aantal of de volgorde van panelen met tabbladen wilt bewerken, klikt u op het tabblad blauwe jQuery-tabbladen boven in het deelvenster dat is ingesteld in het ontwerpgebied.

   Wanneer u op het blauwe tabblad klikt, worden de paneelinstellingen weergegeven in de eigenschappencontrole. Klik buiten het blauwe vakgebied en de eigenschappencontrole keert terug naar de standaardinstellingen.

   

8. Als u tabbladen wilt toevoegen, klikt u op het plusteken (+) in de eigenschappencontrole.

   Nieuwe tabbladen verschijnen in de werkruimte.

9. Als u de volgorde van de tabbladen wilt wijzigen, selecteert u de tabnaam in de eigenschappencontrole en gebruikt u vervolgens de pijlen in het deelvenster Panelen om het paneel te verplaatsen.

   Paneelnamen gaan omhoog en omlaag in het menu terwijl de volgorde wordt gewijzigd. Panelen en bijbehorende tabbladen worden op de webpagina weergegeven in de volgorde waarin ze in de eigenschappencontrole worden weergegeven.

10. Selecteer het paneel in de vervolgkeuzelijst Panelen die u wilt weergeven wanneer de pagina in een webbrowser wordt geladen.

    De vervolgkeuzelijst komt overeen met de namen die u elk tabblad in de werkruimte geeft.

11. Kies Bestand → Opslaan om de pagina op te slaan; Wanneer het dialoogvenster Afhankelijke bestanden kopiëren verschijnt, klikt u op OK om automatisch alle gerelateerde bestanden te genereren.

    Om de functies van jQuery UI te laten werken, moet u deze bestanden uploaden naar uw webserver wanneer u de webpagina uploadt.

12. Klik op het wereldbolpictogram boven in de werkruimte en selecteer een browser om een ​​voorbeeld van uw werk in een browser weer te geven.

    Afhankelijk van uw webbrowser moet u mogelijk ActiveX-besturingselementen toestaan ​​om een ​​voorbeeld van de pagina op uw computer te bekijken.