Dymek vTip
Ten BBCode pozwala na wyświetlenie dymku, np z podpowiedzią. Gdy kursor myszki zostanie ustawiony nad znakami umieszczonymi w tagu BBCode'a, pojawi się informacja dodana przez użytkownika w odpowiednim miejscu. Forma BBCode'a pozwala na kolorowanie tekstu wyświetlanego w poście, jak również tekstu w dymku. Jest również możliwość określenia szerokości dymku (w pikselach). Po usunięciu kursora myszy z obszaru działania BBCode'a, ramka z dymkiem automatycznie znika.

Autor: all4phone
Wersja: 0.1.0
Kompatybilność: 3.0.8
Poziom trudności instalacji: Łatwa
Czas instalacji: ~5 minut
phpBB: link do tematu na phpbb.com

Notatki autora:
Obecna wersja instalacyjna jest przystosowana dla stylu prosilver. Edycja plików zawartych w paczce, pozwala na dokonanie wielu innych zmian w sposobie wyświetlania dymku, np: zmiana koloru tła, zmiana koloru obramowania, zmiana pozycji względem kursora, itp.
Kopiowanie plików precyzuje instrukcja install.xml, która znajduje się w załączniku.



Demo:N/A

Dołączone pliki:
vtip_arrow.png
jquery.js
vtip.js
vtip.css
install.xml

Screen:

Kliknij obrazek, aby powiększyć

Download:





Autor postu otrzymał pochwałę

Szczerze mówiąc ten bbcode mógłby zostać stworzony, aby nie wymagać dodatkowych plików, ale ty go stworzyłeś więc się nie wtrącam

No, sporo kodu by trzeba władować do BBCode'a

tanner napisał(a):Szczerze mówiąc ten bbcode mógłby zostać stworzony, aby nie wymagać dodatkowych plików, ale ty go stworzyłeś więc się nie wtrącam

A mógłbym prosić o to ? Na forum które obsługuję, polscy admini nie mają dostępu do tych plików, ani zakładki style

Proszę bardzo (testowane, działa na 100%)

Sposób użycia BBCode’a:

Kod: Zaznacz cały

[chmurka={INTTEXT},{NUMBER},{COLOR1}]{TEXT},{COLOR2}[/chmurka]

Kod HTML: UWAGA! Ze względu na obszerność skryptu, musisz sam wstawić cały kod z pliku jquery.js, tak gdzie wskazałem. Reszta jest gotowa.

Kod: Zaznacz cały

<script type="text/javascript"> TUTAJ WSTAW KOD Z PLIKU "jquery.js" </script>

<script type="text/javascript">/**
Vertigo Tip by www.vertigo-project.com
Requires jQuery
*/

this.vtip = function() {   
    this.xOffset = -10; // x distance from mouse
    this.yOffset = 10; // y distance from mouse       
   
    $(".vtip").unbind().hover(   
        function(e) {
            this.t = this.title;
            this.title = '';
            this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
           
            $('body').append( '<p id="vtip"><img id="vtipArrow" />' + this.t + '</p>' );
                       
            $('p#vtip #vtipArrow').attr("src", 'images/vtip_arrow.png');
            $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
           
        },
        function() {
            this.title = this.t;
            $("p#vtip").fadeOut("slow").remove();
        }
    ).mousemove(
        function(e) {
            this.top = (e.pageY + yOffset);
            this.left = (e.pageX + xOffset);
                         
            $("p#vtip").css("top", this.top+"px").css("left", this.left+"px");
        }
    );           
   
};

jQuery(document).ready(function($){vtip();}) </script>
<style type="text/css">
p#vtip {width:{NUMBER}px; color:{COLOR1};
display: none;
position: absolute;
padding: 10px;
left: 5px;
font-size: 12px;
background-color: white;
border: 1px dashed #a6c9e2;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 9999}
p#vtip #vtipArrow {
position: absolute;
top: -10px;
left: 5px }
</style>
<span class="vtip" title="{INTTEXT}" style="color:{COLOR2}">{TEXT}</span>

Linia informacyjna:

Kod: Zaznacz cały

Informacja: [chmurka=tekst dymka,liczba pikseli szerokości dymka,kolor tekstu w dymku]tekst w poście,kolor tekstu w poście[/chmurka]


Przykład:

Kod: Zaznacz cały

[chmurka=czytaj tekst dymka,200,green]informacja,red[/chmurka]

Dzięki, działa Musiałem tylko umieścić obrazek na innym serwerze i tu zmienić sobie ścieżkę. Przy okazji, identycznie wstawiłem bibliotekę z tego przykładu i też fajnie działa