Intodeaierea fișierului de stil, design

Stylizarea fișierelor-intuiții, design

Styling file-intuitions

Buna ziua. Astăzi vreau să vă spun despre cum puteți schimba aspectul intuiției fișierelor, cum să stilizați fișierul -intrare sub designul dvs., cum să stilizați .







Destul de cuvinte cheie =). Esență Cred că înțelegi.

Faptul este că schimbarea aspectului intuițiilor nu produce, ca regulă, dificultăți, dar acest tip de intuiție diferă de celelalte. În primul rând, acest lucru este legat de securitate, al doilea este faptul că fiecare browser afișează acest element în propriul său mod și este aproape imposibil să îl influențeze.

În primul rând, să examinăm modul în care facturile de fișiere sunt afișate fără a aplica orice stiluri în diferite browsere.

Stylizarea fișierelor-intuiții, design

Stylizarea fișierelor-intuiții, design

Însă mai întâi cunoașteți problemele.
1. Prin JS nu putem simula un clic pe o astfel de intrare. Aceasta este specificația DOM despre acest lucru:

clic
Simulați un clic pe mouse. Pentru elementele INPUT, care are atributul type, are una din următoarele valori: "buton", "casetă de selectare", "radio", "resetare" sau "trimitere".
Nu există parametri
Nicio valoare de returnare
Nu există excepții

Aceasta este, folosind metoda clic, putem simula un clic pe aproape toate tipurile de intuiții, dar nu pe intuiția fișierului. Acest lucru este făcut pentru a asigura computerul clientului: în caz contrar, proprietarul site-ului ar putea obține cu ușurință orice fișiere de pe computerul clientului. Pe de altă parte, pe de altă parte, este apelată numai fereastra de selectare a fișierelor. Oricum, în centrul de dezvoltatori al firefox acest fapt este desemnat ca un bug.







Există o soluție și nu am inventat o bicicletă, am reglat-o. Toți cei care stilizează intuițiile acționează conform aceleiași scheme: o inducție cu transparență zero este creată și plasată deasupra unui buton sau a unei imagini care reprezintă un buton de selectare a fișierelor.

Principala dificultate în problema următoare.

2. Nu putem influența liber dimensiunea butoanelor "generală" pentru a se potrivi liniuței cu dimensiunea imaginii suprapuse. În firefox, nu putem schimba aspectul fișierului css cu ajutorul css (cu excepția înălțimii). Aceasta este sarcina de a determina dimensiunea optimă a imaginii suprapuse, astfel încât numărul minim de pixeli să nu fie cifrat, iar zonele goale să nu răspundă la un clic.

Să ne uităm la zonele pe care se poate face clic și dimensiunile lor în diferite browsere.

Stylizarea fișierelor-intuiții, design

Tot ceea ce se află în interiorul cursei albastre este zona pe care se poate face clic. Observ că putem crește înălțimea butoanelor, dar lățimea nu este.

Problemele sunt clare. Să mergem la afaceri.

Mai întâi, desenați un buton pentru a selecta un fișier. Asta am primit.

În condiții normale:

Acum pentru diferitele tipuri de fișiere pregătim pictogramele și le îmbinăm într-un fișier.

Pentru proiecte serioase, este mai bine să vă desenați propriile icoane. Bine, și cel mai important, există icoane gratuite pentru documente în blogul lui Pavel Markovnin. alții pot căuta în colecția noastră de icoane.

Deci, vom forma modelul de intu:

Rezultatul arată astfel:

Roșul încorporat este un blocant, fișierul este afișat cu jumătate de transparență.


Acum, când selectați un fișier (onchange eveniment), trebuie să ne taie numele fișierului din valoarea noastră INPUT-fișier pentru a determina tipul de extensie de fișier și pentru a muta fundal pentru a afișa pictograma corectă. Vă rugăm să rețineți că calea de fișier de diferite sisteme de operare poate fi printr-un slash înainte (în Mac OS, de exemplu), sau printr-o verificare (Vinduz), astfel încât, în scopul de a reduce numele de fișier pentru a lucra oriunde aveți nevoie de două expresii regulate.

Ultimele două funcții MakeActive și UnMakeActive adaugă un efect de hover la butonul nostru.

Mare, dar există încă câteva probleme. Mai întâi: în marcaj un număr mare de div, care strică semantica.
În al doilea rând: când js este dezactivat, utilizatorul nu vede care fișier este selectat. În cazul javului dezactivat, permiteți ieșirea unei intrări obișnuite a fișierelor și încărcați toate marcările necesare atunci când încărcați pagina. Să începem:

Pe pagină vom avea doar două elemente:

Următoarele fragmente de vineri vor fi un script care vă permite să adăugați mai multe intuiții de fișiere.

Dacă doriți să cititorilor, în plus față de script-ul, vom face un control special pentru programatori ASP.NET, care îl face ușor pentru a adăuga o astfel pagina INPUT stilizat.

Co-fondator Temporar. El este implicat în proiectarea interfeței, programarea clientului și a serverului în Comet Technologies.

funcția select_ext () aici codul funcției
>







Trimiteți-le prietenilor: