Smarty AJAX. Miért jó ez? Ha utálsz gépelni, akkor tudod. Milyen műveletet tudunk elvégezni velük:

Átírás

1 Smarty AJAX Smarty sablonrendszer fegyverzetét (Funkcióit) igyekszik kiegészíteni, néhány alap AJAX metódussal, amivel a megjelenést, kényelmet vagy a funkcionalitást növelhetjük. A Smarty Ajax függvényeknek Prototype.js (Prototype JavaScript framework, version 1.6.0) és ScriptaCulous.js (script.aculo.us scriptaculous.js v1.8.1) igénye van (újabb lehet). Miért jó ez? Ha utálsz gépelni, akkor tudod. Milyen műveletet tudunk elvégezni velük: Betöltés kezelés: Kezdő JavaScript felhasználók ezen gyakran elvéreznek és utána hiába az elszántáság. ajax_prototypejs Prototype.js fájlt hív be, ha nem találja hibaüzit (die) küld. ajax_effectjs ScriptaCulous.js fájlt tölti be, ha nem találja hibaüzit (die) küld. Egyéb elemek: Ajax.Updater A hívott php fájl kimenetét XHTML; Text; JSON formában megjeleníthetjük vele Ajax.PeriodicalUpdater periodikus frissítésre Autocompleter.Local Az éppen gépelt szöveghez hasonlót keres a egy adott tömbben Ajax.Autocompleter Az éppen gépelt szöveghez hasonlót kereshetünk fájlhívással Ajax.InPlaceEditor Mentést és szerkesztés végezhetünk vele Ajax.Sortable.Create rendezhető lista, melyet tömb formában feldolgozhatunk PHP-ben. Ajax.Tabmenu Tabokkal lapozható, tartalmat pakolhatunk ki vele. Felhasználhatóság: A fent említett sablon és szkript könyvtárak engedélyei alapján, valamit saját felelőségre, mivel ez egy ingyenesen letölthető kiegészítés. A függvények megfelelő forrásból letöltve nem fognak gondot okozni. Az opendir.hu oldalról ingyenes letöltésekre semmilyen garanciát nem vállalunk, ennek a tudatában használjátok. Mi kell ahhoz, hogy ezt használni tudd: Főleg ismeretek, nem kevés. Prototype, ScriptaCulous, Smarty, PHP, esetleg egy pici CSS és XHTML. Persze ha a fenti 4 már megvan, a többit a funkciók kiegészítik, alapértelmezett beállításokra. Telepítés: Nem igényel telepítés, másoljuk bele a smarty/plugins/ mappába a function.ajax_.php kiterjesztésű fájlokat (a letöltések között a smarty_ajax.zip fájlban lesznek). Bár nem szerettem volna semmi Hactivityt elköveteni, azért nem árt átnézni a fájlokat, az Internyetú nem a bizalom háza. Tippek: amit lehet pakoljunk a publikus zónán (public_html-en) kívülre, ha nem a megjelenés része. CSS, megjelenés szabályozása: Vannak teszt beállítások amik smarty_ajax_teszt.zip letöltben smarty_ajax_style.css, fájlban találhatók. Ezek nem kötelezőek, van amelyik illusztráció (tab_menu), de van olyan is ami alapértelmezett beállítás. Ha nem tudod hogy adhatsz stílust egy adott elemnek, készítsd belőle többet és nézd meg a növekményes ID azonosítókat. Letöltés: smarty_ajax_teszt.zip csomag: A leíráshoz csatoltam az általam is használt teszt fájlokat. Ha a leírás gyengus volna, kicsomagolás után beszédesebb lesz a templates/index.tpl fájl, szövegszerkesztővel történő nézegetése. Linuxra történő telepítéskor a template_c mappára adjunk rwx jogosultságot. smarty_ajax.zip Csak a telepítésnél említett fájlokat tartalmazza. Ezeket kell bemásolni a Smarty plugin mappába. Prototype.js betöltés kezelés:

