DIY #1: Selektor plików i jego CSS | DailyWeb.pl

DIY #1: Selektor plików i jego CSS

Opublikowano 3 lata temu - 12


Sebastian uwielbia strzelać do Was odjechanymi gotowymi skryptami, efektami CSS itp. Dla równowagi postanowiłem pokazać Wam jak samodzielnie, często w prosty sposób przygotować różne efekty na swoich stronach internetowych - w końcu łatwiej pracować z własnym kodem.

Niedawno mój znajomy stwierdził, że by stworzyć ciekawe efekty na stronach internetowych i uzyskać pożądany efekt we wszystkich przeglądarkach, koder musi oszukać oko użytkownika. W pewnym stopniu muszę się z nim zgodzić - często zamiast korzystać z natywnych atrybutów HTML i CSS, musimy wspomagać się swego rodzaju "hackami webdevowymi".

Jednym z często występujących problemów związanych z wyglądem naszych stron jest styl formularzy. Konia z rzędem temu, kto potrafi przygotować spójne, ciekawie wyglądające kontrolki formularzy przy pomocy wyłącznie CSS. Wszystko przez to, że każda przeglądarka oferuje własny domyślny styl pól, a co więcej - niektórych z nich nie sposób zmienić z poziomu kaskadowych arkuszy stylów. Polem, którego nie sposób modyfikować w ten sposób jest pole wyboru pliku. Musimy sobie jakoś z tym poradzić.

Wymyślamy hack

Zabawę z własnym selektorem plików zaczynamy od opracowania strategii, która pozwoli nam ominąć ograniczenia narzucane przez przeglądarki. Pierwszym jak na mój gust dosyć intuicyjnym wyborem jest jQuery. Oczywiście można szukać gotowego pluginu, który sprawi, że nasza kontrolka będzie całkiem nieźle wyglądać, ale w naszym dzisiejszym DIY postaramy się o jak największą swobodę rozwiązania.

Sztuczka, którą chciałbym Wam pokazać polega na stworzeniu "atrapy" naszej kontrolki, ukryciu tej prawdziwej i połączeniu ich ze sobą by mogły się komunikować. Sztuczne pole wyboru plików docelowo będzie mogło zostać "ostylowane" w dowolny sposób. By hack był możliwie przejrzysty dla nowicjuszy jQuery przygotujemy go jako luźny skrypt zamiast jako plugin jQuery.

Kodujemy

Nasz skrypt ma być uniwersalny. Bez względu na to ile kontrolek znajdzie się na stronie i gdzie będą one umieszczone, chcemy by były one obrabiane przez jQuery. Dlatego też potrzebujemy pętli, która przejdzie po wszystkich interesujących nas elementach. W tym celu wykorzystamy metodę .each() używanej przez nas biblioteki biblioteki. Oczywiście wszystko zamykamy w funckji .ready() by skrypt uruchomił się po załadowaniu wszystkich elementów na stronie.

$(document).ready(function() {
   $('input[type=file]').each(function() {
      // Tutaj znajdą się wszystkie polecenia
   });
})

Zanim przejdziemy do kolejnego etapu, musimy zaplanować z jakich elementów będzie składać się nasza sztuczna kontrolka. Na potrzeby tego wpisu z pewnością wystarczy prosta atrapa składająca się z przycisku (element button) i etykiety (element label) wyświetlającej nazwę przesyłanego pliku. By nic się nie rozjeżdżało, umieścimy całość w dodatkowym kontenerze (element div).

atrapa

By przygotować "wydmuszkę" musimy przygotować wszystkie elementy i ich zależności na poziomie JavaScript. Gdy już to zrobimy, możemy wstawić ją zaraz za prawdziwym polem wyboru plików. Przy użyciu jQuery może to wyglądac np. tak:

