Avatar billede unomas Nybegynder
03. oktober 2005 - 01:14 Der er 5 kommentarer

Skalaknap i form-tag

Er der nogen der kan fortælle mig hvordan jeg kan lave en skalaknap som jeg kan indsætte i et form-tag..?
I ved, sådan en hvor man kan trykke op og ned og som så ændre en talværdi...

Eks.
http://office.microsoft.com/da-dk/assistance/HP051900161030.aspx
Avatar billede olebole Juniormester
03. oktober 2005 - 16:39 #1
<ole>

Det er ActiveX-kontroller, der ikke er beregnet til brug på WWW:

"Bemærk!  Kontrolelementerne i Kontrolelementer virker ikke i mange browsere (browser: Software, der fortolker HTML-filer, formaterer dem til websider og viser dem. En webbrowser som f.eks. Microsoft Internet Explorer kan følge hyperlinks, overføre filer og afspille lyd- eller videofiler, der er indlejret på websider.), og det anbefales derfor, at du bruger dem til formularer, der skal udfyldes i Microsoft Word, og ikke til webformularer."

/mvh
</bole>
Avatar billede unomas Nybegynder
03. oktober 2005 - 16:43 #2
Ja det eks. jeg kom med er et ActiveX element men det var også bare et eks. på hvordan den skal se ud...
Jeg er meget sikker på at jeg har set det på div. hjemmesider, men det kan være jeg tager fejl :-(
Avatar billede olebole Juniormester
03. oktober 2005 - 18:30 #3
En 'spinner', som kontrollen kaldes, findes ikke i HTML. Skal du bruge sådan én, må du selv bygge den fra scratch i DHTML (HTML, CSS, DOM og JS).
Avatar billede olebole Juniormester
03. oktober 2005 - 18:50 #4
Du kan sådan set godt implementere spinner-kontrollen, men da events ikke bobler op fra kontrollen, har du ikke rigtig noget at bruge den til. F.eks:

<input id="spinnerText" type="text" onclick="this.value=document.getElementById('spinner').value" style="vertical-align:middle">
<object id="spinner" width="50" height="22" style="vertical-align:middle"
    classid="CLSID:026371C0-1B7C-11CF-9D53-00AA003C9CB6">
</object>

Prøv skiftevist at bruge spinner-kontrollen - og klik i tekst-feltet. Men som sagt, kan du ikke aftaste klik i spinneren, selv  :o|
Avatar billede olebole Juniormester
03. oktober 2005 - 20:26 #5
- men du kan lave noget à la:

<style type="text/css">
.spinCont {
    position: relative;
    height: 30px;
}
.spinCont .spinner {
    position: absolute;
    width: 16px;
    height: 28px;
    left: 0;
    top: 0;
    border: 1px solid black;
    background-color: buttonshadow;
    float: right;
}
.spinner button {
    width: 100%;
    height: 50%;
    font: 10px marlett;
    display: block;
}
.spinCont input {
    position: absolute;
    width: 30px;
    left: 18px;
    top: 0;
}
</style>
<script type="text/JavaScript">
var spinTimer = null;
var minVal = 0;
var maxVal = 100;
var initDelay = 1000;
var fastDelay = 100;
function autoSpin(btn, incr) {
    spinTimer = setInterval(function(){mySpin(btn, incr)}, fastDelay);
}
function mySpin(btn, incr) {
    var val, txt = btn.parentNode.parentNode.getElementsByTagName("input")[0];
    val = parseInt(txt.value);
    if (typeof incr=="undefined") incr = (btn.id.indexOf("Up")!=-1)? 1 : -1;
    txt.value = (val+incr<minVal)? minVal : (val+incr>maxVal)? maxVal : val+incr;
    if (!spinTimer) spinTimer = setTimeout(function(){autoSpin(btn, incr)}, initDelay);
}
function stopSpin() {
    clearTimeout(spinTimer);
    clearInterval(spinTimer);
    spinTimer = null;
}
</script>

<div class="spinCont">
    <input type="text" value="0">
    <div class="spinner">
        <button id="spinnerUp" onmousedown="mySpin(this)" onmouseup="stopSpin()">t</button>
        <button id="spinnerDown" onmousedown="mySpin(this)" onmouseup="stopSpin()">u</button>
    </div>
</div>

- fonten 'marlett' er dog ikke anvendelig i FF, hvorfor du nok bør lave to små gif-pile til knapperne ... og måske bruge nogle helt andre knapper. Princippet fungerer i hvert fald  :)
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