Confirm dialog pro Bootstrap a jQuery
- Rampus
- Člen | 39
Určitě znáte připady, kdy na je potřeba napsat potvrzovací dialog. Znamená to vytvořit nějaký div, nadefinovat tlačítka, texty. zajistit javascriptem spuštění a obsluhu atd… Takže v šabloně vzniká spousta balastu, který je na 90% stejný.
No a když už jsem na jedné stránce měl asi 5 dialogů typu „Smazat položku?“ „Smazat všechny položky?“ „Uložit data?“ „Odejít bez uložení?“… Tak jsem se naštval a vyplodil tuto malou utilitku, která vytváří dialogy sama na základě data- atributů.
Je to jen taková malá blbina, ale mě to ušetří spoustu času a hledání chyb, tak snad vám přijde taky vhod.
Pracuje s Bootstrapem a jQuery (jQueryUI není potřeba)
Základním syntaxe:
<?php
<a n:href="delete! $id"
data-confirm="true"
data-confirm-text="Opravdu chceš smazat záznam {$id}?"
class="ajax"
> Smazat</a>
?>Po kliknutí na link se zobrazí dialog a když se klikne ano, provede se akce v href. Pokud je navíc class ajax, provede se ajaxově.
Je možno dialog přestylovat, definovat classy a texty hlavičky a tlačítek.
Demo je k vidění zde:http://confirmdialog.redsoft.cz, stažení a návod tamtéž. (s dovolením jsem jen lehce upravil sandbox :) )
Tak snad vám to aspoň trošku ulehčí práci :)
- stekycz
- Člen | 152
Vypadá to celkem dobře. Jen se mi nedaří stáhnout kódy a háže mi to kód 500 :-(
Plus mě napadá, zda by nestálo za to vytvořit to jako komponentu. Pokud budu mít v šablone 5 různých dialogů, měl bych tam hodně data- atributů a možná by se to stalo nepřehledným. Komponenty jsou možná i moc velký kanón, ale bylo by možné zjednodušit definici dialogu? Jde mi především o možnost vypustit styly a nějakým způsobem je extrahovat jinam. Předpokládám, že v jedné aplikaci budou dialogy vypadat stejně.
Další návrh – použil by někdo dialog se třemi a více tlačítky? Podle aktuálního dema tipuju, že umožňuje jen OK a Cancel. Bylo by případně možné přidat i ukázku jiného než modal dialogu?
- Rampus
- Člen | 39
Gruw napsal(a):
Vypadá to celkem dobře. Jen se mi nedaří stáhnout kódy a háže mi to kód 500 :-(
Plus mě napadá, zda by nestálo za to vytvořit to jako komponentu. Pokud budu mít v šablone 5 různých dialogů, měl bych tam hodně data- atributů a možná by se to stalo nepřehledným. Komponenty jsou možná i moc velký kanón, ale bylo by možné zjednodušit definici dialogu? Jde mi především o možnost vypustit styly a nějakým způsobem je extrahovat jinam. Předpokládám, že v jedné aplikaci budou dialogy vypadat stejně.
Další návrh – použil by někdo dialog se třemi a více tlačítky? Podle aktuálního dema tipuju, že umožňuje jen OK a Cancel. Bylo by případně možné přidat i ukázku jiného než modal dialogu?
Koncept vychází z modál dialogu který dělá Bootstrap (velmi rychle
jsem se tuhle knihovnu naučil používat :) ) A pokud se to ještě prožene
přes LESS, tak si nadefinuješ barvy stylů a v celý app to pak vypadá
stejně a už jen přižazuješ btn-* styly (success, warning, danger…).
Pro tři tlačítka jsem to neřešil, protože to používám jen jako confirm
Ano/Ne.
A co se tyče zjednodušení… Já to mám tak, že si natvrdo přidám
styly ve zdrojáku a pak vím, že defaultně budu mít všechny hlavičky
třeba žlutý a Ano tlačítko bude zelené. A pak stačí použít jen data-
pro nadpis, a otázku. A když budu chtít jiný styl, tak nastavím ostatní
data atributy.
Chtěl jsem to udělat jako jQuery extension, ale to bych pak do každý
šablony musel vkládat něco jako:
<?php
$('[data-confirm]').confirm({
buttonOkText: Ano,
.....
});
?>a tomu jsem se chtěl vyhnout :)
Editoval Rampus (20. 3. 2012 16:01)
- miler
- Člen | 75
Mohl by mi prosím někdo poradit návod pro blbce jak to rozjet?
Připojil jsem v layoutu:
- bootstrap.js
- nette.ajax.js
- jquery
V presenteru>
- jsem přidal handleDelete($param), funkce je prázdná
V šabloně:
- jsem přidal:
<a id="myLink" n:href="delete! 'Základ'"
data-confirm="modal"
data-confirm-title="Potvrdit"
data-confirm-text="Smazat ?"
class="ajax"
>
Zakladní dialog
</a>Po kliknutí na odkaz se nic nestane. pokud smažu data-adtributy u odkazu, tak se zavolá ?do=delete.
Děkuji za nakopnutí.
- Michal Vyšinský
- Člen | 608
- V jakém pořadí jsi je přilinkoval? jQuery musí být jako první – bootstrap je na něm závislý.
- Máš správné cesty k souborům? Zkus si v prohlížeči otevřít zdrojový kód a kliknout na cesty u těch js souborů, jestli se neotevřou tak máš špatné cesty.
- duskohu
- Člen | 778
Caute, skusali ste niekto pouzit tento confirm-dialog pre ajaxove volanie odkazu pri pouziti nette.ajax.js, robi mi to ze modal okno mi vybehne, ale odkaz sa na pozadi aj tak vykona skor nez dam potvrdit, alebo zamietnut.
