MooTools Slider med to knapper (Double Pinned Slider) med Range Indikator
Du kigger i øjeblikket kommentarer. Hvis du ønsker at vende tilbage til den fulde historie, kan du læse den fulde post her: " Mootools skyder med to knapper (Double Pinned Slider) med Range Indikator ".
11 December 2008 kl 10:59
Meget cool! Jeg har ledt efter noget som dette. Er det muligt at have en fast tagrende baggrundsbillede, klip i stedet for at bevæge sig fra venstre mod højre? Jeg forsøger at arbejde på det nu, og har hidtil været forgæves.
12 Dec 2008 kl 3:45 am
Det er rart tanke! Tak! Aldrig tænkt over det. Jeg vil prøve det også!
12 Dec 2008 kl 5:12 am
Hey Wanlee!
Jeg tror, jeg måske har fået (eller jeg atleast tæt på) den løsning, du ledte efter. Jeg har ændret Look (gjorde det med et spektrum gradient, snarere på, at én farve) af bkg_slider.gif, så bare sørg for, at billedet faktisk er at blive klippet. Dette billede, som var ældre baggrundsbilledet for skyderen interval indikatoren division, er nu placeret i HTML, absolutly placeret med skyderen containeren.
Jeg har sendt min arbejdstid filer af denne version her ...
Koden / CSS af den tidligere version er lige kommentere, for brugerne at være i stand til at gøre ud af forskellen.
Desuden har jeg efterladt en rød kant af billedet så godt ... som du kan fjerne!
Håber det hjælper!
12 Dec 2008 kl 5:31 am
Bare en PRO og CON af den version suggessted ved Wanlee ...
PRO: Nu kan du variere Billede, der kan indikere vifte med sin farve også ... Hvad jeg mener er for f.eks. kunne du have et billede med grøn, orange og røde ar, så valgte område vil indiate karakteren af det markerede område.
CON: Glideren billede er vist med sin fulde bredde, indtil fuldstændig Script indlæses og køres
12 Dec 2008 kl 17:32
ah ja ... fantastisk! meget cool, Nikhil! Jeg fik faktisk en fungerende version så godt, men jeg tror, din kan være en smule mere effektiv.
Her er en anden antyder: Er det muligt at få knapper Butt-op mod hinanden i stedet for at krydse?
Fremragende arbejde, Nikhil! Kudos fra rejsende!
16 December 2008 kl 2:09 am
Lykkedes at fiksere cross-over af de to knapper ... opdateret filen, følg linket i min kommentar ovenfor.
18 december 2008 kl 10:47
hey Nikhil! Flot arbejde igen! Jeg lagde mærke til, at minKnob stadig krydser over, men kun på den første træk. efter træk er initialiseret vi alle godt! gælder det samme ske for dig?
19 December 2008 kl 09:48
Hej Wanlee!
Der er spørgsmålet i den version, som De nævnte, om det første billede af min knappen. Jeg synes at vide, hvor problemet ligger, men havn't været i stand til fix siden i går ... håber at knække det snart.
Tak Tons for at pege på problemet ud!
Nik
19 December 2008 kl 11:37
Hey Wanlee!
Arbejde tidligt om morgenen på disse spørgsmål virkelig virker ... formået at løse problemet (af Min Knob krydse over Max Knob, første gang) i morges ... Jeg har allerede uploadet faste slider.js scriptet som version 2,1
Igen! Tak for din hjælp er at spotte og foreslå ændringer.
Nik
11 januar, 2009 kl 20:27
Hey Nik! Har prøvet din skyder, og det virker fantastisk, men kontrollere dette ud:
Jeg prøvede at sætte "start" param til 5 og 'ende' PARAM ændres til 15, og det gør klipning vakkelvorn. Også begge skydere ender med samme værdi. Her er noget, der ville være cool: i stedet for skyderne butting op sammen, har max skyderen stop ved næste nummer større end min skyderen.
Desuden, hvordan kan jeg tænder knækker på?
14 januar 2009 kl 21:40
Hey Wanlee!
Tak som sædvanligt. Du gør test arbejde, at jeg skulle have. Virkelig appretiate det.
Haft travlt og vil være et par dage, med et projekt. Vil vende tilbage til dette så hurtigt som muligt.
Tak igen
Nik
4 februar 2009 kl 01:42
Hej Nikhil, kan du fortælle mig, hvilken linje der er fastsættelse af cross-over af de to knapper eller måske hvilke linjer der gør det.
6 Februar 2009 kl 11:42
Disclaimer: Jeg er ikke ekspert på Mootools udvikling endnu, så desværre jeg vil være en af de fyre, der kommer til at stille forslag, kan han ikke helt gennemføre selv. Husk på det er ikke engang en "feature request", fordi jeg ikke forventer nogen at gøre det for mig. Jeg vil blot dokumentere, at der er interesse for yderligere tilføjelser.
Jeg vil bruge denne dobbelte skyder for at vælge en række tid.
Den første ekstra feature jeg ville elske at have, er at støde skyderne i 15 minutter "trin". I stedet for at være i stand til at glide gennem 1, 2, 3, ..., 14, 15 jeg ønsker at gå 0, 15, 30, 45, 60, ..., osv. Er der en måde at få mærket til fastgøres til disse trin? (Jeg er klar over jeg kunne bruge en multiplikator på output værdien af skalaen har knopper, men en enkelt pixel per "skridt" er for finkornet. Jeg vil store flotte 10 pixel "hopper" mellem hvert trin på skalaen.)
For det andet, ville jeg elske at være i stand til at trække området i sig selv. Hold afstanden mellem knapperne det samme, men tag fat i "midterste del", og skub det frem og tilbage langs skalaen. Dette er sandsynligvis en meget vanskeligere at opnå, men manden ville jeg være begejstret for at have denne.
Anyway, tak for den fantastiske implementeringen du allerede!
8 februar, 2009 kl 6:07 am
Hey Mauricio,
Im kontrol overlapning maily i CheckStep funktion Silder klasse (det skal omkring linie 174)
Grænsen for Minimum Knob er sat i "this.drag.options.limit" og tilsvarende grænsen for Max knappen i "this.maxdrag.options.limit" ....
Også, jeg havde et problem med overlaping stadig sker første gang (dvs. indtil CheckStep funktion kaldes atleast en gang.), Så jeg var nødt til at gøre det tilføje en kontrol for at se, om skyderen bliver initialied, og gør følgende i "SetMax"-funktionen (arounf linje 138 i silder.js)
-------
if (this.options.isinit) {
var lim = {}; var mi, mx;
mi = - this.options.offset;
mx = parseInt (this.maxknob.getStyle ('venstre')) - this.options.offset-4;
lim [this.z] = [mi, mx];
this.drag.options.limit = lim;
this.options.isinit = false;
}
---------
12 februar 2009 kl 5:13 am
Fantastisk job Nikhil! Jeg elsker det.
For de har problemer med den nyeste Mootools version, kan du ændre javascript (i HTML-side i demo) som følger:
Du skal hente begge Mootools versioner (kerne og mere).
/ / ON LOAD
window.addEvent ('domready', function () {
var mySlideA = ny Slider ($ ('slider_minmax_gutter_m'), $ ('slider_minmax_minKnobA'), $ ('slider_bkg_img'), {
start: 1920, slut: 2020, offset: 10, knobheight: 20,
onChange: funktion (POS) {$ ('slider_minmax_min') set ('tekst', 'min' + pos.minpos), $ ('slider_minmax_max') set ('tekst', 'Max' + pos.maxpos).. ;}
..}, $ ('Slider_minmax_maxKnobA')) setMin (1981) setMax (2002);
var mySlideB = ny Slider ($ ('slider_gutter_1'), $ ('slider_knob_1'), $ ('slider_bkg_img_1'), {
start: 0,
ende: 120,
offset: 10,
onChange: funktion (POS) {
$ ('Slider_current_val') set ('tekst', pos + 'for inches').
}
.}, Null) setMin (100);
$ ('Slider_current_val') set ('tekst', 100 + forb. inches ').
});
12 februar 2009 kl 01:29
[...] Jeg endelig ændret mit søgeord til "skyderen med to knapper" og jeg fandt "Mootools skyderen med to knapper" er skrevet af Nikhil D. customers, der ejer en blog ved navn "at udtrykke det". Dette [...]
14 februar 2009 kl 6:29 am
Brian,
, Så får prioritet.
Undskyld! burde have svaret tidligere. Jeg m allerede arbejder på Frist Extra (snap funktion) ... været involveret med nogle brød og smør projekt
Vil arbejde på dette, så snart, jeg får nogen lidt tid ...
Også Im stadig ikke klart, om dit andet Extra! ...
14 februar 2009 kl 23:03
Brian,
Jeg må sige, denne ene (slæden skridt synes at være et skønt møtrik, selvom jeg har set andre skydere, der har denne funktion). Jeg sad med denne sidste aften, og endte med at trække mit hår over det hele natten. Logikken synes let nok, og formåede at inkludere det ganske nemt. Men visuelt, det ser ud til at udfordre og jeg syntes at svigte dårligt endnu.
Nå! Jeg tænkte, jeg ville hjælpe, hvis jeg offentliggøre mine WIP filer, måske har du (og andre) kan ordne det ... Jeg slags synes tabt ... Jeg vil se på det igen snart ... men i mellemtiden, her er mit arbejde version,
Hent Mootools Slider med Slide Steps skyderen
oh! glemte at nævne spørgsmålet ...
Skyderen synes ikke at bevæge indtil enden af skyderen .... forsøge at flytte den til sin maksimale værdi ....
17 Feb 2009 kl 3:23 am
[...] De fleste af CSS forfattere enige om, at CSS Clip ejendom er nok en af de fleste ikke-anvendte CSS egenskaber. Det var så sandt for mig og var mest glad for at forsømme det, indtil jeg begyndte at ændre den Mootools TO Knob (Pin) Slider Komponent (med Range indikator). [...]
17 Feb 2009 kl 5:36 am
[...] Han har besluttet at oprette sin egen Mootools skyder med to knapper (Double Pinned Slider) med Range Indikator. Du kan nemt ændre udseendet og fornemmelsen af området indikatoren, skyder knop, skyderen sporet ved [...]
17 Feb 2009 kl 12:48
[...] Han har besluttet at oprette sin egen Mootools skyder med to knapper (Double Pinned Slider) med Range Indikator. Du kan nemt ændre udseendet og fornemmelsen af området indikatoren, skyder knop, skyderen sporet ved [...]
17 Feb 2009 kl 21:40
Brian,
Undskyld! Jeg har nævnt .. at forandring for Slide Steps er inkluderet i den version, 2,20 (desværre stadig er i sin WIP tilstand, har det været meget svært at holde versioner) ... så du kan verywell downloade den nye (2,2) version i stedet for WIP version, jeg har givet ovenstående ...
Thanx
Nik
22 februar 2009 kl 03:13
[...] RSS feed for opdateringer om dette topic.Powered af WP Greet BOXA virkelig handly og smuk skyderen af Nikhil, mens han var på udkig efter en dobbelt pinned skyder. Selvom han fandt et par veludført dobbelt [...]
8 Marts 2009 kl 15:01
[...] MooTools Slider med to knapper Dette er den MooTools Slider med to knapper (dvs. en dobbelt-pinned skyder), med rækkevidde indikator. Se demoen her. [...]
8 Marts 2009 kl 11:31
[...] MooTools Slider med to knapper Dette er den MooTools Slider med to knapper (dvs. en dobbelt-pinned skyder), med rækkevidde indikator. Se demoen her. [...]
9 marts 2009 kl 1:56 am
[...] MooTools Slider med to knapper Dette er den MooTools Slider med to knapper (dvs. en dobbelt-pinned skyder), med rækkevidde indikator. Se demoen her. [...]
9 marts 2009 kl 1:57 am
[...] MooTools Slider med to knapper Dette er den MooTools Slider med to knapper (dvs. en dobbelt-pinned skyder), med rækkevidde indikator. Se demoen her. [...]
9 marts 2009 kl 7:02 am
[...] MooTools Slider med to knapper Dette er den MooTools Slider med to knapper (dvs. en dobbelt-pinned skyder), med rækkevidde indikator. Se demoen her. [...]
9 marts 2009 kl 10:57
[...] MooTools Slider med to knapper Dette er den MooTools Slider med to knapper (dvs. en dobbelt-pinned skyder), med rækkevidde indikator. Se demoen her. [...]
9 marts 2009 kl 02:32
[...] MooTools Slider med to knapper Dette er den MooTools Slider med to knapper (dvs. en dobbelt-pinned skyder), med rækkevidde indikator. Se demoen her. [...]
17 marts 2009 kl 6:56 am
[...] MooTools Slider med to knapper Dette er den MooTools Slider med to knapper (dvs. en dobbelt-pinned skyder), med rækkevidde indikator. Se demoen her. [...]
26 marts 2009 kl 12:38
[...] MooTools Slider med to knapper [...]
28 marts 2009 kl 3:41 am
Hej mand,
God side og store arbejde ... Jeg tror, jeg vil bruge det til en personalisering af mit moogenda ( http://www.moonkiki.com/moongenda/moogenda.html ) ..
Jeg vil tilføje det i en form, hvor du indstille tiden ellapsed i et møde ... men først jeg har et spørgsmål
Det er muligt at indstille den genstand, der har decimaltal
noget
8
8,5
9
9,5
10
10,5
og så videre?
thx
Nunzio
31 Mar 2009 kl 01:25
Hey Nunzio,
Skyderen komponent i sig selv kan ikke behandle decimaler slide skridt ... men for dine krav, er alt hvad du behøver for at vise decimalværdier (og behandle det som nødvendigt senere) ... så hvad du kan gøre er som følger ...
var mySlideC = ny Slider ($ ('slider_gutter_C'), $ ('slider_knob_C'), $ ('slider_bkg_img_C'), {
start: 1,
ende: 100,
offset: 0,
snap: sandt,
numsteps: 100,
onChange: funktion (POS) {
$ ('Slider_current_val_2') setHTML (POS / 2 + 'for inches').
}
.}, Null) setMin (5);
BEMÆRK: Hvis du ønsker at vise skyderen for en række 1-50 med halve værdier som (1,5, 2, 2,5, 3 og så videre) kan du indstille intervallet for 1-100, der numsteps til 100, og vise det i fraktion som $ ('slider_current_val_2') setHTML (POS / 2 + 'for inches').
Håber det hjælper!
31 Mar 2009 kl 01:32
Hej Nik,
du re godt .. i aften vil jeg prøve, og jeg vil vise dig, hvad jeg vil gøre
Tak igen
Nunzio
31 Mar 2009 kl 01:36
31 Mar 2009 kl 01:37
forrige indlæg var det en klippe og klistre fejl
det er rigtigt
http://moonkiki.blogspot.com/2009/03/knob-in-moogenda.html
31 Mar 2009 kl 15:30
Hey Nunzio,
Thats en ære! Tak Tons!
bedste ønsker, N
3 april 2009 kl 4:00 am
Hej,
Jeg ville ønske jeg gjorde noget glæde for alle jeres læseren med dette indlæg
http://moonkiki.blogspot.com/2009/04/gift-knob-zone-for-knob-on.html~~V
6 april 2009 kl 02:10
MoonKiki,
Der er nyttig. Atleast vil der være en virkelige liv eksempel på folk til at kigge på. Jeg har brugt denne Mootools Range skyderen i to af mine projektarbejder ... desværre er de stadig under UAT!
Tak igen
N
10 April 2009 kl 19:36
du har ret, bare en uge eller to til videoen
12 April 2009 kl 13:04
[...] MooTools Slider med to knapper Dette er den MooTools Slider med to knapper (dvs. en dobbelt-pinned skyder), med rækkevidde indikator. Se demoen her. [...]
13 April 2009 kl 13:56
Hej,
Jeg har nogle betænkeligheder ved hjælp af dobbelt pinned skyderen. Jeg ønsker at sende de oplysninger, jeg har valgt i skyderen for at sende til en JSP side, og jeg ved ikke hvordan man gør det. Jeg vil gerne have en fuction at få min og max værdier ud af javascript, kan du hjælpe mig?
Tak!
14 April 2009 kl 23:39
Hej Nikhil,
Tak for denne store skyder. Jeg bruger den første skyderen af de tre, og kan tilsyneladende ikke finde ud af, hvordan man gennemfører, at det går op i skridt som den tredje. Kan du fortælle mig hvad jeg har brug for at redigere for at øge den glidende med 10.
Tak
15 April 2009 kl 18:18
Jeg kan godt lide dit script.
tak
7 maj 2009 kl 01:24
Hej Nikhil,
Første off: great gennemførelse af MooTools Slider klassen! Dette er uden sammenligning den bedste version af det derude. Jeg tror også det er den eneste, der tilbyder muligheden af to knapper i stedet for kun én, og selv stopper dem i at passere hinanden!
Jeg har et problem, men, selv om ingen af de eksempler, vise det, jeg så i JS fil, som »vertikale« tilstand fra den oprindelige Slider klassen er stadig derinde, og jeg har brug for en lodret skyder med to knopper ... så jeg satte indstillingen 'tilstand' til 'vertikal'. Nogle CSS justeringer måtte gøres, men det var ikke så skræmmende en opgave. Problemet er, at knapperne ikke vil opføre sig ordentligt mere - en af dem 'hop' for at placere -2, når jeg forsøger at trække den et andet sted, den anden dias okay, men vil ikke passere en bestemt position på skyderen.
Da jeg ikke er sikker på, hvad der præcist er galt, jeg troede måske du bare ikke havde medtaget dit lokalnummer i klassen til at fungere i en lodret skyder? Jeg har prøvet at ændre klassen her og der, men til ingen nytte. Eller hvis du gjorde gør dette, er det muligt, at du kunne omfatte et eksempel på, hvordan man kan gøre vertikale dobbelt-knappen skyder fungere korrekt? Jeg ville sætte stor pris på det!
Så hvis du vil være villig til at se nærmere på dette, tak på forhånd for din indsats!
Cheers,
Xurk
19 Juni 2009 kl 05:06
Jeg har to input felter med lastrum skyderen værdier, kan brugeren ændre værdier i input, og jeg ønsker at opdatere knapper position. Jeg skrev funktion for denne.
Dette er mit forslag:
moveToStep: funktion (trin, max) {
if ((trin> = this.options.start) && (trin this.step) {
this.maxstep = trin;
this.maxknob.setStyle ("venstre", parseInt (this.toPosition (trin)));
}
} Else {
/ / MIN
Hvis (trin <this.maxstep) {
this.step = trin;
this.knob.setStyle ("venstre", parseInt (this.toPosition (trin)));
}
}
this.checkStep (1);
this.end ();
}
}
Jeg har writen det et minut siden, så det kan have fejl
20 juni 2009 kl 11:18
[...] MooTools Slider med to knapper Dette er den MooTools Slider med to knapper (dvs. en dobbelt-pinned skyder), med rækkevidde indikator. Se demoen her. [...]
26 juni, 2009 kl 14:12
Hej der
Fantastisk arbejde! Virkelig nyttig ting!
Jeg ville bare at nævne et par af problemer og løsninger:
1. "Snap" kun arbejder for min skyderen, ikke max en. Tilføjelse:
if (maxknob! = null) {
this.maxdrag.options.grid = (this.full) / this.options.numsteps;
this.maxdrag.options.limit [this.z] [1] = this.full;
}
inde i ", hvis (this.options.snap)" synes at løse dette.
Imidlertid, så er der flere problemer:
2. Den maksimale skyderen gør bevæger sig i trin, men i nogle tilfælde den stopper et skridt før udgangen, har at gøre med, hvordan MX grænse for maxdrag er beregnet i checkStep funktionen.
Nu er dette ikke en meget avanceret løsning, og fungerer muligvis ikke i alle tilfælde, men jeg fandt, at forandring:
mx = this.max - this.options.offset;
til
mx = this.max - this.options.offset + 0,1;
gør problemet går væk i alle de forskellige min / max og trin kombinationer jeg prøvet.
Måske hvis du ikke har brug for grænser for at ændre dynamisk som i mit tilfælde vil du ikke have dette problem, men hvis du gør, kan det gøre det for dig.
Nu kan jeg gå videre og gøre min asos.com som dobbelt skyderen pris filter!
Tak Nikhil!
9 Juli 2009 kl 06:06
[...] MooTools Slider med to knapper Dette er den MooTools Slider med to knapper (dvs. en dobbelt-pinned skyder), med rækkevidde indikator. Se demoen her. [...]