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:
{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’),email_cim: $F(‘email_cim’)”
url=”./url amit hívunk”
outputid=”kimenet id kerül”
}
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
}
//$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:
0