ActionsManager - przykłady

Przedstawiam tutaj przykłady użycia biblioteki ActionsManager.

Podstawowy

Pierwszy banalny przykład. Odpalenie akcji, która coś tam robi. Ustawiamy okienko pod linkiem akcji:

aaObject = ActionsManager.setup({
	'guid' : 'basic', 
	'link' : 'linkdoakcji',
	'title' : 'Przykładowa akcja',
	'titleRunning' : 'Przykładowa akcja w toku...'
});
//Pobranie pozycji linka. Zmienna objLink jest obiektem DOM naszego wciśniętego linka
lPos = Mixed.getPosition(objLink); 
//ustawienie okienka pod linkiem
aaObject.element.style.left = lPos.x + 'px';
aaObject.element.style.top = lPos.y + 20 + 'px';
[Przykład działania]

Ruch i pozycjonowanie

Jeśli chcemy by nasze okienko można było przesuwać i zmieniać jego wielkość, należy załadować plugin dynamic. Jeśli chcemy by było po środku strony lub innego diva musimy wgrać plugin position.

ActionsManager.loadPlugins('dynamic,position');

Następnie standardowy już kod wzbogacamy o parametry, które nas interesują.

ActionsManager.setup({
	'guid' : 'dynamic', 
	'link' : 'linkdoakcji',
	'move' : true,
	'center' : true,
	'resize' : {'minWidth': 200,'minHeight':90},
	'title' : 'Przykładowa akcja',
	'titleRunning' : 'Przykładowa akcja w toku...'
});
[Przykład działania]

Podgląd

Każdy podgląd będzie miał swoje własne okienko. Otwarcie jednego okienka powoduje zamknięcie poprzednio otwartego (parametr closeLastOpened). Gdy już raz uruchomimy dany podgląd, kolejne uruchomienie tego samego podglądu nie powoduje wysyłania żądania na serwer (parametr refresh). Skoro to ma być podgląd to zapewne oczekujemy danych w postaci html. Określimy to przez parametr type. Należy jeszcze przekazać serwerowi id naszego rekordu (parametr params).

//id - id podglądu (może to być np. id rekordu)
aaObject = ActionsManager.setup({
	'guid' : 'preview'+id, //każda akcja w innym oknie
	'link' : 'linkdoakcji',
	'move' : true,
	'resize' : {'minWidth': 200,'minHeight':60},
	'closeLastOpened' : true, //zamykamy ostatnio otwarte okno
	'refresh' : false, //jeśli dany podgląd już raz sie wykonał, ponowme otwarcie jego okna nie odświerzy go
	'title' : 'Podgląd',
	'titleRunning' : 'Pobieranie danych...',
	'type' : 'html', //spodziewamy się danych zwrotnych jako html
	'params' : {'id' : id} //przekazujemy razem z żądaniem id podglądu (rekordu)
});
	
//Pobranie pozycji linka. Zmienna objLink jest obiektem DOM naszego wciśniętego linka
lPos = Mixed.getPosition(objLink); 
//ustawienie okienka obok linku
aaObject.element.style.left = lPos.x + 120 + 'px';
aaObject.element.style.top = lPos.y + 'px';
[Przykład działania]

Wspólne okno

Kilka akcji wykonywać się będzie w tym samym oknie. Nie pozwalamy by w trakcie trwania jednej akcji, wykonywała się druga (parametr allowRunRunning).

//id - id akcji (może to być np. id rekordu)
aaObject = ActionsManager.setup({
	'guid' : 'actionshared', //wszystkie akcje w tym samym oknie
	'link' : 'linkdoakcji',
	'move' : true,
	'resize' : {'minWidth': 200,'minHeight':60},
	'title' : 'Akcja',
	'titleRunning' : 'Trwanie akcji...',
	'allowRunRunning' : false, //nie powalamy, by wykonywało się kilka akcji naraz
	'params' : {'id' : id} //przekazujemy razem z żądaniem id akcji (rekordu)
});
	
//Pobranie pozycji linka. Zmienna objLink jest obiektem DOM naszego wciśniętego linka
lPos = Mixed.getPosition(objLink); 
//ustawienie okienka pod linkami
aaObject.element.style.left = lPos.x + 'px';
aaObject.element.style.top = lPos.y + 20 + 'px';
[Przykład działania]

Własny kod na zakończenie akcji (przykład z usuwaniem)

Kilka akcji usuwania wykonywać się będzie w tym samym oknie. Tym razem pozwalamy na uruchomienie jednoczesne kilky akcji (parametr allowRunRunning). Dodatkowo, po pomyślnym zakończeniu akcji, usuniemy link, który wciśnięto by uruchomić akcję (napiszemy własnę metodę afterRun()). Jeśli akcja się powiedzie, zostanie zamknięte okno akcji (parametr closeAfterSuccess).

Na początek standardowy kod, który już znacie:

//id - id akcji (może to być np. id rekordu)
ActionsManager.setup({
	'guid' : 'actionremove', //wszystkie akcje w tym samym oknie
	'link' : 'linkdoakcji',
	'move' : true,
	'resize' : {'minWidth': 200,'minHeight':60},
	'center' : true,
	'title' : 'Akcja usuwania',
	'titleRunning' : 'Usuwam...',
	'closeAfterSuccess':true,//zamknij okno gdy akcja się powiedzie
	'allowRunRunning' : true, //powalamy, by wykonywało się kilka akcji naraz
	'params' : {'id' : id}, //przekazujemy razem z żądaniem id akcji (rekordu),
	'objLink' : objLink //przekazujemy nasz parametr (objekt linku), który później wykorzystamy
});

Następnie musimy napisać własną metodę, która zostanie uruchomiona po zakończeniu akcji:

//zapamiętanie starej metody afterRun
AjaxAction.prototype.oldAfterRun = AjaxAction.prototype.afterRun;
//napisanie własnej metody by po zakończeniu akcji usunąć linka 
AjaxAction.prototype.afterRun = function(ajaxObj,params, resultOk){
	this.oldAfterRun(ajaxObj, params, resultOk); //wywołanie starej metody by zachować jej funkcje
	if (params.objLink){
		if (this.getResult(ajaxObj) == '0'){ //akcja się powiodła
//usunięcie linku
params.objLink.parentNode.removeChild(params.objLink);
		}
	}	
}
[Przykład działania]

Komentarze

 

Dodaj komentarz

 

Dostępne bbcode: b, u, i, url, code, php, css, html, sql, js

Skrypty użytkowników

  1. Klasa obsługi szablo... Lirdoner
  2. Sekcje user76
  3. Klasa walidująca for... user76
  4. Licznik Gości online korey
  5. Form Builder Comandeer
  6. Dynamiczny licznik z... korey
  7. Captcha Comandeer