$(document).ready(function() {
   $('input[type=file]').each(function() {

      var inputFile = $(this); // tworzymy odwołanie do prawdziwej kontrolki

      container = $(document.createElement('div')); // tworzymy kontener
      container.addClass('file-container'); // nadajemy klasę kontenerowi by móc się odwołać do niego w CSS

      var label = $(document.createElement('label')); // tworzymy etykietę
      label.html('Nie wybrano pliku');

      var button = $(document.createElement('button')); // tworzymy przycisk
      button.html('Przeglądaj...');
      button.attr('type', 'button');

      container.append(button); // dodajemy przycisk do kontenera
      container.append(label); // dodajemy etykietę za przyciskiem w kontenerze

      inputFile.after(container); // wstawiamy kontener z atrapą za kontrolką

   });
});

Po odpaleniu powyższego skryptu powinniśmy uzyskać efekt widoczny na poniższej grafice. Pod prawdziwą kontrolką pojawiła się nasza atrapa, z która możemy pracować dalej.

Bez nazwy

Samo stworzenie elementu nic nam nie da jeśli nie połączymy go z prawdziwą kontrolką. Zależeć nam będzie przede wszystkim na dwóch zdarzeniach. Pierwszym z nich jest otwieranie okna do wyboru plików po naciśnięciu przycisku. Drugim będzie zmiana zawartości etykiety w momencie zatwierdzenia wybranych plików. Sprawę powinny załatwić dwa proste zdarzenia, które połączą atrapę z kontrolką.

$(document).ready(function() {
   $('input[type=file]').each(function() {

      var inputFile = $(this);

      var container = $(document.createElement('div'));
      container.addClass('file-container');

      var label = $(document.createElement('label'));
      label.html('Nie wybrano pliku');

      var button = $(document.createElement('button'));
      button.html('Przeglądaj...');
      button.attr('type', 'button');

      // zdarzenie zmiany wartości kontrolki - podmienia zawartość etykiety atrapy
      inputFile.change(function() {
         label.html($(this).val());
      });

      // zdarzenie kliknięcia w przycisk atrapy - wywołuje zdarzenie kliknięcia w prawdziwą kontrolkę
      button.click(function() {
         inputFile.click();
      })

      container.append(button);
      container.append(label);
      inputFile.after(container); 

   });
});

Nasza praca powoli dobiega końca. Pozostaje nam sprawić by widoczna została jedynie nasza atrapa. Uzyskamy ten efekt dzięki krótkiemu poleceniu wewnątrz skryptu, które ukryje wszystkie interesujące nas kontrolki:

$(document).ready(function() {
   $('input[type=file]').each(function() {
      var inputFile = $(this);
      inputFile.css('display', 'none'); // ukrywamy prawdziwą kontrolkę

      (...)
   });
});

Teraz może spokojnie zająć się tworzeniem stylu naszego nowego pola wyboru plików. Na potrzeby tego wpisu przygotowałem prosty styl, który w pewnym stopniu pokazuje co można zrobić z nową kontrolką. Powodzenia dla tych, którzy chcą to zrobić z domyślnym elementem formularza przy pomocy czystego CSS ;) Finalny efekt możecie zobaczyć tuż pod stylem.

.file-container {
    display: inline-block;
    padding: 10px 20px 10px 10px;
    border-radius: 4px;
    background: #2ecc71;
}
.file-container button {
    border: 0px none transparent;
    background: #27ae60;
    padding: 10px 20px;
    border-radius: 4px;
    margin-right: 20px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 12px;
    font-weight: bold;
    color: #FFFFFF;
    cursor: pointer;
}
.file-container label {
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 12px;
    font-weight: bold;
    color: #FFFFFF;
}

 

Bez nazwy

Słowo na koniec

Z chęcią zobaczę wasze wariacje powyższej kontrolki. Jeśli chcielibyście się pochwalić, nie wahajcie się i piszcie na naszym fanpage'u lub wzmiankujcie do naszego konta na Twitterze. Inwencja twórcza zawsze spoko! :)

Na dziś to wszystko. Mam nadzieję, że pierwszy wpis z serii webowego DIY przypadł Wam do gustu. To dopiero początek i mam w zanadrzu kilka kolejnych tematów, jednak będę wdzięczny za feedback i propozycje do kolejnych odcinków nowej serii.