Buton (computer)

De la Wikipedia, enciclopedia liberă.
Salt la navigare Salt la căutare

Obiectul buton este un obiect imbricat în obiectul Form , din definiția XML DOM. Definiția acestuia vă permite să creați multe interacțiuni cu utilizatorul pe paginile web . De exemplu, când faceți clic pe un modul (de ex. Wikipedia pentru editarea paginilor) interacționați cu operația printr-un element Buton .

Utilizare

Pentru a defini obiectul, consultați elementul de intrare , deoarece această etichetă vă permite să definiți diferite tipuri de obiecte de interacțiune cu utilizatorul în secțiunea formular .

Tipuri de butoane

Există un alt obiect care simulează un buton pe paginile web și răspunde la tipul de trimitere . principala diferență dintre cele două tipuri constă în faptul că tipul de trimitere vă permite să activați evenimentul onsubmit al formularului care îl conține, în timp ce tipul de buton vă permite să efectuați funcțiile unui buton normal din toate punctele de vedere.

Definiți un buton

Există o mică paranteză cu privire la definirea etichetei din https://www.w3.org/TR/REC-html40/interact/forms.html#edef-BUTTON . Există două moduri care sunt echivalente cu definirea aceluiași tip de obiect în HTML pentru definirea unui buton.

 < input type = "button" > </ input >
 < buton > </ buton >

Recomandare W3C HTML 4.0

Prin urmare, în definiția W3C va trebui să diferențiem cele două etichete. În primul caz, apar următoarele atribute:

  • TYPE = [buton] (în cazul în care considerăm că acest parametru va fi de tip buton)
  • NAME = CDATA (numele butonului)
  • VALUE = CDATA (valoarea butonului)
  • SIZE = CDATA (numărul sugerat de caractere pentru introducerea textului)
  • SRC = URI (sursă pentru imagine)
  • ALT = CDATA (text alternativ pentru introducerea imaginii)
  • USEMAP = URI (harta imaginii din partea clientului)
  • ALIGN = [sus | mijloc | jos | stânga | dreapta] (alinierea intrării imaginii)
  • DEZACTIVAT (element dezactivat)
  • READONLY (preveni modificările)
  • ACCEPT = ContentTypes (tipuri media pentru încărcarea fișierelor)
  • ACCESSKEY = Caracter (tastă de comandă rapidă)
  • TABINDEX = Număr (poziție în ordine de tabulare)
  • ONFOCUS = Script (element primit focalizare)
  • ONBLUR = Script (elementul a pierdut focalizarea)
  • ONSELECT = Script (textul elementului selectat)
  • ONCHANGE = Script (valoarea elementului a fost modificată)
  • atribute comune

În al doilea caz avem în schimb:

  • NAME = CDATA (cheie în formularul trimis)
  • VALUE = CDATA (valoare în formularul trimis)
  • TIP = [trimite | resetare | buton] (tipul butonului)
  • DEZACTIVAT (buton dezactivare)
  • ACCESSKEY = Caracter (tastă de comandă rapidă)
  • TABINDEX = Număr (poziție în ordine de tabulare)
  • ONFOCUS = Script (element primit focalizare)
  • ONBLUR = Script (elementul a pierdut focalizarea)
  • atribute comune

Proprietate

Proprietate Funcţie
dezactivat Activați sau dezactivați obiectul
formă Returnează un pointer la formularul de referință
ascundere Setează capacitatea de a ascunde trapa care indică focalizarea unui obiect
id Setați sau returnați ID-ul obiectului
Nume Setați sau returnați numele obiectului
tabIndex Setați sau returnați valoarea tabului obiectului
tip Setați sau returnați tipul butonului (poate fi trimis, resetat, imagine)
valoare Setați sau returnați valoarea obiectului

JavaScript și buton

La nivel JavaScript , obiectul buton are metode și proprietăți care permit o integrare foarte largă.

