jQuery - proste animacje

Animacje na stronach to już nie tylko Flash, Silverligh czy Applet ale coraz częściej JavaScript.
jQuery udostępnia wiele gotowych animacji, jak również dostarcza prostą metodę do definiowania nowych.

Niektóre z gotowych efektów/animacji do wykorzystania:

• show() - pokazuje element jeżeli jest ukryty
• hide() - ukrywa element
• toggle() - przełącznik, np przełącza daną właściwość naprzemiennie
• slideDown() / slideUp() - efekt zjeżdżania w dół / górę
• fadeIn() - rozjaśnianie

Aby tworzyć własne animacje, możemy skorzystać z funkcji animate():

.animate( properties [, duration] [, easing] [, complete] ) 

np.

Code:

$("mydiv").animate({ left: "100px" }, 500);

Należy przy tym pamiętać, że metoda animate działa tylko z elementami CSS które są wielkościami liczbowymi jak np. wielkość, położenie.

Bardzo fajne przykłady animacji można znaleźć na stronie http://designreviver.com/tutorials/20-easy-to-learn-jquery-animation-tutorials/
W internecie można znaleźć wiele tutoriali, pokazujących w jaki sposób tworzyć ciekawe animacje i efekty.

jQuery zdarzenia

Zdarzenia w jQuery obsługuje się bardzo prosto.

Istnieją dwie proste metody bindowania, w zależności od kontekstu w którym je wykorzystamy:

$("element").metoda(function()) - jeżeli dany element DOM istnieje na stronie np.

Code:

@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>

<div id="List">
</div>
<input type="button" value="Przycisk" id="przycisk"/>
<script type="text/javascript">
    $(document).ready(function () {
        $("#przycisk").click(function () {
            $("#List").append("Text");
            return false;
        });
    })
</script>

W tym przypadku przycisk istnieje już na formatce i dodajemy do niego zdarzenie.

W przypadku gdy element nie istnieje na stronie i chcemy dynamicznie dodać do niego zdarzenie, korzystamy z metody .on("event", function(event){}). Przykład:

Code:

<div id="List">
    <p>Click me!</p>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#List").on("click", "p", function () {
            $("#List").append('<p>Click Me!<p/><br/>');
        });
    })
</script>

W tym przypadku dodajemy do formularza kolejne paragrafy, które mają automatycznie zbindowane zdarzenie Click.


Inne przydatne metody:
.one() - binduje zdarzenie na jedno użycie (po pierwszym wywołaniu zdarzenie jest usuwane z elementu)
.unbind([nazwa_eventu]) - usuwa jedno bądź też wszystkie (brak nazwy_eventu) zdarzenia z elementu
$("element").trigger("click") - wywołanie ręczne zdarzenia

jQuery selekcja

Przeglądanie drzewa DOM dokumentu HTML jest bardzo proste przy użyciu selektorów z jQuery.

$("h1") - selekcja wszystkich elementów h1
$(".klasa") - selekcja wszystkich elementów posiadających klasę klasa
$("#id_elementu") - selekcja elementu o id = id_elementu - jest to najszybszy dostępny selektor
$("*") - pobiera wszystkie elementy na stronie
$("p.klasa") - wybiera wszystkie elementy p posiadające klasę klasa
$("p:first") - wybiera pierwszy element typu p
$("[name]") - wybiera wszystkie elementy posiadające atrybut name
$("form[name='formatka1']") - wybiera wszystkie formularze o nazwie formatka1
$("a, p, div") - wyszukiwanie wielu na raz
$("div p") - wybiera wszystkie paragrafy znajdujące się w elemencie div

Metody pomocnicze:
$(".klasa").parent() - wyszukuje wszystkie elementy nadrzędne do tych o klasie klasa
$(".klasa").children() - Elementy zawarte w elementach o klasie klasa
$(".klasa").prev() / .next() - element po prawej/lewej stronie elementów o klasie klasa

Korzystając z wymienionych funkcji można w łatwy sposób zmieniać całą strukturę drzewa DOM dokumentu HTML.

Dodatkowo warto pamiętać aby każdy blok kodu jQuery rozpoczynać od sprawdzenia czy dokument został załadowany:

Code:

$(document).ready(function() {
});

jQuery + Ajax w ASP.NET MVC

Obsługa Ajax w jQuery dzięki pomocniczym metodom jest niezwykle prosta.
Podstawową metodą jest $.ajax()

Załóżmy, że chcemy wyświetlić klientów, ale dopiero po kliknięciu na przycisk. Dodatkowo nie potrzebujemy aby cała strona została przeładowana, tylko nowe rekordy zostały dodane w interesujące nas miejsce na stronie.

Model:

Code:

    public class ClientModel
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int BirthYear { get; set; }

        public ClientModel(int id, string firstName, string lastName, int birthYear)
        {
            Id = id;
            FirstName = firstName;
            LastName = lastName;
            BirthYear = birthYear;
        }

        public ClientModel()
        {
        }

        public override string ToString()
        {
            return string.Format("Id: {0}, FirstName: {1}, LastName: {2}, BirthYear: {3}", Id, FirstName, LastName, BirthYear);
        }
    }

Kontroler:

Code:

    public class HomeController : Controller
    {
        public List<ClientModel> Clients
        {
            get
            {
                return new List<ClientModel>
                    {
                        new ClientModel(1, "Jacek", "Markowski", 2000),
                        new ClientModel(2, "Marek", "Polkowski", 1988),
                        new ClientModel(3, "Sebastian", "Dunkowski", 1900)
                    };
            }
        }

        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            return View();
        }

        public JsonResult GetPersonList()
        {
            return Json(Clients, JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetPersonById(int id)
        {
            var client = Clients.Single(x => x.Id == id);
            return Json(client, JsonRequestBehavior.AllowGet);
        }
    }

HTML:

Code:

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>        
    <div id="PersonList">
    </div>

    <input type="button" value="Pobierz dane" id="przycisk1"/>    
</p>

Do wyrenderowanej strony:

Chcemy, aby po naciśnięciu przycisku Pobierz dane zostały pobrane i wyświetlone rekordy. Możemy tego dokonać za pomocą następującej funkcji:

Code:

@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
    <div id="PersonList">
    </div>
    <input type="button" value="Pobierz dane" id="przycisk1" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#przycisk1").click(function () {
                $.ajax({
                    url: '@Url.Action("GetPersonList")',
                    cache: false,
                    dataType: "JSON",
                    success: function (data) {
                        $.each(data, function (i, item) {
                            $("#PersonList").append(item.Id + " " + item.FirstName + " " + item.LastName + "</br>");
                        });
                    }
                });
                return false;
            });
        });
    </script>
</p>

Efekt:

Wysyłanie danych do kontrolera jest tak samo proste jak pobieranie danych. Należy do tego wykorzystać właściwość data, np chcemy pobrać dane użytkownika o id = 2:

Kod:

Code:

@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
    <div id="PersonList">
    </div>
    <form method="post" name="formularz">
        <label>Id: </label>
        <input type="text" name="id" id="id"/>
        <input type="button" value="Pobierz dane" id="przycisk1" name="przycisk1" />
    </form>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#przycisk1").click(function() {
                $.ajax({
                    url: '@Url.Action("GetPersonById")',
                    cache: false,
                    dataType: "JSON",
                    data: $("form[name=formularz]").serialize(),
                    success: function(data) {
                        $("#PersonList").append(data.Id + " " + data.FirstName + " " + data.LastName + "</br>");
                    }
                });
                return false;
            });
        });
    </script>
</p>