Nástroje používateľa
dev:omega:js:smartsearch
Rozdiely
Tu môžete vidieť rozdiely medzi vybranou verziou a aktuálnou verziou danej stránky.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
dev:omega:js:smartsearch [2017/01/04 09:34] Boris Duchaj |
dev:omega:js:smartsearch [2017/01/09 11:13] (aktuálne) Boris Duchaj [Vytvorenie kategorií smartSearchu] |
||
|---|---|---|---|
| Riadok 1: | Riadok 1: | ||
| ====== Javascript verzia smartSearch-u z flash-u ====== | ====== Javascript verzia smartSearch-u z flash-u ====== | ||
| + | |||
| + | **<color green>GIT vetva je 727.git duch/merge7 / 3514b1a</color>** | ||
| + | |||
| + | <color green>V tejto vetve sa nachádza aj ukážkový modul testss, v ktorom je kompletné funkčné demo SmartSearchu</color> | ||
| **Súbory** \\ | **Súbory** \\ | ||
| Riadok 11: | Riadok 15: | ||
| Nutné ďalšie súbory sú **jquery**, **jquery.ui.js** a komunikačná trieda pre komunikáciu s php **js_comunication.js** | Nutné ďalšie súbory sú **jquery**, **jquery.ui.js** a komunikačná trieda pre komunikáciu s php **js_comunication.js** | ||
| - | Inicializácia smartSearchu v html stránke | + | ===== Inicializácia smartSearchu v html stránke ===== |
| + | |||
| <code html5> | <code html5> | ||
| Riadok 32: | Riadok 37: | ||
| </div> | </div> | ||
| </code> | </code> | ||
| + | |||
| + | ===== Inicializácia data-tooltip ===== | ||
| Následne je nutné v javascriptovom súbore inicializovať jsSmartSearch funkcionalitu\\ Ako prvé pre správne fungovanie html tooltipu je inicializácia nového attribútu **data-tooltip** Toto je dôležité preto, lebo klasický tooltip dokáže zobrazovať len čistý text a aby sme mohli použiť html v tooltipe je toto nutné. | Následne je nutné v javascriptovom súbore inicializovať jsSmartSearch funkcionalitu\\ Ako prvé pre správne fungovanie html tooltipu je inicializácia nového attribútu **data-tooltip** Toto je dôležité preto, lebo klasický tooltip dokáže zobrazovať len čistý text a aby sme mohli použiť html v tooltipe je toto nutné. | ||
| Riadok 49: | Riadok 56: | ||
| </code> | </code> | ||
| - | Do inicailizačnej funkcie je nutné nastaviť ešte stav jednotlivých tlačidiel | + | ===== Nastavenie tlačidiel smartSearchu ===== |
| + | Do inicailizačnej funkcie je nutné nastaviť ešte stav jednotlivých tlačidiel, t.j. | ||
| + | <code javascript> | ||
| + | $("#categoryIcon").on("click",function(){ | ||
| + | jsSmartSearch.ss.showCategories('smartSearchSelect'); // odkaz na select kde su smartsearche | ||
| + | }); | ||
| + | |||
| + | $("#ss_delete_btn").on("click",function(){ | ||
| + | jsSmartSearch.ss.close('ss_container','hint'); //odkaz na ss_container a textove pole hint | ||
| + | }); | ||
| + | |||
| + | $("#smartSearchSelect").on("change",function(){ | ||
| + | jsSmartSearch.ss.close('ss_container','hint'); // pri zmene zavolaj reset smartsearchu | ||
| + | jsSmartSearch.ss.setCategories('smartSearchSelect'); //nastav kategoriu ak je to mozne | ||
| + | }); | ||
| + | </code> | ||
| - | V prípade, že používame kategórie pre spresnenie smartSearchu, je nutné ako prvé nainicialzovať výber kategórie. Ak máme viacero smartSearchov na jednej stránke je nutné | + | ===== Vytvorenie kategorií smartSearchu ===== |
| + | |||
| + | V prípade, že používame pre spresnenie smartSearchu kategórie, je nutné ako prvé nainicializovať výber kategórie. Ak máme viacero smartSearchov na jednej stránke je nutné | ||
| <code javascript> | <code javascript> | ||
| jsSmartSearch.helper._categorySelectionData = { | jsSmartSearch.helper._categorySelectionData = { | ||
| Riadok 101: | Riadok 125: | ||
| } | } | ||
| </code> | </code> | ||
| - | Symbol je názov png, ktorý musí byť uložený v adresári s obrázkami pre smartSearch. Nutné je dodržanie štruktúru objektového poľa a to type, s_id, title, symbol. | + | **Symbol** je názov png, ktorý musí byť uložený v adresári s obrázkami pre smartSearch. Nutné je dodržanie štruktúru objektového poľa a to **type**, **s_id**, **title**, **symbol**. |
| Následne je nutné rozšíriť funkcie showCategories a setCategories a daný smartSearch a tým sa zobrazia pri výbere. | Následne je nutné rozšíriť funkcie showCategories a setCategories a daný smartSearch a tým sa zobrazia pri výbere. | ||
| + | |||
| + | |||
| ===== Vytvorenie smartSearch požiadavky ===== | ===== Vytvorenie smartSearch požiadavky ===== | ||
| Riadok 163: | Riadok 189: | ||
| **Prvá časť** je nutná na to aby sa naformátovala časť pre zobrazenie výsledkov, | **Prvá časť** je nutná na to aby sa naformátovala časť pre zobrazenie výsledkov, | ||
| - | * divIdForResult je názov kam sa budú liať dynamicky generované výsledky | + | * **divIdForResult** je názov kam sa budú liať dynamicky generované výsledky |
| - | * divClassForResult je kontainer do ktorého sa dáva divIdForResult | + | * **divClassForResult** je kontainer do ktorého sa dáva divIdForResult |
| - | * hintName je hint id pre zobrazenie hintov | + | * **hintName** je hint id pre zobrazenie hintov |
| - | * ssContainer je hlavný kontainer smartSearchu | + | * **ssContainer** je hlavný kontainer smartSearchu |
| - | * loadIcon je ikonka animácie loadovania dát | + | * **loadIcon** je ikonka animácie loadovania dát |
| - | * onSelectCallBack je názov funkcie kam sa má výsledok po výberu výsledku vyhľadávania vrátiť | + | * **onSelectCallBack** je názov funkcie kam sa má výsledok po výberu výsledku vyhľadávania vrátiť |
| <code javascript> | <code javascript> | ||
dev/omega/js/smartsearch.1483518898.txt.gz · Posledná úprava: 2017/01/04 09:34 od Boris Duchaj
Nástoje stránky
