[HTML/JS] Knopjes

[SuperRembo]

Wat is nou de mooiste / handigste manier om een een knop te maken met een javascript actie?

Optie 1: anchor + (text / image) + href=javascript:
Een link met tekst en/of een plaatje en de js actie in href.
+ Werkt met muis en toetsen
- "javascript:" in href

HTML:

<a href="javascript:alert('KLIK!')" title="Klik!">klik!</a>
<a href="javascript:alert('KLIK!')" title="Klik!"><img src="klik.png" alt="klik!"></a>

Optie 2: anchor + (text / image) + href=# + onclick
Een link met tekst en/of een plaatje en de js actie in onclick.
+ Werkt met muis en toetsen
- "loze" href="#"

HTML:

<a href="#" onclick="alert('KLIK!')" title="Klik!">klik!</a>
<a href="#" onclick="alert('KLIK!')" title="Klik!"><img src="klik.png" alt="klik!"></a>

Optie 3: button + (text / image) + onclick
Een button met tekst en/of een plaatje. De js actie in onclick.
+ Werkt met muis en toetsen
- Als de knop in een form staat dan moet je voorkomen dat het form gesubmit wordt.
+ Practisch dezelfde html is te gebruiken als je wel een form submit wil.
- Er zit margin/padding om de knop die ik niet helemaal weg krijg.

HTML:

<button onclick="alert('KLIK!')" title="Klik!">Klik!</button>
<button onclick="alert('KLIK!')" title="Klik!"><img src="klik.png" alt="klik!"></button>

Optie 4: (span + text / image) + onclick + tabindex
Een span met tekst of een plaatje. De js actie in onclick.
- Door de tabindex="0" is de knop wel te bereiken met de toetsen, maar de onclick wordt niet uitgevoerd
met enter/spatie

HTML:

<span onclick="alert('KLIK!')" title="Klik!" tabindex="0">Klik!</span>
<img onclick="alert('KLIK!')" src="klik.png" alt="klik!" title="Klik!" tabindex="0">

[BasieP]

volgens mij zijn alle manieren die je hier opschrijf hetzelfde.
enige verschil is dat de 'container' anders is..

dus je vraag is eigenlijk wat de mooiste manier is.
ikzelf moet dan zeggen dat dit afhangt van de actie

zelf heb ik een beetje het idee dat een knop OF een post-actie OF een of andere rekenfunctie oid inhoud. Indien dat het geval is zou ik button gebruiken.
Als je slechts van pagina wil wisselen zou ik gewoon linkjes gebruiken (met of zonder plaatje)

[HyperioN]

Ik gebruik iig altijd Optie 1. Zou niet weten waarom het kwalijk is dat er "javascript:" in de href staat.

[CrashOne]

code:

<a href="gewone_link.jpg" onclick="functie();return false">Bekijk plaatje</a>

Vind ik altijd het netst, zo kunnen mensen zonder JS ook het plaatje bekijken. (Eventueel een plaatje met een goede alt en title in de a.)

[BasieP]

CrashOne schreef op maandag 05 februari 2007 @ 20:15:

code:

<a href="gewone_link.jpg" onclick="functie();return false">Bekijk plaatje</a>

Vind ik altijd het netst, zo kunnen mensen zonder JS ook het plaatje bekijken. (Eventueel een plaatje met een goede alt en title in de a.)

en hoeveel mensen zonder JS krijg jij op je site?
ik heb er in 10 jaar tijd 2 gehad..
allebij met lynx.. en deze heeft toch geen plaatjes

[CrashOne]

Als de nette manier je geen extra werk kost, waarom zou je dan voor de andere manier kiezen?
En met deze manier kan je de link ook als een normale link gebruiken, ook als je JS aan hebt.

[SuperRembo]

HyperioN. schreef op maandag 05 februari 2007 @ 20:12:
Ik gebruik iig altijd Optie 1. Zou niet weten waarom het kwalijk is dat er "javascript:" in de href staat.

In href "hoort" een link te staan, geen javascript. Ook geeft ctrl+klik (of rechts-klik open link in new window) ongewenste effecten.

Weet iemand of de margin/padding om een button echt weg te krijgen is?

[Rowanov]

Ik heb de nette optie nog niet gezien in je rijtje met keuzen, omdat ik nooit een plaatje als keuze zou overwegen.

In dit geval voegt het plaatje niets behalve een layout-technisch iets toe en is het beter om een constructie te gebruiken waar je je link met css als plaatje weergeeft.

HTML:

<!-- methode van CrashOne -->
<a href="gewone_link.jpg" onclick="functie();return false" class="actieknop"><span class="actieknophide">Bekijk plaatje</span></a>

Cascading Stylesheet:

.actieknophide {
  display: none;
}
.actieknop {
  display: block;
  width: __px;
  height: __px;
  background-image: url('klik.png');
}

