Hvordan lage et duggbart grensesnitt i CSS3 - dummies

Noen ganger må en bruker flytte skjermelementene for å gjøre dem lettere å se eller jobbe med. I CSS3 må det ikke opprettes skriftlige remer av kode i CSS3, og skape et miljø der brukeren kan flytte elementer rundt. Faktisk, alt du virkelig trenger er en enkelt metode kalt draggable ().

Følgende kode viser metoden som ble brukt til å lage et trekkbart avsnitt i dette eksemplet. (Du finner fullstendig kode for dette eksemplet i mappen Kapittel 06Interactions av den nedlastbare koden som DragContent. HTML.)

$ (funksjon () {$ ("# MoveMe"). Draggable ();});

Denne koden er interessant fordi den faktisk lager en jQuery anonym funksjon som utvider jQuery-miljøet i stedet for å jobbe med en bestemt sidefunksjon.

Fokuset på denne samtalen er et avsnitt (

tag) med et ID for MoveMe. Alt du trenger å gjøre er å få tilgang til medlemmet og ring draggable () for å få det til å bevege seg rundt. Prøv det nedlastbare eksemplet, og du finner at du kan flytte avsnittet hvor du vil ha på siden.

For å lage en flyttbar boks, er dette eksemplet avhengig av en tilpasset stil. Stilen lager en ramme, gir god plass til teksten, og setter deretter teksten både horisontalt og vertikalt. Her er stilen som brukes til dette eksempelet:

#MoveMe {border: solid; bredde: 200px; høyde: 5em; tekst-align: center; linjehøyde: 5em;}

Mange utviklere opplever problemer med vertikalt sentrering av tekst innenfor en

tag. Du kan finne en rekke måter å utføre denne oppgaven på. En av de enkleste måtene å få jobben gjort på en plattform og nettleser-konsistent måte, er imidlertid å bruke linjestørrestilen som vist i eksemplet.

Trikset er imidlertid å sette høyde- og linjehøyestilene til samme verdi - teksten vil alltid vises i midten.