Jak dodać tooltip do menu

Cinek.ck

Avatar: Cinek.ck

2010-06-05 17:23

Witam,
chciałem dodać tooltip obrazkowy do poszczególnych odnośników menu.
Próbowałem wyodrębnić poszczególne elementy listy w menu_3.tpl
ale mi się powielają owe odnośniki razy 3.
Próbowałem w ten sposób:
<li class="l1"><a href="?tents,6 ">Tents</a></li>,
potem <li class="l2></li> itd.
W jaki sposób wyodrębnić listę z menu przykładowo menu3, żeby uzyskać poszczególne elementy listy <li> ?
Może ktoś wie w jaki sposób można dodać tooltip do menu?

» Quick.Cms v2.x

lordofhares.com

Kobejasi

Avatar: Kobejasi

2010-06-05 17:51

Jeśli dobrze zrozumiałem chodzi ci o coś w stylu onmouseover="tooltip... i tutaj ma być jakiś opis inny dla każdego Twojego <li>.

Najprościej było by dorzucić dodatkowe pole (input w adminie/rekord w bazie-pl_pages) i potem tylko w menu_3.tpl odwoływać się przez zmienną np. $aData[tooltip]

http://www.walendowski.com

Cinek.ck

Avatar: Cinek.ck

2010-06-05 18:32

Dzięki, potem sprawdzę i napiszę jak bym coś źle zrobił :)

lordofhares.com

Cinek.ck

Avatar: Cinek.ck

2010-06-05 21:14

Ok zrobiłem według wskazówek i coś nie tak bo nie zapisuje mi do bazy tego co wpisuję w adminie, rekord do bazy dodałem tak że dodałem $ do każdego miejsca zakończonego enterem... Dobrze?

Kod skryptu jest taki:

this.screenshotPreview = function(){
/* CONFIG */

xOffset = 10;
yOffset = 30;

// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};


// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});

Potem żeby wywołać na stronie dodaje:

<a href="http://adres" class="screenshot" rel="obrazek.jpg">Css Globe</a>

Tak jest w oryginale.

Ja w menu_3.tpl zrobiłem

 
<!-- BEGIN LIST --><li class="l$aData[sStyle]"><a href="$aData[sLinkName] " $aData[sSelected] class="screenshot" rel="$aData[tooltip]">$aData[sName]  </a>$aData[sSubContent] $aData[tooltip]</li>
<!-- END LIST -->
 



I efekt jest, znaczy wyświetla się tooltip ale w środku niego mam "url preview" zamiast tego co wpisuję w adminie.

Co mam zrobić proszę o pomoc.

lordofhares.com

Kobejasi

Avatar: Kobejasi

2010-06-05 22:04

Jeśli dodałeś np do pliku bazy pl_pages_ext.php do każdego rekordu $, to jeszcze musisz ten rekord zdefiniować w pliku pl_pages_ext.def.php, czyli należy dopisać:


<?php
$aFieldsNames   = Array( 'iPage' => 0, 'sDescriptionFull' => 1, 'sMetaDescription' => 2, 'sMetaKeywords' => 3, 'sTemplate' => 4, 'sTheme' => 5, 'sUrl' => 6, 'sBanner' => 7, 'sTooltip' => 8);

function pl_pages_ext( $aExp ){
  return Array( 'iPage' => $aExp[0], 'sDescriptionFull' => $aExp[1], 'sMetaDescription' => $aExp[2], 'sMetaKeywords' => $aExp[3], 'sTemplate' => $aExp[4], 'sTheme' => $aExp[5], 'sUrl' => $aExp[6], 'sBanner' => $aExp[7], 'sTooltip' => $aExp[8] );
}
?>



Rozumiem, że w szablonie pages.tpl dodałeś dodatkowe pole typu input, np:


<input type="text" name="sTooltip" value="$aData[sTooltip]" class="input" size="50" />



Potem w pliku menu_3.tpl



<!-- BEGIN LIST --><li class="l$aData[sStyle]"><a href="$aData[sLinkName] " $aData[sSelected] class="screenshot" rel="$aData[sTooltip]">$aData[sName]  </a>$aData[sSubContent] $aData[tooltip]</li>
<!-- END LIST -->



To tak na szybko.

http://daniel.netlook.pl/works/quick.cms/demo1/

Cinek.ck

Avatar: Cinek.ck

2010-06-06 11:10

Tak dodałem pole i zdefiniowałem pliki bazy i dalej mam wyświetlane na stronie "url preview" zamiast wpisanego testu w administracji. Do bazy już zapisuje. Tooltip działa, bo się wyświetla, ale nie to co wpisuję w adminie.
Gdzie może być błąd ?

lordofhares.com

Kobejasi

Avatar: Kobejasi

2010-06-06 12:11

A pracujesz online czy offline? Ten skrypt pobiera z atrybutu A zmienną href i robi screena. Więc jeśli pojawia ci się url prewiew, znaczy że skrypt został zainicjowany i próbuje połączyć się ze stroną w celu wyświetlenia screena, więc albo jesteś offline lub masz niepoprawnego linka do strony docelowej.

To co dodajesz w adminie czyli rel="$aData[sTooltip]" powinno być nazwą (wraz ze ścieżką ) obrazka, natomiast jeżeli chcesz wyświetlić opis czyli zmienna "c" w twoim skrypcie pojawi się dopiero jak to dodasz w kodzie menu_3.tpl. czyli musisz dodać dodatkowe pole z description np. $aData[tooltipDescription] i analogicznie dla tego pola wprowadzić wszelkie zmiany w odpowiednich plikach.

http://daniel.netlook.pl/works/quick.cms/demo1/

Kobejasi

Avatar: Kobejasi

2010-06-06 12:14

czyli plik menu_3.tpl powinien wyglądać tak:


<!-- BEGIN LIST --><li class="l$aData[sStyle]"><a href="$aData[sLinkName] " $aData[sSelected] class="screenshot" rel="$aData[sTooltip]" title="$aData[sTooltipDescription]">$aData[sName]  </a>$aData[sSubContent] $aData[tooltip]</li>
<!-- END LIST -->

http://daniel.netlook.pl/works/quick.cms/demo1/

Cinek.ck

Avatar: Cinek.ck

2010-06-06 20:38

Zrobiłem i dalej nie działa. Dla pola $aData[sTooltipDescription] dodałem pole w adminie, dodałem rekord w bazie no i w menu_3.tpl też dokonałem zmian jak powyżej. Do bazy zapisuje, ale dalej pojawia się url preview.
Jak wprowadzam link na "sztywno" w container.tpl to jest zamierzony efekt, czyli jest podgląd obrazka do danego wstawionego linka, więc coś źle chyba robię ale nie wiem co.
Kombinowałem ze ścieżkami do obrazka, ale też nic.
Co jeszcze można zrobić? Gdzie szukać przyczyny?

lordofhares.com

Kobejasi

Avatar: Kobejasi

2010-06-06 20:52

a możesz podać jakiegoś linka?

http://daniel.netlook.pl/works/quick.cms/demo1/

Kobejasi

Avatar: Kobejasi

2010-06-06 21:05

już wiem, zapisujemy nie do tej bazy ;P powinniśmy zapisać to do bazy pages.php, pages.def.php więc te twoje pola input w adminie trzeba by umieścić w pages.tpl w sekcji <!-- BEGIN LIST -->

Bo przecież pages_ext nie jest używana w funkcji generateCache ;-)
I dlatego pokazuje puste wartości. Moja pomyłka SORKI ;-)

