Forum > Klientspråk > JavaScript
Tjenare
Jag hjälpte häromdan pbf med att hitta en lösning på ett problem. Man använder jQuery Tabs.
Det som skulle hända är att när man klickade på en tab så skulle man ladda om sidan och visa den tabben man hade klickat på. Jag försökte med olika metoder och kom fram till en lösning. Titta på följande kod:
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
$(function() {
var cookieName = 'SelectedTab';
var pageName = 'test.html';
var theCookie = readCookie(cookieName);
if(theCookie != null){
location.href = pageName+'#'+theCookie;
document.cookie = cookieName+'= ; expires=Thu, 2 Aug 2008 20:47:11 UTC; path=/'
location.reload();
}
$("#tabs").tabs({
select: function(event, ui){
document.cookie = cookieName+'='+ui.panel.id+'; expires=Thu, 2 Aug 3008 20:47:11 UTC; path=/'
location.href = pageName;
return false;
}
});
});
Voila! Men...det känns onödigt att ladda om sidan två gånger för att det ska fungera. Frågan är hur man kan optimera den här koden. Det vore kul att se hur ni skulle göra istället.
Testlänk: http://www.domat.se/test.html
Får man fråga varför du måste ladda om sidan? Ser inte någon vits att köra jquery tabbar om du ändå skall ladda om sidan du är på.
Och om jag inte minns helt fel från jquery-tab så räcker det att du redirectar (om du nu måste det) till ID taben:
sidan.html#tab2 (om det är tab2 som är ID för tabb 2). i ditt fal: http://www.domat.se/test.html#tab-2
Varför skall du spara det i en cookie och skickar användarn vidare, känns som du gå ett steg för mycket, samtidigt så ser jag inte varför man nu skall använda sig av javascript och sen inte använda sig av biblioteketet jquery-ui
Anledningen till att jag laddar om sidan på slutet är att om man bara navigerar till test.html#tab-2 så visas inte denna. Sidan laddas inte om och tabben visas inte, så jag antar att det är ett cache problem. Då löser jag det med en refresh av sidan, det löser just det problemet. Så det som skulle göras var att
Jag försökte hitta svar runtom på olika sidor, men jag hittade inte. Så jag kom på en egen lösning. Men jag skulle välkomna bättre idéer, det är därför jag postar detta =)
http://www.domat.se/test.html#tab-2 => Markera ju dina andra tabb, om du länkar från en sida så kommer den vara markerad... så jag förstå inte alls vad problemet är från början
Pröva att stå i test.html#tab-2 och sen i adressfältet skriva test.html#tab-3, du kommer att se att den inte byter tab. Försök även att när du står på den sidan att med JS navigera dig vidare till test.html#tab-3, samma problem.
Din kod är ju exakt samma som vad den gör by default, du måste ju trycka på något för att den skall ändra tabben, om jag trycker på tab-3 och kör en riktig reload så kommer den markera tab-3 om det är det den har i sitt addressfält. Jag förstå inte alls vad problemet är om jag skall vara ärlig.
$(function() {
var pageName = 'test.html';
$("#tabs").tabs({
select: function(event, ui){
location.href = pageName + "#" + ui.panel.id;
}
});
});Problemet ligger i att din kod inte laddar om sidan, utan den byter bara tabs.
Din kod: http://www.domat.se/test2.html
Min kod: http://www.domat.se/test.html
Fortfarande:
Varför skall en sida laddas om? Då ser jag inte vitsen alls att köra jquery UI alls, vad är målet med att sidan måste laddas om?
Det vet jag inte, jag fick en uppgift om att det ska göra det bara. Det kan vara så att man vill att speciella flikar ska ladda om sidan. Varför kan vi bara spekulera kring, eller så kanske pbf kan förklara =)