Thursday, 28 January 2010

Slider-kontroll på web


Jeg har testet ut Scriptaculous, som er et javascript bibliotek myntet på gui og effekter i gui. Det har blant annet en slider kontroll, som jeg har laget et testprosjekt for. Slideren ser meget elegant ut og er vel så god som den som
Silverlight kan tilby. Best av alt er at man har tilgang til HTML DOM-treet og lett kan lese ut og sette verdier til Slideren.

For å laste ned testprosjektet, last ned her [ZIP-fil,101kB].

Start prosjektet på følgende måte:
* Pakk ut Zip-filen TestSliderScriptaculous.zip i en midlertidig mappe.
* Åpne denne mappen og dobbeltklikk på .sln filen.
* Når Visual Studio er lastet (Jeg har anvendt Visual Web Developer 2008 Express):
* Trykk på F5 for å snurre film.
* Standard nettleser skal så åpne og man presenteres siden Default.aspx hvor jeg har
implementert testprosjektet.

Øverst i denne artikkelen ser du et skjermbilde hvordan slideren ser ut. Like elegant som den du ser i Mac OS X, eller hva? Slideren er selvsagt interaktiv. Klikk og dra på slider handelen (håndtaket) og slipp for å sette en verdi for slideren. For dette testprosjektet har jeg satt 0 og 100 som verdiintervallet og alle titallsverdier som diskrete verdier. Hvis man ikke setter noen verdier her vil man med slideren spesifisere en verdi mellom 0 og 1 som et flyttall.

Dette er en meget kraftig måte å presentere en slider på i web. Man benytte denne kontrollen i for eksempel en Ajax-aktivert Web 2.0. applikasjon, for eksempel for å sette en tallverdi, e.g. 0 til 100 prosent gjennomsiktighet i en bilde-applikasjon eller parametere inn til et filter i en bilde-applikasjon.

Script.aculo.us inneholder nok mange andre godbiter, jeg har ikke fått testet ut rammeverket noe mye enda. Sliderkontrollen var meget lett å få til å virke, det tok meg kun 2-3 timer å få ferdigstilt testprosjektet. Om noen kjenner andre gode demoer av Script.aculo.us, si i fra. Litt kjapt nettsøk viser at det er tonnevis av demoer der ute.

Dette testprosjektet inneholder Script.aculo.us i Script mappen, som er rett og slett noen få .js filer.

Script.aculo.us nettside (inkluderer nedlasting):

Share this article on LinkedIn.

1 comment:

  1. Script.aculo.us er laget av Thomas Fuchs,
    sjekk http://script.aculo.us/

    ReplyDelete