Rozdiely

Tu môžete vidieť rozdiely medzi vybranou verziou a aktuálnou verziou danej stránky.

--- dev:omega:js:smartsearch [2017/01/03 17:00]
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 ======
+**<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** \\
@@ Riadok 7: / Riadok 11: @@
 //images/ss///
-V adresári images sú obrázky vo formáte png optimálne 256*256 veľkosť s transparetným pozadím, určené pre
+V adresári images sú obrázky vo formáte png optimálne 256*256 veľkosť s transparetným pozadím, určené pre smartSearch
 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>
 <div id="main_ss_cont">
 	<span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span>
-	<img class="ss_info" id="categoryIcon" onclick="jsSmartSearch.ss.showCategories('smartSearchSelect');">
+	<img class="ss_info" id="categoryIcon">
    	<input id="hint" class="ui-autocomplete-input" type="text" name="word" autocomplete="off">
    	<div class="selectedCategoryLabel"></div>
-   	<img src="images/ss/delete.png" class="ss_delete" onclick="jsSmartSearch.ss.close('ss_container','hint');">
+   	<img src="images/ss/delete.png" class="ss_delete" id="ss_delete_btn">
  	<div id="ss_categoryContainer">
@@ Riadok 32: / Riadok 37: @@
 </div>
 </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é.
@@ Riadok 49: / Riadok 56: @@
 </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é
+===== 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>
+===== 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>
 jsSmartSearch.helper._categorySelectionData = {
@@ Riadok 98: / Riadok 125: @@
 }
 </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.
 ===== Vytvorenie smartSearch požiadavky =====
@@ Riadok 160: / Riadok 189: @@
 **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>

SystemOmega

Nástroje používateľa

Nástoje správy stránok

Rozdiely

Nástoje stránky