Hem Sociala medier Hur man skapar flikar med jQuery i Dreamweaver - dummies

Hur man skapar flikar med jQuery i Dreamweaver - dummies

Video: Bootstrap 4 Navbar Concepts | BOOTSTRAP 4 TUTORIAL 2025

Video: Bootstrap 4 Navbar Concepts | BOOTSTRAP 4 TUTORIAL 2025
Anonim

Alternativet jQuery UI Tab i Dreamweaver gör det enkelt att lägga till en serie paneler som visar eller döljer innehåll som motsvarar en serie flikar. På samma sätt som de hopfällbara paneler kan du använda denna jQuery UI-funktion för att visa mer information på mindre utrymme i ett webbläsarfönster.

I likhet med dragspelspanelerna kan flikade paneler användas för att visa text, bilder och multimedia.

När du skapar flikar med jQuery-gränssnittet i Dreamweaver kan du ange flikarnas ordning och effektivt styra vilket innehåll som visas när sidan laddas först.

Följ dessa steg för att skapa en flikad panelgrupp:

  1. Placera markören på en sida där du vill att flikpanelen ska visas.

  2. Välj Infoga → jQuery UI → Flikar, eller klicka på fliken Objekt i jQuery UI Insert-panelen.

    En flikad panel läggs in på sidan och motsvarande CSS-filer visas i CSS Designer Source-panelen.

  3. I huvud arbetsytan väljer du tabellen Tab1, Tab2, och Tab 3 i sin tur och ersätter sedan varje rubrikrubrik med texten som ska visas på panelfliken område.

    Du kan redigera innehållet i flikarna endast i arbetsytan, inte i egenskapskontrollen. Som standard är texten i fliken Område fet och svart, men du kan ändra den formateringen genom att ändra motsvarande CSS-regel.

  4. För att justera storleken på varje flik, välj fliken och använd sedan inställningarna Höjd och Bredd i egenskapskontrollen.

    Med en enskild flik vald, visar egenskapskontrollen inställningarna för den fliken specifikt.

  5. Om du vill lägga till innehåll väljer du ordet Innehåll i huvudområdet för en vald flikpanel och anger sedan text, bilder eller multimedia.

    Du kan kopiera text till en panel genom att klistra in den precis som du skulle klistra in text någon annanstans på sidan. På samma sätt sätt in bilder i paneler precis som du skulle någon annanstans på en sida: Välj Infoga → Bild → Bild och välj sedan den GIF, JPEG eller PNG-fil du vill visa. Du kan också lägga till multimedia- eller Photoshop-filer om du vill använda Dreamweaver för att optimera dina bilder.

  6. Ändra utseendet på en flik eller en panel, till exempel teckensnittets ansikte eller färg, redigera motsvarande CSS-regel.

    Om du vill redigera textfärgen eller teckensnittet i flikarna markerar du rutan runt fliken och rutan kring stilen väljs automatiskt i CSS Designer Selector-panelen.

  7. Om du vill ändra nummer eller ordning på flikar med flikar klickar du på fliken blå jQuery-flikar högst upp på panelen som är inställd i designområdet.

    När du klickar på den blå fliken visas panelinställningarna i egenskapsinspektionen. Klicka utanför det blå boxade området och egenskapskontrollen återgår till standardinställningarna.

  8. Om du vill lägga till flikar klickar du på plustecknet (+) -ikonen i egenskapsinspektören.

    Nya flikar visas i arbetsytan.

  9. För att ändra flikarnas ordning, välj fliknamnet i egenskapskontrollen och använd sedan pilarna i panelen fält för att flytta panelen.

    Panelnamnen flyttas upp och ner i menyn när ordern ändras. Paneler och deras motsvarande flikar visas på webbsidan i den ordning de visas i egenskapsinspektören.

  10. Välj panelen i rullgardinsmenyn Paneler som du vill visa när sidan laddas i en webbläsare.

    Nedrullningslistan motsvarar de namn du ger varje flik i arbetsytan.

  11. Välj Arkiv → Spara för att spara sidan; När dialogrutan Copy Dependent Files visas, klicka på OK för att generera alla relaterade filer automatiskt.

    För funktionerna i jQuery-användargränssnittet måste du ladda upp dessa filer till din webbserver när du laddar upp webbsidan.

  12. Klicka på klotikonet överst i arbetsytan och välj en webbläsare för att förhandsgranska ditt arbete i en webbläsare.

    Beroende på din webbläsare kan du behöva låta ActiveX-kontroller förhandsgranska sidan på din dator.