Metode

  • blur() : elimină focalizarea de pe obiect.
  • click() : simulează evenimentul cu clic pe mouse.
  • focus() : Obține focalizarea obiectului.

Evenimente

  • onBlur : cod pentru a rula când se pierde focalizarea.
  • onClick : cod pentru a rula când se face clic pe obiect.
  • onFocus : cod pentru a rula la focalizare.
  • onMouseDown : cod pentru a rula când se face clic pe obiect cu mouse - ul .
  • onMouseUp : cod pentru a rula când obiectul este eliberat cu mouse-ul.

Buton hamburger

Pictogramă clasică a butonului hamburger
Pictogramă clasică a butonului hamburger

Un buton hamburger , numit pentru asemănarea neintenționată cu un hamburger , este un buton plasat de obicei în colțul de sus al unui site web. Sarcina sa este de a face ca elementele de meniu ale paginii web să apară sau să dispară atunci când utilizatorul dă clic. Este utilizat în special în versiunile mobile ale paginilor web pentru a le împiedica să ocupe prea mult spațiu pe pagină, care pe astfel de dispozitive este mult mai mic decât pe computere [1] .

Critici

S-a afirmat că, deși butonul „hamburger” este acum cunoscut, funcționalitatea sa nu este întotdeauna evidentă la prima vedere; în special, utilizatorii mai în vârstă mai puțin familiarizați cu iconografia modernă pot fi confuzi [2] .

Acest buton poate crește costul interacțiunii în comparație cu un meniu tradițional, necesitând clicuri suplimentare pentru a prelua aceleași informații, deși cu avantajul unei utilizări mai reduse a ecranului chiar și în aplicațiile mobile. De asemenea, s-a susținut că designerii tind să suprasolicite aceste pictograme cu prea multe informații ascunse [2] .

Exemplu

HTML

 < nav role = "navigation" >
  < div id = "menuHamburger" >
        < input type = "checkbox" />
    
    
    
    < ul id = "menu" >
      <A href = "#"> <li> Acasă </ li> </ a>
      <A href = "#"> <li> Produse </ li> </ a>
      <A href = "#"> <li> Informații </ li> </ a>
      <A href = "#"> <li> Contacte </ li> </ a>
    </ ul >
  </ div >
</ nav >

CSS

 # menuHamburger
{
  display : bloc ;
  poziție : relativă ;
  partea de sus : 100 px ;
  stânga : 100 px ;
  indice z : 1 ;
  selectare utilizator : nici unul ;
}
# menuHamburger a
{
  decor-text : nici unul ;
  culoare : gri ;
  tranziție : culoare 0,3 s ușurință ;
}
# menuHamburger a : hover
{
  culoare : roșu ;
}
# menu Intrare hamburger
{
  display : bloc ;
  lățime : 80 px ;
  înălțime : 72 px ;
  poziție : absolută ;
  sus : -7 px ;
  stânga : -5 px ;
  cursor : pointer ;
  opacitate : 0 ;
  indice z : 2 ;
}
# menuHamburger span
{
  display : bloc ;
  lățime : 43 px ;
  înălțime : 7 px ;
  marginea-fund : 5 px ;
  poziție : relativă ;
  fundal : # f2eded ;
  raza chenarului : 3 px ;
  indice z : 1 ;
  origine transformare : 4 px 0 px ;
  tranziție : transformați 0,5 s cubic-bezier ( 0,77 , 0,2 , 0,05 , 1,0 ),
              fundal 0,5 s cubic-bezier ( 0,77 , 0,2 , 0,05 , 1,0 ),
              opacitate 0,65 s ușurință ;
}
# menu Hamburger span : primul copil
{
  origine transformare : 0 % 0 % ;
}
# menuHamburger span : nth-last-child ( 2 )
{
  origine transformare : 0 % 100 % ;
}
# menu Intrare hamburger : bifat ~ span
{
  opacitate : 1 ;
  transformare: rotate (45 grade) traduce (-2px, -1px);
  fundal : # 232323 ;
}
# menu Intrare hamburger : bifat ~ span : n-ultimul-copil ( 3 )
{
  opacitate : 0 ;
  transformare : rotiți ( 0 grade ) scara ( 0,2 , 0,2 );
}
# menu Intrare hamburger : bifat ~ span : n-ultimul-copil ( 2 )
{
  transformare : rotire ( -45deg ) traducere ( 0 , -1px );
}
# meniu
{
  poziție : absolută ;
  lățime : 500 px ;
  marja : -200 px 0 0 -60 px ;
  tapițerie : 125 px ;
  fundal : #dbdbdb ;
  list-style-type : none ;
  origine transformare : 0 % 0 % ;
  transformare : traducere ( -100 % , 0 );
  tranziție : transformați 0,5 s cubic-bezier ( 0,77 , 0,2 , 0,05 , 1,0 );
}
# meniu acolo
{
  umplutură : 20 px 0 ;
  dimensiunea fontului : 32 px ;
}
# menu Intrare hamburger : bifat ~ ul
{
  transforma : nici unul ;
}

