eleqtriq

Letztens sah ich mich bei einem Projekt unvermittelt vor der Notwendigkeit, einen Drehregeler in ein HTML Web-App Interface zu integrieren. Nachdem ich keine Librarys fand, die sich einfach so übernehmen lassen (falls jemand eine kennt, gerne einen Link als Kommentar posten), habe ich dann notgedrungen meine eigene Umsetzung gecodet, die Ihr hier herunterladen könnt.

Beispiel ansehen

Das Script setzt jQuery voraus und ist getestet in IE>=6, Fox und Webkit (Chrome/Safari). Sollte trotzdem noch irgendwo etwas klemmen nicht motzen, sondern besser machen :-). Das eingebaute base64-codierte Bild wird IE6 nicht anzeigen. ich kümmere mich zwar nicht mehr allzu sehr um den IE6, der Code funktioniert aber soweit und ich habe es dabei belassen den IE6 Usern einen farbigen Div anzuzeigen. Wenn ich etwas mehr Zeit habe, werde ich ein vollwertiges jQuery-Plugin bauen. Bis dahin könnt Ihr Euch gerne hier bedienen, die Verwendung ist frei, ohne Gewähr und Ihr dürft damit machen was Ihr wollt, außer Atomkraftwerke oder Langstreckenwaffen bauen.

Flashversion

Weil ich grade dabei war, hier auch noch die Flashversion. Ihr könnt die Source unten herunterladen, bitte denkrt dran, dass Ihr auch noch jQuery benötigt.

Code herunterladen

Recently I had to implement a dial-control into an html-app. Unexpectedly I couldn't find any library on the web, so I decided to code my own solution.

Show Example

The script needs jQuery and has been tested in IE>=6, Fox and Webkit (Chrome/Safari). If you should find something not working properly drop me a line. The image for the slider-button is a base64-Data URI and won't show up in IE6. Though I don't care that much about IE6 these days, the code will work for this browser but users will only see a colored div as slider. If I have some more time I will build a full-fledged jQuery-Plugin. In the meantime you are free to download the source from below. Usage is free, without warranty and you can use it in any way you want, as long as you do not construct nuclear power-plants or cruise-missiles from it.

Flash-version

And while I was at it, I built a Flash-version as special bonus. You can download the source below, please keep in mind that you will need jQuery as well.

Download source

Trackback

4 Responses to “Ein Javascript Drehrad (+ Flash Bonus)Javascript Dial Control (+ Flash Bonusfeature)

  1. Comment by scott 04/05/2011

    Just came across this. Thanks for posting it! Much appreciated – Scott

  2. Comment by aergistal 04/23/2011

    Thank you for the very nice control! It was used here:
    http://comsubpac.webatu.com/aob/

  3. Comment by sqlerror 07/05/2011

    Dirk, you create amazing things, very original and impressive graphics. But also very useable javascript. I came upon your dial control as I wanted a way to create a great looking “call me now” webpage. Since it orginates calls via an Asterisk PBX, It needed something like a captcha. I hate those and wanted to put a rotary dial on the form, forget the submit button and let the visitor dial a zero to confirm the call.
    Only some quirks with IE8 when nested in an iframe or called within a page that does not have a proper !doctype set. Thanks for the code, see: http://www.flextrabel.nl/draaischijf/popup.php.

    Vielen dank,

    Geert

  4. Comment by ruvan 07/14/2012

    excellent mate, the best!!