Hur man skapar flikar med jQuery i Dreamweaver - dummies

Redaktörens val

Vad är en Java-karta? - dummies

Vad är en Java-karta? - dummies

Arrays och specialiserade listor gör det möjligt att utföra en fantastisk uppsättning uppgifter med Java. Det finns dock situationer där en Java-applikation behöver något som är mer relaterat till en databas, utan att egentligen ha allt databasbagage (som att behöva köpa en separat applikation). Till exempel kanske du vill kunna ...

Några få saker om Java Math - dummies

Några få saker om Java Math - dummies

Tro det eller inte, datorer - även de mest kraftfulla - Ha vissa begränsningar när det gäller att utföra matematiska beräkningar. Dessa begränsningar är vanligtvis obetydliga, men ibland slår de sig och biter på dig. Här är de saker du behöver se upp för när du gör matte i Java. Helhetsflöde Det grundläggande problemet ...

Vad är recursion i Java Programmering? - dummies

Vad är recursion i Java Programmering? - dummies

Rekursion är en grundläggande programmeringsteknik som du kan använda i Java, där en metod kallar sig för att lösa ett problem. En metod som använder denna teknik är rekursiv. Många programmeringsproblem kan lösas endast genom rekursion, och vissa problem som kan lösas med andra tekniker löses bättre genom rekursion. En av ...

Redaktörens val

4 Måste-inkludera i din blogg sidobardesign - dummies

4 Måste-inkludera i din blogg sidobardesign - dummies

Din bloggens sidofält är viktig fastighet som bör innehålla de element du vill ha mest. När du utformar din blogg sidofält kan du dra från en nästan oändlig lista över sidospårelement. Genom att välja noggrant vad som ska inkluderas (och vad som inte ska inkluderas) kan du ställa in din blogg från andra.

5 Användbara Wordpress Plugins - dummies

5 Användbara Wordpress Plugins - dummies

Om du bloggar på en självhävd plattform med WordPress-programvara, är det dags att anpassa din blogg med plug-ins - programvara som kan "anslutas" till din befintliga WordPress bloggprogramvara. Plug-ins gör det möjligt för dig att göra allt från funktionsbildspel i dina blogginlägg för att ansluta sociala medier till din webbplats. Här är fem användbara ...

7 Sätt att erövra Writer's Block som en Blogger - dummies

7 Sätt att erövra Writer's Block som en Blogger - dummies

Varje bloggare möter författarens block i ett tid eller annan. Om du är den typ av bloggare som sköter innehåll varje dag, kan författarens block vara stäverande. Kan du inte ta en paus för att få ditt skrivande mojo tillbaka? Prova en (eller flera) av dessa sju sätt att slå författarens block för att få dig tillbaka ...

Redaktörens val

10 Stora elektronikkomponentkällor - dummies

10 Stora elektronikkomponentkällor - dummies

Letar du efter några bra källor till dina elektroniska delar? Denna lista ger dig några fleråriga favoriter, både inom och utanför Nordamerika. Denna lista är inte uttömmande. Du hittar bokstavligen tusentals specialutbud för ny och begagnad elektronik. Plus, Amazon och eBay ger virtuella marknadsplatser för alla sorters säljare - ...

Elektronik Basics: Resistance - dummies

Elektronik Basics: Resistance - dummies

I elektronikvärlden är motståndet inte meningslöst. Faktum är att motstånd kan vara mycket användbart. Utan motstånd skulle elektronik inte vara möjligt. Elektronik handlar om att manipulera strömmen av ström, och ett av de mest grundläggande sätten att manipulera strömmen är att minska det genom resistans. Utan motstånd strömmar strömmen oreglerad och där ...

Digital elektronik: Så här installerar du BASIC Stamp Editor och Anslut till Stämpeldummorna

Digital elektronik: Så här installerar du BASIC Stamp Editor och Anslut till Stämpeldummorna

För att berätta för BASIC Stamp vad du vill göra i ditt digitala elektronikprojekt måste du programmera det. BASIC Stamp Windows Editor är den programvara som du använder på din dator för att skapa program som kan laddas ner till en BASIC Stamp-mikrokontroller. Denna programvara är tillgänglig gratis från Parallax webbplats. ...