Share
I mange moderne webapplikasjoner ser utviklere etter måter å gjøre det enklere og mer intuitivt for brukerne å samhandle. En dra og velg funksjon kan hjelpe brukerne til å velge flere objekter raskt.
Vi må først lage gruppen av objekter som skal velges. Mer sannsynlig enn ikke, folk flest vil bruke server side script som C # eller PHP. Siden det er utenfor omfanget av denne opplæringen, vil jeg isteden opprette dem for hånd. Vi kan bruke de fleste tagger som objekter. Det eneste kravet er at objektet må ha grunnleggende mushendelser som er tildelt dem. For denne opplæringen vil jeg bare bruke et bord med to rader og fem celler fylt med DIV med noen grunnleggende CSS for å gi dem form.
Den viktigste delen i å skape objekter er ID-en; de må alle ha et lignende navn. Mine vil være 'boks' - og deretter et unikt nummer etter navnet. Følgelig vil vårt første elements ID være 'box1' og vår siste vil være 'box10'. Nå trenger vi bare å legge til musen hendelser. For hver DIV må vi tildele sin "onmousedown" til vår javascript-funksjon og passere i objektet som ringer funksjonen med "dette" søkeordet
Nå som vi har vår grunnleggende HTML gjort, må vi skrive javascript. Det er tre primære deler til javascript-funksjonen: Handlingen som skjer hver gang du velger eller fjerner et objekt, begynner handlingen som starter dra etter første klikk, og handlingen som stopper drakvelgeren. Før noe av det vi trenger å lage en javascript-funksjon og passere i en variabel kalt 'obj', blir dette objektet som kalles denne hendelsen.
funksjon StartDragSelect (obj)
For handlingen som utløser etter at et objekt er valgt eller avvelget, trenger vi først en måte for vår funksjon å vite om dette objektet er valgt eller av valgt. Du kan bruke de fleste attributter for å gjøre dette, men jeg finner den beste måten er med en CSS-klasse. Ikke bare vil CSS-klassen fortelle javascript hvis objektet er valgt eller ikke, men du kan også legge til CSS-regler til den valgte klassen slik at brukerne vil kunne visualisere hvilke objekter som er valgt. For javascript er alt vi trenger, en enkel if -else uttalelse. For denne demonstrasjonen skal jeg oppdatere et spann med det totale antallet utvalgte objekter, men du kan også ringe ajax-funksjoner og andre morsomme ting her for å gjøre draget velgere kraftigere.
Accentsconagua
funksjon StartDragSelect (obj) if (obj.className == "selected") obj.className = ""; selectNum--; else obj.className = "selected"; selectNum ++; document.getElementById ("selectCount"). innerHTML = selectNum; For å starte dravel velger, vil vi bruke en "for loop" for å ta hvert objekts onmousedown-hendelse og tildele det til objektets onmouseover-arrangement. Hvis vi brukte et server sideskript for å generere våre objekter, vil vi også sende det totale antall objekter til javascript-funksjonen, slik at sløyfen vil fungere, men siden vi opprettet dem for hånd, kan vi hardt kode nummeret.
for (i = 0; i<11;i++) document.getElementById(i+'d').onmouseover = document.getElementById(i+'d').onmousedown
Stopp-handlingen vil bli tildelt til onmouseup-hendelsen for objektet som startet dravelgeren. For å gjøre dette bruker vi en anonym funksjon for å fortelle javascript hva som skal gjøres når onmouseup-hendelsen utløser. Deretter bruker vi en "for loop" for å overføre onmouseup-hendelsen og gjøre onmouseover-arrangementet null.
obj.onmouseup = funksjon () for (i = 1; i<11;i++) document.getElementById(i+'d').onmousedown = document.getElementById(i+'d').onmouseover; document.getElementById(i+'d').onmouseover = null;
Du er ferdig! Selvfølgelig er dette eksemplet trivielt og bruker innebygd Javascript (for enkelhets skyld). Men jeg er sikker på at du kan forestille deg mulighetene! Ha en bedre måte?