Vervolgens kan je nog zo ver gaan om met een window.onload een functie uit te voeren wanneer de pagina geladen is en dan met getElementById je anchor opzoeken. Dan kan je met de DOM de eigenschap van je anchor aanpassen. Dit vereist wel dat je je anchor(s) allemaal een uniek id meegeeft.

Edit:

SuperRembo schreef op maandag 05 februari 2007 @ 20:42:
In href "hoort" een link te staan, geen javascript. Ook geeft ctrl+klik (of rechts-klik open link in new window) ongewenste effecten.

Zie alinea hier boven.

Weet iemand of de margin/padding om een button echt weg te krijgen is?

Als je een id of class aan je button meegeeft is dat vrij simpel met css op te lossen:

Cascading Stylesheet:

// in het geval van een class
input.ding {
  margin: 0;
  padding: 0;
  border: 0;
}
// in het geval van een id
input#ding {
  margin: 0;
  padding: 0;
  border: 0;
}

[ Voor 38% gewijzigd door Rowanov op 05-02-2007 21:20 ]

[SuperRembo]

Rowanov schreef op maandag 05 februari 2007 @ 21:14:
Ik heb de nette optie nog niet gezien in je rijtje met keuzen, omdat ik nooit een plaatje als keuze zou overwegen.

Dat is leuk als je een zinnig non-js alternatief hebt. In de webapps waar ik aan werk is die er in 99% van de gevallen niet.

Vervolgens kan je nog zo ver gaan om met een window.onload het specifieke anchor element op te zoeken en je functie er aan te knopen

Dat vind ik echt onnodig ingewikkeld doen.

[CrashOne]

Het is wel de meest nette oplossing.
Ik zou het alleen met een class doen, met JS deze class opzoeken, href uitlezen en aan de hand daarvan de functie maken die je er aanhangt.

[Rowanov]

SuperRembo schreef op maandag 05 februari 2007 @ 21:21:
Dat is leuk als je een zinnig non-js alternatief hebt. In de webapps waar ik aan werk is die er in 99% van de gevallen niet.

Daar komt css om de hoek kijken; css verbergt je span en geeft je anchor weer als een plaatje. Als de browser geen css ondersteunt, wat misschien denkbaar is op telefoons/pda's, dan is het juist voordelig voor de gebruiker om geen plaatje binnen te krijgen maar juist een tekstlink. Dat scheelt weer data-overdracht.

Sorry voor de onhandige edit in mijn vorige post.

[ Voor 5% gewijzigd door Rowanov op 05-02-2007 21:28 ]

[SuperRembo]

De extra margin/padding op een button krijg je dus niet weg door simpel de margin, padding en border op 0 te zetten. Dat had ik uiteraard al geprobeerd.

Cascading Stylesheet:

#foo {
    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    background: transparent;
    background: #cfc;/* debug */
}

Je ziet dat er horizontaal en verticaal extra ruimte is vergeleken met de span.

[Rowanov]

SuperRembo schreef op maandag 05 februari 2007 @ 21:34:
Je ziet dat er horizontaal en verticaal extra ruimte is vergeleken met de span.

Je behoort dan ook een span/anchor te gebruiken op die plaats, want een button is volgens mij geen inline element, maar een block-level element. Een span/anchor lost hier je probleem op.

[SuperRembo]

De buttons in mijn voorbeeldje staan gewoon in de tekst, inline dus.

Bij alleen een span mis je de ondersteuning van het toetsenbord. Bij een anchor heb je de enigszins brakke href.

[Rowanov]

SuperRembo schreef op dinsdag 06 februari 2007 @ 07:30:
De buttons in mijn voorbeeldje staan gewoon in de tekst, inline dus.

Dat wil nog niet zeggen dat het correct is. Die button hoort daar niet.

Bij alleen een span mis je de ondersteuning van het toetsenbord. Bij een anchor heb je de enigszins brakke href.

Dan neem je een anchor met daarin een span, want href is niet brak als je die onload vervangt door een zinvolle link.

[SuperRembo]

Rowanov schreef op dinsdag 06 februari 2007 @ 08:34:
[...]

Dat wil nog niet zeggen dat het correct is. Die button hoort daar niet.

Alle form controls zijn inline (ook een textarea).

[...]

Dan neem je een anchor met daarin een span, want href is niet brak als je die onload vervangt door een zinvolle link.

Er zijn veel situaties waarbij geen zinvolle link bestaat.

[Blaise]

Alle form controls zijn inline (ook een textarea).

Een button kan allebei zijn. Je mag bijvoorbeeld een div in een button plaatsen.

[daniëlpunt]

CrashOne schreef op maandag 05 februari 2007 @ 21:24:
Het is wel de meest nette oplossing.
Ik zou het alleen met een class doen, met JS deze class opzoeken, href uitlezen en aan de hand daarvan de functie maken die je er aanhangt.

Dat is erg netjes, zo doe ik het ook. Zo hou je het toegankelijk voor mensen zonder JavaScript (op mobiele apparaten bijvoorbeeld )