jQuery - odc.5

Tym razem druga część notatek o jQuery UI, a konkretnie  dziś będzie o efektach i animacjach oraz drag & drop. Mam tu oczywiście różne skojarzenia z Silverlight i nie tylko  -;)

Efekty i animacje

$(“#button”).click(function() {

$(this).animate({

         “width”: “+20”,

         “height”: 50

         “background-color”: “yellow”  //jQuery UI dodaje animację kolorów

});

});

Takie animacje w Silverlight zaliczane są do kategorii from/to, aczkolwiek w jQuery zapis jest znacznie krótszy.

$(this).effect(“bounce”);

$(this).effect(“explode”, { pieces: 16 }, prędkość*, function() {

alert(“Completed”);

});    * ”slow”, “fast”, liczba ms

jqueryui.com/demos/effect/

$(“#draggables”).children().draggable();

$(“#trash”).droppable({

activeClass: “class1”,

drop: function(event, ui) {

       ui.draggable.hide(“explode”);

}

});

Efekty jQuery kojarzą się mi się głównie z zachowaniami jakie można sobie przypiąć w Silverlight. Efekty Silverlight też mieszczą się w tej kategorii, aczkolwiek operują na pojedynczych pikselach w pixel shaderach (renderowanych przez software).

Easing functions

$(this).animate({

left: 300

}, 1000, “easeInOutElastic”);

});

$(this).addClass(“class2”, “slow”)  - podmiana stylu z niezerową tranzycją

animacje wykorzystują CSS3

Easing functions odpowiadają easing functions w Silverlight, przy czym nieco inny jest zestaw predefiniowanych rodzajów.

 

Interakcje UI

Dragging

<div id=”draggables”>

<div id=”item1”>

          <header>item1</header>

</div>

<div id=”item2”>

<header>item2</header>

</div>

<div id=”item3”>

<header>item3</header>

</div>

</div>

$(“#draggables”).draggable();

$(“#draggables”).children().draggable();

Style CSS: ui-draggable, ui-draggable header

$(“#item1”).draggable({  axis: “x”  });  - wzdłuż osi x lub y

$(“#item1”).draggable({ containment:  “#draggables”, handle: “header” });  - wewnątrz danego elementu, przeciąganie tylko łapiąc za nagłówek

Nakładanie przeciąganych elementów

• domyślnie z kolejności <div>
• opcja “stack”:  “.ui-draggable”  (przeciągany zawsze na wierzchu)

$(“#item1, #item2”).draggable(“option”, “stack”, “.ui-draggable”);

$(“#item2”).draggable({ grid:  [100, 200] }); - w ograniczonej przestrzeni

$(“#item2).draggable({ snap: “#item1”, “#item3”, helper: “clone” });  - wzdłuż podanych elementów, przeciąganie z kopiowaniem

$(“#item2).draggable({ snap: “#item1”, “#item3”, helper: function() {

return $(“<div>Helper</div>”);   //określanie wyglądu przeciąganego obiektu

} });

 

Dropping

$(“#item1”).draggable({

revert: “invalid”   //powraca na poprzednią pozycję, jeśli nie może zostać opuszczony

});

$(“#trash”).droppable({

activeClass: “opaque”  //klasa w przypadku akceptacji elementu

accept:  “#item3”,  //akceptacja tylko elementu o podanym id, pozostałe zostaną nad obiektem

drop: function(event, ui) {

        ui.draggable.fadeOut()( function(){

                ui.draggable.remove();

        };);

}

});

Przeciąganie jQuery ma odpowiednika w zachowaniu Blenda dla Silverlight i w API do drag & drop (toolkit dla przedstawionych przypadków). Należy też wspomnieć, że sam HTML5 oferuje drag & drop. Jego użycie nie jest trudne, ale jest na pewno bardziej złożone niż gotowych rozszerzeń jQuery. Ale w sumie podobnie jest w Silverlight, albo przypinam proste zachowanie do przeciągania albo korzystam z bardziej złożonego API, choć ilość funkcjonalności w tej opcji prostszej przemawia na korzyść jQuery.

 

Sortowanie

Przeciąganie i zamienianie kolejności elementów na liście

<ul id=”sortable”>

<li>item1</li>

<li>item2</li>

<li>item3</li>

</ul>

$(“#sortable”).sortable({ axis:  “y”,  placeholder: “placeholder” });  - przeciąganie wzdłuż osi y, styl dla pustej przestrzeni przed upuszczeniem elementu

$(“#item3”).resizable({ aspectRatio: true,  alsoResize:  “#item2” });  - dodanie możliwości zmieniania rozmiarów obiektu za pomocą myszy

Przedstawioną funkcjonalność jQuery da się zrealizować za pomocą właściwości paneli, a także odpowiednich zachowań dostępnych w Silverlight, aczkolwiek muszę przyznać że wiele funkcjonalności jQuery robi pewne wrażenie poprzez osiąganie zadanego celu przy dużej prostocie realizacji.