2 Prototype.js betöltés kezelés: {ajax_prototypejs path=./js/ name= 1.6.0_prototype.js paraméterek alapértelmezett értékekkel: path=./ name= prototype.js A függvény betölti a path útvonalon található name nevű fájt. A head és /head részben helyezzük el. Alapjáraton a./prototype.js keres, vagyis ha a fájl nevét nem változtattuk meg, elég az útvonalat megadni. {ajax_prototypejs path= /var/www/ name= prototype.js scriptaculos.js betöltés kezelés: {ajax_effectjs path=./js/scriptaculous-js-1.8.1/src/ load= " paraméterek alapértelmezett értékekkel: path=./ name= scriptaculous.js load= Hasonló mint a Prototype.js betöltésénél, csak itt megadhatunk egy load= paramétert amiben felsorolhatjuk a használni kívánt műveleteket. load= effects, dragdrop... Érdemes csak a használathoz fontos modulokat betölteni, ezzel az oldal letöltést gyorsíthatjuk, viszont vannak eljárások amik modul függő (pl.: dragdrop kell a rendezéshez..). Az üres load paraméter minden betölt. {ajax_effectjs path= /var/www/ name= scriptaculous.js load= effects,.. A többit hiába írnám le, talán még nagyobb zavart okoznék, az index.tpl-ben láthatók. A lényeg van néhány kötelező paraméter, ha ezek nincsenek meg hibaüzit (die) kapunk. Speciális jelek: #!!# ezt az ütközés miatt a függvény cseréli { karakterektre. indicator: loader# itt a #jel egy növekvő számra cserélődik, de csak adott fg.-ben lista_style= overflow:auto;background:#ff6c00;color:#fff; megadhatunk stílust vagy class nevet {paraméter= value formában adjuk meg az értékeket -re figyelve. method= post vagy method= get sajnos ilyen hülye formában kell megadni post Alap paraméterekkel: {ajax_periodical_updater url=./url amit hívunk pars= nev: lorem1, alma: ipsum1 outputid= kimenet ide kerül {ajax_updater function_name= ezen a néven jön létre az új js függvényünk pars= nev: $F( nev ), _cim: $F( _cim ) url=./url amit hívunk outputid= kimenet id kerül

3 Kiegészítés egy regisztrált tömbből {ajax_autocompleter_local lista_id= ahová a listát legyártjuk input_id= a text input id-je data_array=$indexphp_ben_regelet_tomb $tab_data=array( lorem, ipsum, dolor,); $smarty->assign( tab_data1, $tab_data); {ajax_tabmenu input_id= tab_1 tab_id= tt tab_data=$tab_data1 Ha a textarea értéke be van kapcsolva akkor a szöveget bedobja egy olyan elembe. Viszont ha ez az érték globálban van megadva vagyis deklarációkor akkor egy küldhető formot eredményez, ehhez kell az url. $tab_menu = array ( 0 => array ( title => Lorem, content => Lorem Ipsum Dolor Amet id velit., ), 1 => array ( title => Amet szója narráció előkelőség laptop alhálóza, content => Lorem Ipsum Dolor Amet., textarea => true, ), ); $smarty->assign( tab_data1, $tab_menu); {ajax_sortable url=./test_ajax_sortable.php input_id= sortable2 data=$sortable_data

4 //$id=>$nev; id küdés után $key=sorrend; $value=id $sortable_array = array ( 10 => Lorem, 11 => Ipsum, 20 => Dolor, 30 => Amet, 40 => Lorem, 50 => pulvinar, 68 => semper, 77 => leo, ); $smarty->assign( sortable_data, $sortable_array); {ajax_inplaceeditor url= test_ajax_inplace_editor.php input_id= inptestlongtext text=$long_text $long_text= lorem ipsum dolor ament ; $smarty->assign( long_text, $long_text); Kiegészítés fájl hívásból, a ParamName után megadott változót _POST tömbben fogjuk találni, a beírt értékkel. {ajax_autocompleter lista_id= auc_lista1 input_id= auc_inp1 url=./test_ajax_autocompleter.php options= paramname: akeresett_szo Figyelem a függvények még elég alfa állapotban vannak, nem ítélem stabilnak, de tesztelni már lehet vele. További paraméterek a index.tpl fájlban sorry. hasonló bejegyzés:

5 hasonló bejegyzés: 1. $Smarty puska Ajax Updater Teszt Téma: Webalkalmazás fejlesztés Forrás: Szerző: ArtH2O Erdeti URL: