Avatar billede tipsen Nybegynder
12. april 2004 - 21:18 Der er 14 kommentarer og
1 løsning

Dupliker opførsel fra edbpriser.dk

Hej eksperter

I forbindelse med et php-script der giver mulighed for at redigere poster i en database har jeg brug for en sorteringsmulighed. Jeg havde overvejet at man for en post i databasen skulle kunne vælge "Før", "Lig" eller "Efter" kombineret med en drop-down liste, hvor en af de øvrige poster fra databasen kan vælges.

Udfra denne information kan jeg godt strikke et php-script sammen, som kan sørge for selve sorteringen - men jeg mangler stadig at lave en formular der er tilpas brugervenlig. Jeg faldt så over edbpriser.dk, hvor de rent faktisk bruger en udmærket teknik i forbindelse med avancerede søgninger.

Se: http://www.edbpriser.dk/Showsubcategory.asp?ID=35

Hvis man kigger under Avanceret søgning, vil man se, at der kan klikkes på et billede, som ændres samtidig med at der kan vælges fra en drop-down menu ved siden af. Jeg har prøvet at kigge på kildekoden, men har ikke kunnet lave et simpelt fungerende eksempel udfra deres html-kode - er der nogen som evner at duplikere den opførsel og smide det ind i en formular?

På forhånd tak

Mvh Tommy
Avatar billede schaefner Juniormester
12. april 2004 - 21:32 #1
Det vile sige at man ud for hver post skal kunne trykke på et billede for at vælge om posten skal flyttes op eller ned?
Avatar billede schaefner Juniormester
12. april 2004 - 22:06 #2
Jeg lavede på et tidspunkt denne: http://schaefner.dk/files/temp/exp/467176.html

Måske den kan bruges?
Avatar billede tipsen Nybegynder
13. april 2004 - 00:25 #3
Det er ikke helt, hvad jeg søger - synes det er lidt for omstændigt :-)

Det jeg gerne vil have er:

[en image-knap] [en drop-down menu]

hvor image-knap skifter mellem 3 "states" (Før, Lig og Efter) mens drop-down menu indeholder de resterende poster fra db-tabellen. Så du kan eks. vælge, at en post skal placeres "Før" + "Post 27" eller "Lig" + "Post 8" osv. Den del med knappen, der kan have 3 tilstande har de på edbpriser.dk - som beskrevet ovenfor - det er vel egentlig dén del der volder mig problemer!
Avatar billede roenving Novice
13. april 2004 - 00:35 #4
Den er da ikke særlig kompliceret, men også elendigt lavet:

<img style="CURSOR:hand;" ID="Dirimg11" border="0" height="18" width="41" src="/images/Button_Min.gif" onclick="jscript:checkdir('Dirimg11','Direction11')">

  function checkdir(imgId,objId) {
    if (img = document.getElementById(imgId)) {
    }
    if (obj = document.getElementById(objId)) {
    }
    if (obj.value=='0') {
      img.src='/images/button_equal.gif';
      obj.value='1';     
    } else if (obj.value=='1') {
      img.src='/images/button_min.gif';
      obj.value='2';     
    } else {
      img.src='/images/button_max.gif';
      obj.value='0';     
    }
  }
Avatar billede roenving Novice
13. april 2004 - 00:42 #5
Jeg tror, jeg ville:

<img style="cursor:pointer;" ID="Dirimg11" border="0" height="18" width="41" src="/images/button_min.gif" onclick="chg(this)">

var dirimg = ['/images/button_min.gif','/images/button_equal.gif','/images/button_max.gif'];
function chg(img){
  for(i=0;dirimg.length>i;i++)if(img.src==dirimg[i])break;
  img.src = dirimg[++i%dirimg.length];
}

Ganske og aldeles utestet, men nu ligner det også noget, som virker i andet end IE !-)
Avatar billede tipsen Nybegynder
13. april 2004 - 01:03 #6
Jeg har også prøvet at kigge nærmere på den og der mangler et form felt i din udgave:

<input type="hidden" Name="Direction1147" ID="Direction1147" Value="2">
<img style="CURSOR:hand;" ID="Dirimg1147" height="18" width="41" src="/images/Button_Min.gif" onclick="jscript:checkdir('Dirimg1147','Direction1147')">

De opdaterer åbenbart både billede og værdien af et hidden form felt - hvordan modificerer vi din udgave til at tage højde for det samme? Jeg er jo som sædvanlig mest interesseret i løsninger der også fungerer i andet end IE, så jeg er glad for, at du kritiserer/forkaster den oprindelige kode! Jeg er selv lidt af en kegle til JavaScript, så det er lidt hokus-pokus for mig... :-/

Mvh Tommy
Avatar billede roenving Novice
13. april 2004 - 01:22 #7
Nej !-)

Der mangler ikke noget, det andet er bare elendig programmering  !-)

-- selvfølgelig skal du samle værdien af boxen op, men det gøres med fordel onsubmit, men vi kan da godt skrive det on-the-fly:

