Jquery ui flikar tillgängliga fx alternativ

JQuery-flikarna rullar överst på sidan när du använder FX-alternativet. Det här är mest irriterande när användarna vad som skapar bildspel-effekter som animationerna orsakar att sidan hoppa överst och det finns inget sätt att förhindra detta genom det typiska sättet att returnera falskt för att visa händelser etc. Det verkar som detta händer bara med alternativet FX: dvs. Fungerar bra, men efter följande: Efter att ha stuckit näsan i flikkällkoden hittade jag den här raden: show. hide (). RemoveClass (ui-flikar-hide) undvik flimmer på det sättet Det verkar att samtalet att dölja () är utlösande detta av någon anledning. Ta bort samtalet för att dölja kommer att stoppa problemet, men som kommentaren föreslår, får detta visningsanimationen att flimra. (3) kommentar: 1 Ändrad 7 sedan av MiiJaySung OK, efter några Googling snubblade Ive in i detta: Wrap div som innehåller flikarna i en div med en fast höjd. kommentar verkar fungera, och jag tänkte på liknande sätt att det berodde på att båda föremålen gömdes. Med tanke på detta skulle det vara till hjälp att denna quirkiness är dokumenterad så att användarna är medvetna och kan hantera situationen som de känner sig bäst för dem. kommentar: 2 Ändrad 7 sedan av scalvert Detta sker inte bara när du använder fx-alternativet. Jag upplever det med följande markup: valda: vars. userStateSelectedTab, spinner: false, välj: funktion (händelse, ui) (tabs-loading).show () flikVelgad sant, last: funktion (händelse, ui) var parametrar getParameters ) Tabs Widget Tangentbordsinteraktion När fokus ligger på en flik är följande nyckelkommandon tillgängliga: UPP VÄNSTER. Flytta fokus till föregående flik. Om på första fliken flyttas fokus till sista fliken. Aktivera fokuserad flik efter en kort fördröjning. NER HÖGER. Flytta fokus till nästa flik. Om på den sista fliken flyttas fokus till första fliken. Aktivera fokuserad flik efter en kort fördröjning. CTRL UP VÄNSTER. Flytta fokus till föregående flik. Om på första fliken flyttas fokus till sista fliken. Den fokuserade fliken måste aktiveras manuellt. CTRL NER HÖGER. Flytta fokus till nästa flik. Om på den sista fliken flyttas fokus till första fliken. Den fokuserade fliken måste aktiveras manuellt. HEM. Flytta fokus till den första fliken. Aktivera fokuserad flik efter en kort fördröjning. SLUTET. Flytta fokus till den sista fliken. Aktivera fokuserad flik efter en kort fördröjning. CTRL HOME. Flytta fokus till den första fliken. Den fokuserade fliken måste aktiveras manuellt. CTRL-slut. Flytta fokus till den sista fliken. Den fokuserade fliken måste aktiveras manuellt. RYMDEN. Aktivera panelen i samband med fokuserad flik. STIGA PÅ. Aktivera eller växla panel som är associerad med fokuserad flik. ALT OPTION SIDAN UPP. Flytta fokus till föregående flik och aktivera omedelbart. ALT OPTION PAGE DOWN. Flytta fokus till nästa flik och aktivera omedelbart. När fokus ligger i en panel är följande nyckelkommandon tillgängliga: CTRL UP. Flytta fokus till tillhörande flik. ALT OPTION SIDAN UPP. Flytta fokus till föregående flik och aktivera omedelbart. ALT OPTION PAGE DOWN. Flytta fokus till nästa flik och aktivera omedelbart. I fliken Widget används jQuery UI CSS-ramverket för att utforma utseendet. Om flikar är specifika styling behövs kan följande CSS-klassnamn användas för överskridanden eller som nycklar för klassalternativet: ui-flikar. Flikens yttre behållare. Detta element kommer dessutom att ha en klass av ui-flikar-hopfällbara när det hopfällbara alternativet är inställt. ui-flikar-nav. Listan över flikar. ui-flikar-tabb. En av föremålen i listan över flikar. Det aktiva objektet har klassen ui-flikar. Alla listobjekt vars associerade innehåll laddas via ett Ajax-samtal kommer att ha klassen ui-tabs-loading. ui-flikar-ankare. Ankrarna användes för att byta paneler. ui-flikar-panel. Panelerna associerade med flikarna. Endast panelen vars motsvarande flik är aktiv kommer att vara synlig. Beroenden Ytterligare anmärkningar: Den här widgeten kräver lite funktionell CSS, annars fungerar det. Om du bygger ett anpassat tema, använd den specifika CSS-filen för widgetaposs som utgångspunkt. activexA0 Vilken panel är för närvarande öppen. Flera typer stöds: Booleska. Inställning aktiv till falsk kommer att kollapsa alla paneler. Detta kräver att det hopfällbara alternativet är sant. Heltal. Det nollbaserade indexet på panelen som är aktiv (öppen). Ett negativt värde väljer paneler som går bakåt från den sista panelen. Kodsexempel: Initiera flikarna med det aktiva alternativet som anges: Flikar i jQuery UI 1.7 UI-flikar-widgeten används för att växla sikt över en uppsättning olika element. Varje element innehåller innehåll som kan nås genom att klicka på rubriken som visas som en enskild flik. Flikarna är strukturerade så att de stämmer bredvid varandra, medan innehållsdelarna är lagrade ovanpå varandra, med endast den övre synliga. Om du klickar på en flik markerar du fliken och tar med den tillhörande innehållspanelen överst i stapeln. Endast en innehållspanel kan vara öppen åt gången. Följande skärmdump visar de olika komponenterna i en uppsättning UI-flikar: En grundläggande flikimplementering Strukturen för de underliggande HTML-elementen, som flikar är baserade på, är styva och widgets kräver ett visst antal element för att de ska kunna fungera. Flikarna måste skapas från ett listelement (beställt eller oordnat) och varje listobjekt måste innehålla ett ltagt-element. Varje länk måste ha ett motsvarande element med ett specificerat id som det är associerat med href-attributet för länkar. Förtydliga den exakta strukturen av dessa element efter vårt första exempel. I en ny fil i din textredigerare skapar du följande sida: Spara koden som flikar1.html i din jqueryui-arbetsmapp. Låt oss granska vad som användes. Följande script - och CSS-resurser behövs för standardfliken för widget-widget: En flik widget består av flera standard HTML-element som är ordnade på ett visst sätt (dessa kan antingen vara hårdkodade till sidan eller läggas till dynamiskt eller kan vara en blandning av båda beroende på kraven i ditt genomförande). Ett yttre behållarelement, vilket tabuleringsmetoden heter Ett listelement (lulgt eller ltolgt) Ett ltagt element för varje flik Ett element för innehållet i varje flik De två första elementen i den yttre behållaren gör flikarna som kan klickas, vilka är brukade visa innehållsdelen som är associerad med fliken. Varje flik ska innehålla en listobjekt som innehåller länken. Href-attributet för länken ska anges som en fragmentidentifierare, prefixad med. Den ska matcha id-attributet till det element som bildar innehållsavsnittet, med vilket det är associerat. Innehållsdelarna på varje flik skapas av elementen. ID-attributet krävs och kommer att riktas mot dess motsvarande element. Weve använde element i det här exemplet som innehållspanelerna för varje flik, men andra element, till exempel element kan också användas. De element som diskuterats hittills, tillsammans med deras nödvändiga attribut, är det minsta som krävs från den underliggande markup. We länkar till flera ltscriptgt resurser från biblioteket längst ner på ltbodygt före dess stängande tagg. Laddar skript senast efter att stilark och sidelement är en beprövad teknik för att förbättra prestanda. Efter att ha länkats först till jQuery länkar vi till filen ui. core. js som krävs av alla komponenter (förutom effekterna, som har sin egen kärnfil). Vi kopplar sedan till komponentens källfil som i detta fall är ui. tabs. js. Efter de tre erforderliga skriptfilerna från biblioteket kan vi gå till vårt anpassade lt scriptgt-element där vi lägger till koden som skapar flikarna. Vi använder helt enkelt () (shortcut) funktionen för att utföra vår kod när dokumentet är klart. Vi kallar då fliken () widgetmetoden på jQuery-objektet, vilket representerar vårt flikbehållarelement (det är ett tag med myTabs-ID). När vi kör den här filen i en webbläsare bör vi se flikarna som de fanns i den första skärmdumpen av den här artikeln (utan kommentarerna självklart). Tabell CSS-ramklasser Med Firebug for Firefox (eller en annan generisk DOM-explorer) kan vi se att en mängd olika klassnamn läggs till i de olika underliggande HTML-elementen som fliken Widget skapas från, som visas i följande skärmdump: Låt oss granska dessa i korthet. Till den yttre behållaren lt divgt läggs följande klassnamn till: Tillämpade avrundade hörn till bottenkanterna på innehållspanelerna Alla dessa klasser läggs till de underliggande elementen automatiskt av biblioteket, vi behöver inte manuellt lägga till dem när du kodar sidan . Som dessa tabeller illustrerar, tillhandahåller CSS-ramen den kompletta uppsättningen av båda strukturella CSS-format som styr hur flikarna fungerar och temspecifika stilar som styr hur flikarna visas, men inte hur de fungerar. Vi kan enkelt se vilka väljare som väl måste brytas om vi vill tweak utseendet på widgeten, vilket är vad bra gör i följande avsnitt. Använda ett anpassat tema till flikarna I nästa exempel kan vi se hur du ändrar flikarnas grundläggande utseende. Vi kan åsidosätta alla regler som används rent för visning i våra egna stilregler för snabb och enkel anpassning utan att ändra reglerna för flikfunktionalitet eller struktur. I en ny fil i din textredigerare skapar du följande mycket lilla stilark. Det här är allt vi behöver. Spara filen som flikarTheme. css i din css-mapp. Om du jämför klassnamnen med tabellerna på de föregående sidorna kommer du att se det som överträdde temaspecifika stilar. Eftersom vi övervägde temafilen måste vi träffa eller överstiga selektornas specificitet i theme. css. Därför riktar vi oss ibland till flera väljare. I detta exempel åsidosätter vi några av reglerna i ui. tabs. css. Vi måste använda ID-väljaren av vårt behållarelement tillsammans med väljaren från ui. theme. css (.ui-widget-innehåll) för att slå dubbelklassväljaren. ui-tabs. ui-tabs-panel. Glöm inte att länka till det nya stilarket från den underliggande HTML-filen, och se till att det anpassade formatarket vi just skapat visas efter filen ui. tabs. css: De regler som vi försöker åsidosätta överskrids inte av vår temafil om stilarken inte är kopplade till i rätt ordning. Spara den ändrade filen som tabs2.html i mappen jqueryui och visa den i en webbläsare. Det ska se ut som följande skärmdump: Vårt nya tema skiljer sig inte dramatiskt från standardglattnivån. Vi kan dock anpassa sitt utseende för att passa våra egna behov och önskemål genom att lägga till några få stilar. Konfigurerbara alternativ Var och en av de olika komponenterna i biblioteket har en rad olika alternativ som styr vilka funktioner i widgeten som standard är aktiverade. Ett objekt bokstavligt kan överföras till fliken Widget-metoden för att konfigurera dessa alternativ. De tillgängliga alternativen för att konfigurera icke-standardbeteenden när du använder fliken Widget visas i följande tabell: En sträng som anger de element som används när du skapar nya flikar dynamiskt. Observera att både en ltagt och en ltspangt-tagg skapas när nya flikar läggs till av widgeten. Strängarna och delarna används internt av widgeten och ersätts med aktuella värden av widgeten. Välja en flik Låt oss se hur dessa konfigurerbara egenskaper kan användas. Till exempel kan vi konfigurera widgeten så att den andra fliken visas när sidan laddas. Ta bort länken för flikarTheme. css i lt headgt och ändra det sista lt scriptgt-elementet så att det visas som följer: Spara det som flikar3.html. De olika flikarna och deras associerade innehållspaneler representeras av ett numeriskt index som börjar vid noll, ungefär som en vanlig JavaScript-grupp. Ange en annan flik för att öppna som standard är lika enkelt som att leverera sitt indexnummer som värdet för den valda egenskapen. När sidan laddas ska den andra fliken väljas. Weve bytte till standard smoothness-temat så att vi kan fokusera på hur egenskaperna fungerar. Tillsammans med att ändra vilken flik som väljs kan vi också ange att inga flikar ska väljas initialt genom att leverera null som värdet för den här egenskapen. Detta gör att widgeten visas enligt följande på sidbelastning: Inaktivera en flik Det kan hända att en viss flik ska vara inaktiverad tills ett visst villkor är uppfyllt. Detta uppnås enkelt genom att manipulera flikarnas funktionshinder. Ändra konfigurationsobjektet i tabs3.html till det här: Spara det som flikar4.html i din jqueryui-mapp. I det här exemplet tar vi bort den markerade egenskapen och lägger till indexet för den andra fliken till den inaktiverade gruppen. Vi kan också lägga till index för andra flikar till den här rutan, separerad av ett kommatecken, för att inaktivera flera flikar som standard. När sidan är laddad i en webbläsare har den andra fliken klassnamnet ui-widget-deaktiverat applicerat på det, och hämtar inaktiverade stilar från ui. theme. css. Det svarar inte på mus interaktioner på något sätt som visas i följande skärmdump: Övergångseffekter Vi kan enkelt lägga till attraktiva övergångseffekter med hjälp av fx-egenskapen. Dessa visas när flikar är öppna och stängda. Den här egenskapen är konfigurerad med ett annat objekt bokstavligt (eller en array) i vårt konfigurationsobjekt, vilket möjliggör en eller flera effekter. Låter aktivera blekande effekter med följande konfigurationsobjekt: Spara den här filen som tabs5.html i din jqueryui-mapp. Föremålet som vi skapade har två egenskaper. Den första egenskapen är animationen. För att använda blekning anger vi opacitet eftersom detta är det som justeras. Vi skulle ange höjd som egenskapsnamn istället för att använda öppningsanimationer. Byte av opacitet vänder omedelbart sin nuvarande inställning. Om det för närvarande är synligt görs det osynligt och vice versa. Den andra egenskapen, varaktighet. anger hur snabbt animationen inträffar. Värdena för den här egenskapen är långsamma. normal (standardvärde) eller snabbt. Vi kan också tillhandahålla ett heltal som representerar det antal millisekunder som animationen ska köras för. När vi kör filen kan vi se att flikinnehållet sakta slår ut när en flik stängs och bleknar när en ny flik öppnas. Båda animationerna inträffar under en enda flikinteraktion. För att bara visa animationen en gång, när en flik stängs till exempel, skulle vi behöva näsa fx-objektet i en array. Ändra konfigurationsobjektet i tabs5.html så att det ser ut som följer: Lukkseffekten för den nuvarande innehållspanelen finns i ett objekt i det första objektet i matrisen och öppningsanimationen för den nya fliken är den andra. Genom att ange null som det andra objektet i arrayen inaktiverar vi öppningsanimationerna när en ny flik väljs. Vi kan också ange olika animationer och hastigheter för att öppna och stänga animeringar genom att lägga till ett annat objekt som det andra alternativet i stället för null. Spara det som tabs6.html och visa resultaten i en webbläsare. Kollapsbara flikar Som standard när den aktiva fliken klickas, händer ingenting. Men vi kan ändra det så att den nuvarande öppna innehållspanelen stängs när dess flikrubrik är markerad. Ändra konfigurationsobjektet i tabs6.html så att det visas som följer: Spara den här versionen som tabs7.html. Det här alternativet tillåter att alla innehållspaneler stängs, ungefär som när vi levererade null till den valda egenskapen tidigare. Om du klickar på en avaktiverad flik väljer du fliken och visar dess associerade innehållspanel. Om du klickar på samma flik igen stängs den och krympar widgeten så att bara rubriken och flikarna visas). I den här artikeln har vi diskuterat följande ämnen: Standardinställningen av widgeten Hur CSS-ramarna riktar sig till flikar på flikar Så här applicerar du anpassade stilar till en uppsättning flikar Konfigurering av flikar med deras alternativ Inbyggda övergångseffekter för ändringar av innehållspanelen Om du har läst den här artikeln kan du vara intresserad av att visa: Du har läst ett utdrag av: Nya populära inlägg Vi förstår din tid är viktig. Unikt bland de stora utgivarna söker vi att utveckla och publicera det bredaste utbudet av inlärnings - och informationsprodukter på varje teknik. Varje Packt-produkt levererar en specifik inlärningsväg, som i stor utsträckning definieras av serietypen. Denna strukturerade metod gör att du kan välja den väg som bäst passar din kunskapsnivå, inlärningsstil och uppgiftsmål. Som en ny användare kommer dessa stegvisa handledningsguider att ge dig alla praktiska färdigheter som krävs för att bli kompetenta och effektiva. Nybörjare Guide Vänliga, informella handledning som ger en praktisk introduktion med exempel, aktiviteter och utmaningar. Essentials Snabba, koncentrerade introduktioner som visar det snabbaste sättet att få verktyget att fungera i den verkliga världen. En samling praktiska självständiga recept som alla användare av tekniken kommer att finna användbara för att bygga mer kraftfulla och pålitliga system. Blueprints Guider dig genom de vanligaste typerna av projekt som du kommer att möta, vilket ger dig end-to-end-vägledning om hur du snabbt och pålitligt kan bygga din specifika lösning. Ta dina färdigheter till nästa nivå med avancerade handledning som ger dig självförtroende för att behärska verktygen mest kraftfulla funktioner. Tillgängliga för läsare som antar ämnet, dessa titlar kommer dig in i verktyget eller tekniken så att du kan bli en effektiv användare. Tabeller i jQuery UI 1.7 UI-flikar-widgeten används för att växla sikt över en uppsättning olika element, varvid varje element innehåller innehåll som kan nås genom att klicka på rubriken som visas som en enskild flik. Flikarna är strukturerade så att de stämmer bredvid varandra, medan innehållsdelarna är lagrade ovanpå varandra, med endast den övre synliga. Om du klickar på en flik markerar du fliken och tar med den tillhörande innehållspanelen överst i stapeln. Endast en innehållspanel kan vara öppen åt gången. Följande skärmdump visar de olika komponenterna i en uppsättning UI-flikar: En grundläggande flikimplementering Strukturen för de underliggande HTML-elementen, som flikar är baserade på, är styva och widgets kräver ett visst antal element för att de ska kunna fungera. Flikarna måste skapas från ett listelement (beställt eller oordnat) och varje listobjekt måste innehålla ett ltagt-element. Varje länk måste ha ett motsvarande element med ett specificerat id som det är associerat med href-attributet för länkar. Förtydliga den exakta strukturen av dessa element efter vårt första exempel. I en ny fil i din textredigerare skapar du följande sida: Spara koden som flikar1.html i din jqueryui-arbetsmapp. Låt oss granska vad som användes. Följande script - och CSS-resurser behövs för standardfliken för widget-widget: En flik widget består av flera standard HTML-element som är ordnade på ett visst sätt (dessa kan antingen vara hårdkodade till sidan eller läggas till dynamiskt eller kan vara en blandning av båda beroende på kraven i ditt genomförande). Ett yttre behållarelement, vilket tabuleringsmetoden heter Ett listelement (lulgt eller ltolgt) Ett ltagt element för varje flik Ett element för innehållet i varje flik De två första elementen i den yttre behållaren gör flikarna som kan klickas, vilka är brukade visa innehållsdelen som är associerad med fliken. Varje flik ska innehålla en listobjekt som innehåller länken. Href-attributet för länken ska anges som en fragmentidentifierare, prefixad med. Den ska matcha id-attributet till det element som bildar innehållsavsnittet, med vilket det är associerat. Innehållsdelarna på varje flik skapas av elementen. ID-attributet krävs och kommer att riktas mot dess motsvarande element. Weve använde element i det här exemplet som innehållspanelerna för varje flik, men andra element, till exempel element kan också användas. De element som diskuterats hittills, tillsammans med deras nödvändiga attribut, är det minsta som krävs från den underliggande markup. We länkar till flera ltscriptgt resurser från biblioteket längst ner på ltbodygt före dess stängande tagg. Laddar skript senast efter att stilark och sidelement är en beprövad teknik för att förbättra prestanda. Efter att ha länkats först till jQuery länkar vi till filen ui. core. js som krävs av alla komponenter (förutom effekterna, som har sin egen kärnfil). Vi kopplar sedan till komponentens källfil som i detta fall är ui. tabs. js. Efter de tre nödvändiga skriptfilerna från biblioteket kan vi gå till vårt anpassade lt scriptgt-element där vi lägger till koden som skapar flikarna. Vi använder helt enkelt () (shortcut) funktionen för att utföra vår kod när dokumentet är klart. Vi kallar då fliken () widgetmetoden på jQuery-objektet, vilket representerar vårt flikbehållarelement (det är ett tag med myTabs-ID). När vi kör den här filen i en webbläsare bör vi se flikarna som de fanns i den första skärmdumpen av den här artikeln (utan kommentarerna självklart). Tabell CSS-ramklasser Med Firebug for Firefox (eller en annan generisk DOM-explorer) kan vi se att en mängd olika klassnamn läggs till i de olika underliggande HTML-elementen som fliken Widget skapas från, som visas i följande skärmdump: Låt oss granska dessa i korthet. Till den yttre behållaren lt divgt läggs följande klassnamn till: Tillämpade avrundade hörn till bottenkanterna på innehållspanelerna Alla dessa klasser läggs till de underliggande elementen automatiskt av biblioteket, vi behöver inte manuellt lägga till dem när du kodar sidan . Som dessa tabeller illustrerar, tillhandahåller CSS-ramen den kompletta uppsättningen av båda strukturella CSS-format som styr hur flikarna fungerar och temspecifika stilar som styr hur flikarna visas, men inte hur de fungerar. Vi kan enkelt se vilka väljare som väl måste brytas om vi vill tweak utseendet på widgeten, vilket är vad bra gör i följande avsnitt. Använda ett anpassat tema till flikarna I nästa exempel kan vi se hur du ändrar flikarnas grundläggande utseende. Vi kan åsidosätta alla regler som används rent för visning i våra egna stilregler för snabb och enkel anpassning utan att ändra reglerna för flikfunktionalitet eller struktur. I en ny fil i din textredigerare skapar du följande mycket lilla stilark. Det här är allt vi behöver. Spara filen som flikarTheme. css i din css-mapp. Om du jämför klassnamnen med tabellerna på de föregående sidorna kommer du att se det som överträdde temaspecifika stilar. Eftersom vi övervägde temafilen måste vi träffa eller överstiga selektornas specificitet i theme. css. Därför riktar vi oss ibland till flera väljare. I detta exempel åsidosätter vi några av reglerna i ui. tabs. css. Vi måste använda ID-väljaren av vårt behållarelement tillsammans med väljaren från ui. theme. css (.ui-widget-innehåll) för att slå dubbelklassväljaren. ui-tabs. ui-tabs-panel. Glöm inte att länka till det nya stilarket från den underliggande HTML-filen, och se till att det anpassade formatarket vi just skapat visas efter filen ui. tabs. css: De regler som vi försöker åsidosätta överskrids inte av vår temafil om stilarken inte är kopplade till i rätt ordning. Spara den ändrade filen som tabs2.html i mappen jqueryui och visa den i en webbläsare. Det ska se ut som följande skärmdump: Vårt nya tema skiljer sig inte dramatiskt från standardglattnivån. Vi kan dock anpassa sitt utseende för att passa våra egna behov och önskemål genom att lägga till några få stilar. Konfigurerbara alternativ Var och en av de olika komponenterna i biblioteket har en rad olika alternativ som styr vilka funktioner i widgeten som standard är aktiverade. Ett objekt bokstavligt kan överföras till fliken Widget-metoden för att konfigurera dessa alternativ. De tillgängliga alternativen för att konfigurera icke-standardbeteenden när du använder fliken Widget visas i följande tabell: En sträng som anger de element som används när du skapar nya flikar dynamiskt. Observera att både en ltagt och en ltspangt-tagg skapas när nya flikar läggs till av widgeten. Strängarna och delarna används internt av widgeten och ersätts med aktuella värden av widgeten. Välja en flik Låt oss se hur dessa konfigurerbara egenskaper kan användas. Till exempel kan vi konfigurera widgeten så att den andra fliken visas när sidan laddas. Ta bort länken för flikarTheme. css i lt headgt och ändra det sista lt scriptgt-elementet så att det visas som följer: Spara det som flikar3.html. De olika flikarna och deras associerade innehållspaneler representeras av ett numeriskt index som börjar vid noll, ungefär som en vanlig JavaScript-grupp. Ange en annan flik för att öppna som standard är lika enkelt som att leverera sitt indexnummer som värdet för den valda egenskapen. När sidan laddas ska den andra fliken väljas. Weve bytte till standard smoothness-temat så att vi kan fokusera på hur egenskaperna fungerar. Tillsammans med att ändra vilken flik som väljs kan vi också ange att inga flikar ska väljas initialt genom att leverera null som värdet för den här egenskapen. Detta gör att widgeten visas enligt följande på sidbelastning: Inaktivera en flik Det kan hända att en viss flik ska vara inaktiverad tills ett visst villkor är uppfyllt. Detta uppnås enkelt genom att manipulera flikarnas funktionshinder. Ändra konfigurationsobjektet i tabs3.html till det här: Spara det som flikar4.html i din jqueryui-mapp. I det här exemplet tar vi bort den markerade egenskapen och lägger till indexet för den andra fliken till den inaktiverade gruppen. Vi kan också lägga till index för andra flikar till den här rutan, separerad av ett kommatecken, för att inaktivera flera flikar som standard. När sidan är laddad i en webbläsare har den andra fliken klassnamnet ui-widget-deaktiverat applicerat på det, och hämtar inaktiverade stilar från ui. theme. css. Det svarar inte på mus interaktioner på något sätt som visas i följande skärmdump: Övergångseffekter Vi kan enkelt lägga till attraktiva övergångseffekter med hjälp av fx-egenskapen. Dessa visas när flikar är öppna och stängda. Den här egenskapen är konfigurerad med ett annat objekt bokstavligt (eller en array) i vårt konfigurationsobjekt, vilket möjliggör en eller flera effekter. Låter aktivera blekande effekter med följande konfigurationsobjekt: Spara den här filen som tabs5.html i din jqueryui-mapp. Föremålet som vi skapade har två egenskaper. Den första egenskapen är animationen. För att använda blekning anger vi opacitet eftersom detta är det som justeras. Vi skulle ange höjd som egenskapsnamn istället för att använda öppningsanimationer. Byte av opacitet vänder omedelbart sin nuvarande inställning. Om det för närvarande är synligt görs det osynligt och vice versa. Den andra egenskapen, varaktighet. anger hur snabbt animationen inträffar. Värdena för den här egenskapen är långsamma. normal (standardvärde) eller snabbt. Vi kan också tillhandahålla ett heltal som representerar det antal millisekunder som animationen ska köras för. När vi kör filen kan vi se att flikinnehållet sakta slår ut när en flik stängs och bleknar när en ny flik öppnas. Båda animationerna inträffar under en enda flikinteraktion. För att bara visa animationen en gång, när en flik stängs till exempel, skulle vi behöva näsa fx-objektet i en array. Ändra konfigurationsobjektet i tabs5.html så att det ser ut som följer: Lukkseffekten för den nuvarande innehållspanelen finns i ett objekt i det första objektet i matrisen och öppningsanimationen för den nya fliken är den andra. Genom att ange null som det andra objektet i arrayen inaktiverar vi öppningsanimationerna när en ny flik väljs. Vi kan också ange olika animationer och hastigheter för att öppna och stänga animeringar genom att lägga till ett annat objekt som det andra alternativet i stället för null. Spara det som tabs6.html och visa resultaten i en webbläsare. Kollapsbara flikar Som standard när den aktiva fliken klickas, händer ingenting. Men vi kan ändra det så att den nuvarande öppna innehållspanelen stängs när dess flikrubrik är markerad. Ändra konfigurationsobjektet i tabs6.html så att det visas som följer: Spara den här versionen som tabs7.html. Det här alternativet tillåter att alla innehållspaneler stängs, ungefär som när vi levererade null till den valda egenskapen tidigare. Om du klickar på en avaktiverad flik väljer du fliken och visar dess associerade innehållspanel. Om du klickar på samma flik igen stängs den, krymper widgeten så att bara rubriken och flikarna visas). I den här artikeln har vi diskuterat följande ämnen: Standardinställningen av widgeten Hur CSS-ramarna riktar sig till flikar på flikar Så här applicerar du anpassade stilar till en uppsättning flikar Konfigurering av flikar med deras alternativ Inbyggda övergångseffekter för ändringar av innehållspanelen Om du har läst den här artikeln kan du vara intresserad av att visa: Du har läst ett utdrag av: Nya populära inlägg Vi förstår din tid är viktig. Unikt bland de stora utgivarna söker vi att utveckla och publicera det bredaste utbudet av inlärnings - och informationsprodukter på varje teknik. Varje Packt-produkt levererar en specifik inlärningsväg, som i stor utsträckning definieras av serietypen. Med denna strukturerade metod kan du välja vilken väg som bäst passar din kunskapsnivå, lärandestil och uppgiftsmål. Som en ny användare kommer dessa steg-för-steg handledningsguider att ge dig alla praktiska färdigheter som krävs för att bli kompetenta och effektiva. Nybörjare Guide Vänliga, informella handledning som ger en praktisk introduktion med exempel, aktiviteter och utmaningar. Essentials Snabba, koncentrerade introduktioner som visar det snabbaste sättet att få verktyget att fungera i den verkliga världen. En samling praktiska självständiga recept som alla användare av tekniken kommer att finna användbara för att bygga mer kraftfulla och pålitliga system. Blueprints Guider dig genom de vanligaste typerna av projekt som du kommer att möta, vilket ger dig end-to-end-vägledning om hur du snabbt och pålitligt kan bygga din specifika lösning. Ta dina färdigheter till nästa nivå med avancerade handledning som ger dig självförtroende för att behärska verktygen mest kraftfulla funktioner. Tillgängliga för läsare som antar ämnet, dessa titlar får dig in i verktyget eller tekniken så att du kan bli en effektiv användare.