Trigger kliknięć

Prawie każda strona www posiada dzisiaj formularze. Wiele z nich chce ładnie ostylować te formularze. Niestety, póki co nie wszystkie przeglądarki wspierają należycie takie właściwości css jak zaokrąglanie rogów itp. Dlatego często trzeba się wspierać dziwnymi sklejeniami grafiki (jeśli nie wiesz o co mi chodzi przeczytaj artykuł o sexy buttonach albo inny podobny o technice sliding doors).

Wizualnie wszystko działa ładnie. Niestety część wizualnego przycisku to nie jest przycisk, tylko jakiś inny pojemnik. Taki pojemnik, domyślnie nie powoduje żadnej akcji. Przycisk HTML (znacznik <input type="button|submit|reset"/>) najczęściej wywołuje jakąś akcję.

Jeśli uważasz, że naprawdę musisz mieć "ładniejsze" formularze to może warto sprawić, by choć nie traciły na funkcjonalności?

<html>
<head>
    <style type="text/css">
        .sexy-button {
            padding: 0 0 0 30px;
            border: 1px solid red;
        }
        input[type="submit"] {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <form action="#wyslalo-mnie">
        <span class="sexy-button">
            <input type="submit" value="kliknij mnie"/>
       </span>
    </form>
</body>
</html>

Trochę powiększyłem screen, aby było lepiej widoczne co się stało. Obszar ograniczony niebieską linią to przycisk [typu submit]. Jeśli klikniemy na niego - formularz zostanie wysłany. Obszar ograniczony czerwoną linią to <span class="sexy-button"/>. Jeśli klikniemy na jego obszar to wcale nie wyśle formularza (chyba, że klikniemy na obszarze wspólnym z buttonem).

Czas na JavaScript

Jedyne co musimy zrobić to wywołać kliknięcie na buttonie, jeśli klikniemy na span. Proste? Nie aż tak bardzo, jednak jQuery to ułatwnia w stopniu znacznym:

    <script type="text/javascript" src="/jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $(".sexy-button").children("input").click(function(event) {

                event.stopPropagation(); // wylaczamy propagacje zdarzenia

            });

            $(".sexy-button").click(function() {

                $(this).children("input").trigger("click"); // wywolujemy zdarzenie kliknięcia = wysylamy

            });

        });

    </script>

Może cię zaciekawić, dlaczego wyłączamy propagację zdarzenia... Otóż, wg standardu W3C są dwie fazy propagacji zdarzeń: faza zstępowania i bąblowania (choć strasznie to brzmi po polsku). Jeśli nie wyłączymy tu propagacji to się nam zapętli. Gdyż nasz trigger będzie pośrednio wywoływał sam siebie!

Pełny przykład:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <title>Trigger kliknięć</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".sexy-button").children("input").click(function(event) {
                event.stopPropagation();
            });
            $(".sexy-button").click(function() {
                $(this).children("input").trigger("click");
            });
        });
    </script>
    <style type="text/css">
        .sexy-button {
            padding: 0 0 0 30px;
            border: 1px solid red;
        }
        input[type="submit"] {
            border: 1px solid blue;
        }
    </style>
</head>
 
<body>
    <form action="#wyslalo-mnie">
        <span class="sexy-button">
            <input type="submit" value="kliknij mnie"/>
        </span>
    </form>
</body>
</html>