JDialogs

JDialogs je komponenta pro snadné vytváření jQuery dialogů. Navíc přidána možnost minimalizace dialogů a také ukládání dialogů

Download	http://www.cherryboss.cz/JDialogs.zip
Demo	http://cherryboss.php5.cz/
Demo ke stažení	http://www.cherryboss.cz/jqueryDialogs.zip
Forum thread	http://forum.nette.org/cs/9293-addon-jdialogs-snadna-tvorba-jquery-ui-dialogu
Autor	Michal ‚CherryBoss‘ Vyšinský
Nette	2.0+ (PHP 5.3+)

Co to umí

• Snadné vytváření jQuery UI dialogů.
• Vše nastavíte jednoduše v php kódu (like Nette Forms)
• Ukládá stav dialogu buď podle identity uživatele nebo podle IP (autodetect)
• Možnost minimalizovat dialog

Instalace

Stáhněte si archiv s knihovnou a rozbalte ji do složky libs. Ze složky „JDialogs“ přesuňte soubor „jquery.dialogs.js“ do složky s vašimi js soubory. Stáhněte si jQuery UI knihovnu a „nainstalujte“ si ji.

Přilinkujte do své šablony stažený js a css soubor z archivu s jQuery UI knihovnou. Přilinkujte soubor „jquery.dialogs.js“

Do šablony vložte inicializaci JDialogs:

$(document).ready(jDialogs.init);

Tím je vše připraveno na snadné vytváření jQuery UI dialogů

Použití

Pozn.: Při nastavování boolean vlastností dialogu dejte true a false do uvozovek (čili musí být string)

Základem je třída Cherry\JDialogs\BaseDialog. Proto ji použijeme v továrničce:

protected function createComponentJDialog() {
   $dialog = new Cherry\JDialogs\BaseDialog;
   //můžeme nastavit template soubor
   $dialog->template_file = APP_DIR."/dialogs/templates/dialog.latte"
   //můžeme si poslat do dialogu nějaká data (použitelné v template)
   $dialog->addData("text", "Toto je testovací text");
   //můžeme použít dva různé zápisy
   $dialog->addData(array(
      "text1" => "Toto je nějaký další text",
      "text2" => "Toto je ještě další text",
   ));
   //můžeme nastavit vlastnosti pro dialog - opět dva možné způsoby zápisu
   $dialog->addOption(array(
      "title" => "Titulek dialogu",
      "position" => "right, bottom",
   ));
   //můžeme nastavit události pro dialog - opět dva možné způsoby zápisu
   $dialog->addEvent(array(
      "close" => "Don't kill me!",
      "minimize" => "I will be minimized now",
   ));
   //když vytváříme dialog takto, tak pro signály přidáme handler následovně: (tady nejsou dva způsoby zápisu)
   // addHandler(signál, callback, [parametry])
   $dialog->addHandler("test", callback($this, "callTest"), array("param1" => "value1"));
   //a konečně vrátíme dialog
   return $dialog;
}

Pokud si podědíme třídu BaseDialog, tak si můžeme vytvořit handlery signálů klasicky. Vlastnosti a události dialogů jsou stejné jako zde. (Pozn. button ještě přidán není)

Otevření dialogu

Dialog se dá otevřít čímkoli, na co funguje js událost „click“ a má třídu „dialog_open“. ID dialogu, který se má otevřít se posílá v atributu „rel“. Čili:

<a href="#" class="dialog_open" rel="dialogOne">Nám otevře dialog s id = "dialogOne"</a>

Pro obnovení minimalizovaného okna použijeme css třídu „dialog_restore“ a opět id v atributu „rel“

Signály

Jak bylo napsáno, handler na signál si můžeme přidat v továrničce. Pokud to tak uděláte, tak signál v šabloně volejte pomocí signálu „signal“ a jako parametr předejte právě váš vytvořený handler. Ukázka:

<a n:href="signal test">Použije vámi vytvořený handler na signál test v továrničce</a>

Jsou to tedy takové „pseudo“ signály.

Minimalizace

Pro použití minimalizace přidejte do staženého css souboru z jQuery UI knihovny následující:

.ui-dialog .ui-dialog-titlebar-min{ position: absolute; right: 23px; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-min span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-min:hover, .ui-dialog .ui-dialog-titlebar-min:focus { padding: 0; }

.ui-dialog .ui-dialog-titlebar-rest{ position: absolute; right: 23px; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-rest span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-rest:hover, .ui-dialog .ui-dialog-titlebar-rest:focus { padding: 0; }

Taskbar

Taskbar je minikomponenta pro vypisování minimalizovaných oken. Jednoduše vytvořte instanci třídy Cherry\JDialogs\JTaskbar v továrničce a nastavte si cestu k šabloně. V šabloně pak máte k dispozici proměnnou $minimized_dialogs, ve které jsou všechna minimimalizovaná okna

Todo

• Přidání tlačítek (vlastnost dialogu „buttons“)
• Nastavení efektů pro otevření/minimalizaci/obnovení/zavření dialogu

---

Login to submit a comment