14 svar · 387 visningar · startad av kbking
Jag har delat upp ett långt html-dokument i tio delar, ava1 - ava10.
Går det med javascript att ha en framåt- och en bakåt-knapp på ömse sidor om siffrorna 1, 2, ..., 10, typ paging alltså? Hur i så fall
Om det vill till asp-kod, kan någon visa hur man gör med ett exempelscript, tack!
De 10 ava.htm filerna ligger i rotmappen ame
Var gärna mycket utförlig!
Hälsn
kbking
Tack!
Det jag ville ha var två knappar, Tillbaka resp. Nästa. Med javascript går det väl inte, eller hur? Gå fram och tillbaka använder jag, men det fungerar som jag förstått det endast på sidor jag varit på innan. För att styra det med en "Nästa-knapp" blir jag väl då tvungen att ha lika många knappar som jag har sidor?
Någonting sådant här:
Låt sidan heta t.ex. "foo.html":
// Innanför <head> i "foo.html"
<script type="text/javascript">
<!--
function getQueryString(){
return parseInt((location.search.substring(location.search.indexOf("=")+1, location.search.length)));
};
function construct(h, n, p){
var previous = document.createElement("button");
previous.innerHTML = "« Tillbaka";
previous.onclick = function(){
location.href = "foo.html?page=" + (p-1);
}
previous.disabled = (p < 2) ? true : false;
var next = document.createElement("button");
next.innerHTML = "Nästa »";
next.onclick = function(){
location.href = "foo.html?page=" + (p+1);
}
next.disabled = (p > 9) ? true : false;
h.innerHTML = document.getElementById("_"+p).innerHTML;
n.appendChild(previous);
n.appendChild(next);
};
function load(){
var holder = document.getElementById("holder");
var nav = document.getElementById("nav");
var page = getQueryString();
construct(holder, nav, page);
};
window.onload = load;
//-->
</script>
...
// Innanför <body> i "foo.html":
<div style="display:none" id="_1">Texten på den första sidan...</div>
<div style="display:none" id="_2">Texten på den andra sidan...</div>
<div id="holder"></div>
<div id="nav"></div>
Länka sedan till t.ex. den första sidan så här: "foo.html?page=1".
Ah. "I fatt!" eller som man säger på svenska: Jag förstår. Det var en sån variant som skulle till, trodde det var 10 olika html-filer.
Snygg lösning Peter S.
Har gjort testet, det fungerade klanderfritt.
Verkligen bussigt!
Fungerar detta script oavsett hur sidan är uppbyggda?
Kan jag positionera knapparna hur som helst på sidan?
Går det att ersätta knapparna med egna giffar?
De både "div"-elementen ("nav" och "holder") kan du styla och placera var du vill på sidan.
Om du vill använda bilder istället för knappar får du göra några ändringar:
function construct(h, n, p){
var previous = document.createElement("img");
previous.src = "previous.png";
previous.height = "30";
previous.width = "50";
previous.onmouseover = function(){
this.style.cursor = "pointer";
}
previous.disabled = (p < 2) ? true : false;
var next = document.createElement("img");
next.src = "next.png";
next.height = "30";
next.width = "50";
next.onmouseover = function(){
this.style.cursor = "pointer";
}
next.onclick = function(){
location.href = "foo.html?page=" + (p+1);
}
next.disabled = (p > 9) ? true : false;
h.innerHTML = document.getElementById("_"+p).innerHTML;
n.appendChild(previous);
n.appendChild(next);
};
Ära den som äras bör!
Kan inte undvika att fascineras av vilken kapacitet du har!
Jag har jämt sjå med att implementera allt!
Nu förstår jag kvaliteten på detta forum!
Hälsn
kbking
Allting är på plats och fungerar precis som det var tänkt!
Vad behöver jag göra om jag vill länka in scriptet i dokumentet
istället?
Då lägger du all kod som står mellan <script> och </script> (exklusive kommentarerna: <!-- och //-->) i en vanlig textfil och sparar den som namn.js. Sedan skriver du följande innanför <head> och </head> i det aktuella dokumentet:
<script type="text/javascript" src="[i]namn[/i].js"></script>
Det fungerar alltså helt som jag hade tänkt.
Det jag undrar nu är om det går att klämma in pagineringen 1, 2, ..., 10 mellan de båda knapparna (och kanske att aktuell sida visas med fetstil)?
Om det är möjligt, hur gör jag?
Exempel:
<head>
<script type="text/javascript">
<!--
function getQueryString(){
return parseInt((location.search.substring(location.search.indexOf("=")+1, location.search.length)));
};
function construct(h, n, p){
var previous = document.createElement("button");
previous.innerHTML = "« Tillbaka";
previous.onclick = function(){
location.href = "foo.html?page=" + (p-1);
}
previous.disabled = (p < 2) ? true : false;
var next = document.createElement("button");
next.innerHTML = "Nästa »";
next.onclick = function(){
location.href = "foo.html?page=" + (p+1);
}
next.disabled = (p > 9) ? true : false;
h.innerHTML = document.getElementById("_"+p).innerHTML;
n.appendChild(previous);
n.appendChild(document.createTextNode(" "));
for(var i=1; i<=10; i++){
if(i == p) continue;
var a = document.createElement("a");
a.href = "foo.html?page=" + i;
a.innerHTML = i;
n.appendChild(a);
if( i < 10 )
n.appendChild(document.createTextNode("-"));
else
n.appendChild(document.createTextNode(" "));
}
n.appendChild(next);
};
function load(){
var holder = document.getElementById("holder");
var nav = document.getElementById("nav");
var page = getQueryString();
construct(holder, nav, page);
};
window.onload = load;
//-->
</script>
</head>
<div style="display:none" id="_1">Texten på den första sidan...</div>
<div style="display:none" id="_2">Texten på den andra sidan...</div>
<div style="display:none" id="_3">Texten på den tredje sidan...</div>
<div id="holder"></div>
<div id="nav"></div>
Koden utelämnar den aktuella sidan i själva pagineringen.