http://daniel.netlook.pl/works/quick.cms/demo1/

Cinek.ck

Avatar: Cinek.ck

2010-06-06 21:20

Nic się nie stało uczę się dzięki temu :] zaraz sprawdzę kolejne wytyczne ;-)

lordofhares.com

Cinek.ck

Avatar: Cinek.ck

2010-06-06 21:44

I nic :) zmieniłem zapis w bazach pl_pages.def.php i rekordy pl_pages.php , dodałem inputy w sekcji <!-- BEGIN LIST --> I teraz nie zapisuje mi nic do bazy znaczy nic z inputów dodanych. No i oczywiście dalej jest " url preview ".
No i co dalej :)

lordofhares.com

Kobejasi

Avatar: Kobejasi

2010-06-06 21:58

hmm, czekaj, postawię ten skrypt u siebie

http://daniel.netlook.pl/works/quick.cms/demo1/

Cinek.ck

Avatar: Cinek.ck

2010-06-06 22:08

ok to do niego jest jeszcze css

#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}

lordofhares.com

Cinek.ck

Avatar: Cinek.ck

2010-06-06 22:38

Jutro zobaczę co ci się udało wymyślić, bo mnie żona zaraz wyrzuci z domu jak dłużej tu posiedzę :)

lordofhares.com

Kobejasi

Avatar: Kobejasi

2010-06-07 00:22

zmodyfikuj jeszcze plik pages-admin.php

znajdź funkcję savePages()

i gdzieś w środku np. nad tym kodem:


          $iStatus = isset( $aForm['aStatus'][$iPage] ) ? 1 : 0;



dodaj taki kod



          $aChange[$iPage]['sTooltip'] = $aForm['sTooltip'][$iPage];
          




w pliku pages.tpl pole input mam tak:


<input type="text" name="sTooltip[$aData[iPage]]" value="$aData[sTooltip]" class="inputr" size="20" />



sprawdzałem u siebie i działa. Domyślnie obrazki wrzucasz do głównego katalogu tam gdzie index.php. Oczywiście potem sobie do zmiennej rel="" dodasz odpowiednią ścieżkę do folderu z obrazkami.

Powodzenia ;-)

http://daniel.netlook.pl/works/quick.cms/demo1/

Cinek.ck

Avatar: Cinek.ck

2010-06-07 01:51

Działa super :) ślicznie dziękuję za pomoc jak i czas poświęcony.
Pozdrawiam :)

lordofhares.com

Cinek.ck

Avatar: Cinek.ck

2010-06-18 12:48

Witam,
odświeżę troszkę temat. Taka jeszcze sprawa z tym skryptem, że jak edytuję stronę do której mam przypisany " Tooltip " i potem ją zapiszę to znika ścieżka do obrazka wraz z opisem (tootip-u ) i muszę na nowo przypisywać ścieżkę do obrazka. Jest jakiś sposób żeby nie trzeba było za każdym razem po edycji strony przypisywać od nowa ścieżkę?

Jak nie edytuję strony to jest ok i jak zapisuję inne strony to ścieżki nie giną.

lordofhares.com

Do góry
o nas | kontakt