Formatare

Plasați cursorul pe stilurile CSS

Plasați statele [3] :

 . selector {
  &: plasați, 
  &: focus,
  &: active {
  }
}

Stările de deplasare sunt, în general, reprezentate de o schimbare de culoare:

 buton {
  culoare de fundal : # 00ff00 ;
}

buton : plasați cursorul {
  culoare de fundal : # ff00ff ;
}

buton : focus {
  contur : nici unul ;
  box-shadow : 0 0 0 3 px lightskyblue ;
}

Puteți utiliza o combinație de outline , border și box-shadow, proprietăți pentru a crea stiluri de focalizare (atunci când, de exemplu, mouse-ul face clic pe buton sau atunci când utilizatorul a făcut deja clic pe el cel puțin o dată):

 buton : activ {
  culoare de fundal : # 666 ;
  chenar-culoare : # 666 ;
  culoare : # 333 ;
}

Tehnici

Exemplu de buton creat numai în CSS 3 (același rezultat poate fi obținut cu o imagine vectorială sau bitmap realizată în Inkscape , Illustrator , Gimp sau Photoshop ):

 . BUTTON_test {
   fundal : # 3D94F6 ;
   imagine de fundal : gradient liniar ( sus , # 3D94F6 , # C4CDDD );
   culoare : #FFFFFF ;
   font-family : Brush Script MT ;
   dimensiunea fontului : 40 px ;
   greutate font : 100 ;
   căptușeală : 40 px ;
   box-shadow : 1 px 1 px 20 px 0 # 000000 ;
   text-shadow : 1 px 1 px 20 px # 000000 ;
   chenar : solid # 337FED 1 px ;
   decor-text : nici unul ;
   afișaj : bloc în linie ;
   cursor : pointer ;
   text-align : centru ;
}

. BUTTON_test : plasați cursorul {
   chenar : solid # 337FED 1 px ;
   fundal : # 1E62D0 ;
   imagine de fundal : gradient liniar ( sus , # 1E62D0 , # 3D94F6 );
   raza chenarului : 20 px ;
   decor-text : nici unul ;
}
Rezultat
Rezultat

Exemple

Notă

  1. ^ (RO) Anna Fitzgerald, Ce este un buton Hamburger - și cum funcționează? , pe blog.hubspot.com . Adus la 17 februarie 2021 .
  2. ^ A b (EN) Loving & Hating the Hamburger Icon on Webdesigner Depot, 17 septembrie 2018. Accesat la 23 februarie 2019.
  3. ^ (RO) Stilul se deplasează, se focalizează și stările active diferit | Zell Liew , la zellwk.com . Adus la 10 februarie 2021 .
Informatică Portal IT : accesați intrările Wikipedia care se ocupă cu IT