Na stronie Twitter Zaloguj się, etykieta dla pól wejściowych przybywa wewnątrz pól wejściowych, które wykorzystują wspólną sztuczkę z JavaScript / Jquery. Jednak poszedłem przez źródło Twittera, aby dowiedzieć się, jak to robią. Znalazłem Onchange: Dodaje klasę "Hasome" do rodzica div i ma domyślny tekst jako zakres, który nigdy nie dostaje własności, takiej jak display:none;.

Próbowałem przejść przez ich HTML / CSS / JS, ale nie mogłem znaleźć ich metod. Czy ktoś może powiedzieć, jak Twitter to robi?

edytuj Kod Twittera:

<div class="placeholding-input username hasome">
    <input type="text" class="text-input email-input" name="session[username_or_email]" title="Username or email" autocomplete="on" tabindex="1">
    <span class="placeholder">Username or email</span>
</div>

Dodano dany Twitter HTML. Gdy dodajemy jakiś kod, dodaj tylko jedną klasę "Hasome" w rodzica div. W Firebug nie widziałem żadnej mienia przydzielonej do klasy "Hassome". Moje pytanie brzmi: gdzie jest kod, który robi to lub CSS, jeśli zostanie osiągnięty przez CSS.

2
Kapil Sharma 8 wrzesień 2012, 08:04

4 odpowiedzi

Najlepsza odpowiedź

Podczas gdy klasa hasome jest stosowana do rodzica div, jest używany w selektorze, który ustawia wartości CSS w zakresie dziecko . Tak więc w Firebug (lub chrome lub tj. Narzędzia deweloperskie), musisz zachować oko na ten zakres dziecka, a nie Div, aby zobaczyć, co się dzieje.

Powinieneś zobaczyć zastosowane następujące zasady, z pliku CSS t1_core_logged_Out.bundle.css:

.has-content .placeholder, .hasome .placeholder
{
    font-size:0!important;
    z-index:-1;
    -moz-opacity:0;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
}

Częścią reguły kończy się efektem, jest częścią ".Hasome Zasadniczo stosuje klasę na rodzica do sterowania stylami dziecka lub potomka, która jest dość wspólną techniką CSS.

2
BrendanMcK 8 wrzesień 2012, 04:37

Po prostu wyświetla absolutnie pozycjonowane rozpiętość nad polem, a następnie ukrywanie go, gdy tylko wszystko zostanie wprowadzone (i ponownie wyświetlanie go, gdy pole staje się puste). Natychmiastowa ukrywa się dlatego nie ma znaczenia, że rozpiętość zasłania pole. Co dziwne, nie wygląda na to, że faktycznie używane etykiety, chociaż nie widzę dobrego powodu, aby nie mieć.

2
Brad Werth 8 wrzesień 2012, 04:12

Chociaż nie jest to to, co robią, możesz wykonać ten sam wynik za pomocą atrybutu HTML5 Placeholder

Należy Więc jeśli nie jest to dla ciebie problem, możesz to z pewnością użyć.

2
Hazem Salama 8 wrzesień 2012, 04:22

To CSS. http://a0.twimg.com/a/1347042098/t1 /css/t1_core_logged_Out.bundle.css ma następującą regułę:

.hasome .placeholder{font-size:0!important;z-index:-1;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);}

Zauważ, że dla dowolnego .placeholder w .hasome jego opacity jest ustawiony na 0. Dlatego też nie pokazuje.

Nie sposób, w jaki to zrobił, ale w ten sposób robią to przynajmniej.

2
Nathan Wall 8 wrzesień 2012, 04:34