var dirimg = ['/images/button_min.gif','/images/button_equal.gif','/images/button_max.gif'];
function chg(img){
  for(i=0;dirimg.length>i;i++)if(img.src==dirimg[i])break;
  img.src = dirimg[++i%dirimg.length];
  document.getElementById('Direction'+img.id.match(/\d+/)[0]).value = i%dirimg.length;
}

Bemærk også at jeg havde ændret hand-tingen, jeg fatter ikke at nogen overhovedet bruger den idag, medmindre de bruger FrontPage 1 ...
Avatar billede tipsen Nybegynder
15. april 2004 - 01:25 #8
Hej igen

Godt ord igen - man bliver klogere hele tiden og det er rart, at du også er god til at kritisere skrammelløsninger :-)

Jeg biksede lidt mere rundt med det og fandt ud af, at jeg kunne nøjes med følgende:

function chg(img) {
    var sortimgs = ['/images/button_before.gif','/images/button_equal.gif','/images/button_after.gif'];
    var i = (document.getElementById('sortorder').value + 1) % sortimgs.length;
    img.src = sortimgs[i];
    document.getElementById('sortorder').value = i;
}

Og følgende html-kode:

<img id="sortimage" style="cursor:pointer;" src="/images/button_before.gif" onclick="java script:chg(this);">
<select name="sortref">
    <option value="none">Ingenting</option>
    <option value="1">Forside</option>
    <option value="2">Om firma</option>
</select>

Hvis du umiddelbart kan se nogle problemer i denne kode - eller noget der kan optimeres, må du meget gerne smide nogle kommentarer! Og derudover må du også gerne smide et svar, så du kan få dine points :-)

Mvh Tommy
Avatar billede roenving Novice
16. april 2004 - 17:30 #9
Et par småting eller tre, den første vigtig, den anden brug af både pointer og hand og den tredje en misforståelse af javascript-pseudo-url'en, som _aldrig_ må bruges i andet end f.eks. href !-)

function chg(img) {
    var sortimgs = ['/images/button_before.gif','/images/button_equal.gif','/images/button_after.gif'];
    var i = (+document.getElementById('sortorder').value + 1) % sortimgs.length;
    img.src = sortimgs[i];
    document.getElementById('sortorder').value = i;
}

Og følgende html-kode:

<img id="sortimage" style="cursor:pointer,hand;" src="/images/button_before.gif" onclick="chg(this);">
<select name="sortref">
    <option value="none">Ingenting</option>
    <option value="1">Forside</option>
    <option value="2">Om firma</option>
</select>

-- og velbekomme '-)
Avatar billede tipsen Nybegynder
17. april 2004 - 10:40 #10
Jeg går udfra den første ting er det '+' du har smidt ind - er det en "høker" typecasting der konverterer fra string til numeric/integer?

Det med pointer vs. hand - er 'hand' ikke bare et eller andet skrammel fra, som ikke rigtigt benyttes?

Det med 'java script:' i kaldet af eventhandleren - det fik jeg fra et eller andet kode et sted på nettet - det virker da meget naturligt, at angive scriptsproget - men jeg så også et andet sted, at man skulle bruge et meta element til dette - er det bedre?
Avatar billede tipsen Nybegynder
17. april 2004 - 10:50 #11
Rettelse: "...skrammel fra M$,..." !
Avatar billede roenving Novice
17. april 2004 - 13:42 #12
+'et er ganske rigtig en short-hand typecasting, som har den fordel at den gør arbejdet både for parseInt og parseFloat (hvilket selvfølgelig også kan være en bagdel i nogle tilfælde !-)

Hand er ganske rigtigt noget gammelt M$-skrammel, men da det først er IE6, som har pointer implementeret, kan man jo ligeså godt forholde sig til virkelighedens verden, der er jo stadig 1/5 som ikke har en rigtig browser eller bruger IE6 ...

java script: er en pseudo-fil-protokol, men en protokol på samme måde som f.eks. http:// eller ftp:// og så bliver sammenhængen vist tydelig, den har selvsagt _intet_ at gøre som sprog-forklarer i en javascript-event !-)

-- og det var ikke en fejl, at jeg kaldte det en javascript-event, for det er det, det er defineret som i html-standarden ...

-- events er defineret som javascript-events, så det er selvfølgelig fuldstændigt overflødigt at sætte en fil-protokol på, og det ganske uanset, at visse browsere gerne vil overlade disse events til andre script-sprog
Avatar billede tipsen Nybegynder
17. april 2004 - 13:55 #13
Jeg siger mange tak for hjælpen - specielt for de gode præcise forklaringer :-)
Avatar billede tipsen Nybegynder
17. april 2004 - 13:58 #14
roenving: Har du evt. noget icq, yahoo eller msn - hvis man har et spørgsmål i ny og næ - eller foretrækker du, at man holder sig på eksperten?
Avatar billede roenving Novice
17. april 2004 - 14:31 #15
Ja, jeg foretrækker, at det er E* der bruges, men min mail er ikke spor hemmelig og kan findes både i min profil her og på ebruger ...

-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester