JQuery Show/Hide Toggle za web dizajnere

PROGRAMIRANJE

Podelićemo sa vama veoma često korišćen jquery efekat, ali takođe i jedan do onih koji početnici u web dizajnu smatraju mnogo težim nego što to zaista jeste!

Sve što ćemo uraditi je da kreiramo primer koji će demonistrirati sakrij/prikaži efekat.

Za početak potrebno je da uključimo JQuery na stranu između <head> </head> tagova:

<script type="text/javascript" src="your/link/to/jquery.min.js"></script>

Nakon toga moramo učiniti stranu spremnom za naš skript. Da bi to uradili sve što budemo pisali biće unitar $(document).ready. Sve što se nalazi unitar ove male funkcije će biti učitano odmah nakon što je DOM učitan i pre nego što je sadržaj na strani prikazan.

<script type="text/javascript">
    $(document).ready(function() {

    });
</script>

Sada, najpre želimo da sakrijemo sadržaj koji će biti prikazan toggled (presumably). Prvo pozovemo naš elemnt (#shome) i onda funkciju .hide();

Zatim samo treba da postavimo koji element će pokrenuti akciju. Za ovo selektujemo naš element - u ovom primeru ispod id je toogleBtn:

<script type="text/javascript">
    $(document).ready(function() {
        $('#showme').hide(); //hide our content first
        $('#toggleBtn').click(function() {
            //do stuff when #toggleBtn is clicked

        });
    });
</script>

I na kraju, zapravo kažemo JQuery koji element će biti prikazan/sakriven (.toggle)) - #showme, i kojom brzinom će se to uraditi. Što je veći broj to je i brzina prelaza veća. U ovom slučaju opredelili smo se za vrednost 800.

<script type="text/javascript">
    $(document).ready(function() {
        $('#showme').hide(); //hide our content first
        $('#toggleBtn').click(function() {
            $('#showme').toggle(800);
            return false;
        });
    });
</script>