DVZ Shoutbox | Panel z emotikonami (clickable smileys)

**Divir** · (Ten post był ostatnio modyfikowany: 24.02.2018, 20:45 przez myCreedo.)

Clickable smileys czyli jak zrobić panel z klikalnymi uśmieszkami do DVZ Shoutbox. W przypadku posiadania niestandardowych emotek należy ręcznie zmienić kod odpowiedzialny za nie (czwarty kod licząc od góry).

1 Edycja szablonu głównego

Wejdź w: ACP -> Templates & Styles -> Templates -> Global Templates -> dvz_shoutbox i na samym dole dodaj kod, który będzie odpowiedzialny za dodanie emotki do pola tekstowego; to jest:

    <script>
        $('.smilie_dvz').click(function() {
            var smilie = $(this).attr("alt"),
                inputValue = $('#dvz_input').val();
            $('#dvz_input').val(inputValue + smilie);
        });
    </script> 

Czyli po kliknięciu w klasę smilie_dvz dodaj do zmiennej smilie wartość atrybutu alt klikniętej emotikony, a do drugiej zmiennej nazwanej inputValue dodaj tekst, który obecnie znajduje się w polu tekstowym. Następnie złap id dvz_input w celu nadania mu wartości z inputValue, a następnie klikniętej przez nas emotki.

2 Edycja szablonu panel

Wejdź w: ACP -> Templates & Styles -> Templates -> Global Templates -> dvz_shoutbox_panel i do tagu input, który służy do wprowadzania tekstu dodaj identyfikator dvz_input, aby wcześniej dodany przez nas kod jQuery mógł się do niego odnieść; czyli domyślny kod:

<input type="text" class="text" placeholder="{$lang->dvz_sb_default}" maxlength="{$maxlength}" autocomplete="off" /> 

zamień na:

<input type="text" id="dvz_input" class="text" placeholder="{$lang->dvz_sb_default}" maxlength="{$maxlength}" autocomplete="off" /> 

3 Dodanie box'a z emotikonami

Dobra, połowa sukcesu za nami. Teraz wystarczy dodać box w którym będą umieszczone nasze emotki.
W tym celu przechodzimy ponownie do szablonu dvz_shoutbox (oczywiście to tylko przykład, możemy to zrobić całkiem inaczej) i dodajemy nad naszym kodem .js ten kod:



<div id="smilies_box">

                <img src="{$theme['imgdir']}/smilies/smile.png" alt="" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/wink.png" alt="" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/cool.png" alt="" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/biggrin.png" alt="" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/tongue.png" alt="" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/rolleyes.png" alt="" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/shy.png" alt="" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/sad.png" alt=":sad:" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/at.png" alt=":at:" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/angel.png" alt=":angel:" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/angry.png" alt="" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/blush.png" alt="" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/confused.png" alt=":s" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/dodgy.png" alt=":dodgy:" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/exclamation.png" alt=":exclamation:" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/heart.png" alt="" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/huh.png" alt=":huh:" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/lightbulb.png" alt=":idea:" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/sleepy.png" alt="" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/undecided.png" alt=":-/" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/cry.png" alt=":cry:" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/sick.png" alt=":sick:" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/arrow.png" alt=":arrow:" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/my.png" alt=":my:" class="smilie_dvz clickable">

</div>

4 Zamiana kursora

Wszystko już działa, ale kursor wciąż pozostał domyślny po najechaniu na klikalną emotkę. Jak to zmienić?
Przechodzimy do global.css i dodajemy w nim:



#smilies_box .clickable { cursor: pointer }

Ok, a jak teraz je wyśrodkować?
Przechodzimy do global.css i dodajemy w nim:

#smilies_box { 

text-align: center; 

}

Przykładowy wygląd:

Nie spotkałem się jeszcze nigdzie z gotowym kodem do tego lub chociaż jakimś poradnikiem, więc proszę bardzo. :p

5 Dodatkowo: Inny wygląd

Pomiń punkt trzeci, przejdź do global.css, a w nim dodaj poniższy kod:

#smilies_modal {

  display: none;

  position: fixed;

  left: 0;

  top: 0;

  overflow: auto;

  z-index: 9999;

  background-color: rgba(0, 0, 0, 0.8);

  width: 100%;

  height: 100vh;

  padding-top: 25%;

}

#smilies_container {

  background-color: #333;

  padding: 10px 15px;

  border: 1px solid #666;

  border-radius: 3px;

  margin: 0 auto;

  width: 30%;

}

Przejdź do twojego stylu, a następnie do szablonu index. Na samym dole od razu nad </body> wstaw:

<div id="smilies_modal">
    <div id="smilies_container">
        <img src="{$theme['imgdir']}/smilies/smile.png" alt=":)" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/wink.png" alt=";)" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/cool.png" alt=":cool:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/biggrin.png" alt=":D" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/tongue.png" alt=":P" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/rolleyes.png" alt=":rolleyes:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/shy.png" alt=":shy:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/sad.png" alt=":sad:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/at.png" alt=":at:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/angel.png" alt=":angel:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/angry.png" alt=":angry:" class="smilie_dvz clickaable">
        <img src="{$theme['imgdir']}/smilies/blush.png" alt=":blush:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/confused.png" alt=":s" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/dodgy.png" alt=":dodgy:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/exclamation.png" alt=":exclamation:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/heart.png" alt=":heart:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/huh.png" alt=":huh:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/lightbulb.png" alt=":idea:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/sleepy.png" alt=":sleepy:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/undecided.png" alt=":-/" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/cry.png" alt=":cry:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/sick.png" alt=":sick:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/arrow.png" alt=":arrow:" class="smilie_dvz clickable">
        <img src="{$theme['imgdir']}/smilies/my.png" alt=":my:" class="smilie_dvz clickable">
    </div>
</div>

<script>
    $('.smilie_dvz').click(function() {
        var smilie = $(this).attr("alt"),
            inputValue = $('#dvz_input').val();
        $('#dvz_input').val(inputValue + smilie);
        $('#smilies_modal').css("display", "none");
    });
    $('#smilies_modal_open').click(function(event) {
        event.preventDefault();
        $('#smilies_modal').css("display", "block");
    });
</script> 

Ok, pozostało jedynie dodać link, dzięki któremu będziemy wywoływać nasz box. W tym celu udaj się do szablonów globalnych, dvz_shoutbox, wyszukaj:

<p class="right"><a href="{$mybb->settings['bburl']}/index.php?action=shoutbox_archive">&laquo; {$lang->dvz_sb_archivelink}</a></p> 

a następnie zamień to na:

<p class="right">
    <a href="{$mybb->settings['bburl']}/index.php?action=shoutbox_archive">&laquo; {$lang->dvz_sb_archivelink}</a>&nbsp;
    <a href="#" id="smilies_modal_open">&laquo; Emotki</a>
</p> 

Gotowe!

Podgląd:

http://prntscr.com/atsllv

**NiespecjalnieUzdolniony** · 18.04.2016, 00:12

Jo to bym zrobil wysuwany z prawej panel po nacisnieciu guziczka w headerze shoutboxa

**Snake_** · 18.04.2016, 12:13

A jeszcze bardziej estetyczną opcją byłby modal box.

Wysłane z mojego D2203 przy użyciu Tapatalka

**Divir** · 18.04.2016, 16:47

(18.04.2016, 00:12)NiespecjalnieUzdolniony napisał(a): Jo to bym zrobil wysuwany z prawej panel po nacisnieciu guziczka w headerze shoutboxa

Nie mam pojęcia jak ty to widzisz, wybacz.

(18.04.2016, 12:13)Snake_ napisał(a): A jeszcze bardziej estetyczną opcją byłby modal box.

Wysłane z mojego D2203 przy użyciu Tapatalka

Dzięki, dodano.

**Snake_** · 18.04.2016, 18:55

Wyrzuć jeszcze z kodów te [align..], potem będą pisać, że jakieś kody na forum widać i będzie w porządku.

**Divir** · 18.04.2016, 19:34

(18.04.2016, 18:55)Snake_ napisał(a): Wyrzuć jeszcze z kodów te [align..], potem będą pisać, że jakieś kody na forum widać i będzie w porządku.

Nie mam pojęcia skąd to się tam wzięło. O.o
Dzięki za informację.

**astranaar** · 19.04.2016, 19:11

dalo by sie ogarnac guziczek dzieki ktoremu mozna wylaczyc tego boxa?

**Divir** · 19.04.2016, 19:22

(19.04.2016, 19:11)astranaar napisał(a): dalo by sie ogarnac guziczek dzieki ktoremu mozna wylaczyc tego boxa?

<div id="smilies_modal">

    <div id="smilies_container">

        <span id="smilies_modal_close" style="float:right" class="clickable">X</span><br style="clear:both">

        <img src="{$theme['imgdir']}/smilies/smile.png" alt=":)" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/wink.png" alt=";)" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/cool.png" alt=":cool:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/biggrin.png" alt=":D" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/tongue.png" alt=":P" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/rolleyes.png" alt=":rolleyes:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/shy.png" alt=":shy:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/sad.png" alt=":sad:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/at.png" alt=":at:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/angel.png" alt=":angel:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/angry.png" alt=":angry:" class="smilie_dvz clickaable">

        <img src="{$theme['imgdir']}/smilies/blush.png" alt=":blush:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/confused.png" alt=":s" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/dodgy.png" alt=":dodgy:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/exclamation.png" alt=":exclamation:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/heart.png" alt=":heart:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/huh.png" alt=":huh:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/lightbulb.png" alt=":idea:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/sleepy.png" alt=":sleepy:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/undecided.png" alt=":-/" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/cry.png" alt=":cry:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/sick.png" alt=":sick:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/arrow.png" alt=":arrow:" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/my.png" alt=":my:" class="smilie_dvz clickable">

    </div>

</div>

<script>

    $('.smilie_dvz').click(function() {

        var smilie = $(this).attr("alt"),

            inputValue = $('#dvz_input').val();

        $('#dvz_input').val(inputValue + smilie);

        $('#smilies_modal').css("display", "none");

    });

    $('#smilies_modal_open').click(function(event) {

        event.preventDefault();

        $('#smilies_modal').css("display", "block");

    });

   $('#smilies_modal_close').click(function() {

       $('#smilies_modal').hide()

   });

</script>

http://prntscr.com/aua3xp

**NiespecjalnieUzdolniony**

@Divir
mówiłem o czymś co działa jak to menu http://tympanus.net/Tutorials/YouTubeLeftSideMenu/
na aplikacjach mobilnych często jest takie menu wysuwane z lewej, to myślałem o czymś takim.

Ale ta wersja od @Snake_ jest ładna

**Divir** · 19.04.2016, 19:46

(19.04.2016, 19:24)NiespecjalnieUzdolniony napisał(a): @Divir
mówiłem o czymś co działa jak to menu http://tympanus.net/Tutorials/YouTubeLeftSideMenu/
na aplikacjach mobilnych często jest takie menu wysuwane z lewej, to myślałem o czymś takim.

Ale ta wersja od @Snake_ jest ładna

Hmm, ciekawa opcja. Dodam coś na zasadzie wysuwanego panelu na weekendzie.
Dzięki.

**astranaar** · (Ten post był ostatnio modyfikowany: 21.04.2016, 20:34 przez astranaar.)

Pobawiłem się trochę i udało mi się uzyskać coś takiego: http://scr.hu/9v5z/zvhqr
Oczywiście panel jest wysuwany

A oto kod:
Szablony globalne - dvz_shoutbox - head:

<a href="#" class="smiles_box"><b>Emotki</b></a>

Następnie pod {$panel}:

<div class="wrapper">        

    <div class="smiles_preview">

        <img src="{$theme['imgdir']}/smilies/smile.png" alt=":)" class="smilie_dvz clickable">

        <img src="{$theme['imgdir']}/smilies/wink.png" alt=";)" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/cool.png" alt=":cool:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/biggrin.png" alt=":D" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/tongue.png" alt=":P" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/rolleyes.png" alt=":rolleyes:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/shy.png" alt=":shy:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/sad.png" alt=":sad:" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/at.png" alt=":at:" class="smilie_dvz clickable">

                <img src="{$theme['imgdir']}/smilies/angel.png" alt=":angel:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/angry.png" alt=":angry:" class="smilie_dvz clickaable">

            <img src="{$theme['imgdir']}/smilies/blush.png" alt=":blush:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/confused.png" alt=":s" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/dodgy.png" alt=":dodgy:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/exclamation.png" alt=":exclamation:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/heart.png" alt=":heart:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/huh.png" alt=":huh:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/lightbulb.png" alt=":idea:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/sleepy.png" alt=":sleepy:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/undecided.png" alt=":-/" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/cry.png" alt=":cry:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/sick.png" alt=":sick:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/arrow.png" alt=":arrow:" class="smilie_dvz clickable">

            <img src="{$theme['imgdir']}/smilies/my.png" alt=":my:" class="smilie_dvz clickable">

    </div>

</div>

i pod {$javascript}

<script>

    $('.smilie_dvz').click(function() {

        var smilie = $(this).attr("alt"),

            inputValue = $('#dvz_input').val();

        $('#dvz_input').val(inputValue + smilie);

    });

</script>

no i oczywiście css:

.smiles_preview:before,.smiles_preview:after {

    content:" ";

    display:table

}

.smiles_preview:after{

    clear:both

}

.smiles_preview {

    display: none;

    background: rgb(29, 29, 29);

    padding: 5px;

    text-align: center;

}

oraz headerinclude zaraz po {$stylesheets}

<script type="text/javascript">

$(document).ready(function(){    

    $(".smiles_box").click(function () {  

         $(".smiles_preview").slideToggle('fast');

         return false;

    }); 

});

</script>

mam nadzieje, ze sie przyda

**Jane** · 26.04.2016, 21:34

Witam, mam pewien problem z tym a mianowicie. Zrobiłam okienko z emotkami tak jak podał Pan @UP lecz gdy wysuwa się panel z emotkami nie widać obrazka do nich -> SS <- Czy mógłby ktoś mnie naprowadzić jak to naprawić?

**Divir** · 26.04.2016, 21:37

Podałaś złą ścieżkę do obrazków.

**gloverek** · (Ten post był ostatnio modyfikowany: 27.04.2016, 15:35 przez gloverek.)

Postaram się skrócić poradnik do kilku linii, w którym można wykorzystać funkcję MyBB odnośnie wyświetlanych emotek wraz z akcją onclick.

HTML
Dodajemy kod HTML, który wywoła funkcję modala emotek wbudowaną w MyBB (najlepiej bezpośrednio do szablonu dvz_shoutbox)

<a href="javascript:MyBB.popupWindow('/misc.php?action=smilies&amp;popup=true&amp;editor=dvz_shoutbox&amp;modal=1')">Okno z emotami</a>

Javascript
Edytujemy plik jscripts/dvz_shoutbox.js i do obiektu dvz_shoutbox dodajemy nową funkcję

insertText: function (emotion) {

 jQuery('#shoutbox input.text').val(jQuery('#shoutbox input.text').val() + emotion).focus();

    }

To w sumie byłoby wszystko, ale funkcja smilies w skrypcie MyBB pomija zmienną editor(będzie poprawione wraz z nową wersją MyBB 1.8.8)
Wczytujemy do notepad++ plik misc.php i wyszukujemy w nim fragmentu kodu

$onclick = " onclick=\"MyBBEditor.insertText(' $smilie_insert ');\"";

I zamieniamy go na

$onclick = " onclick=\"".$editor.".insertText(' $smilie_insert ');\"";

**Ksssa** · 29.06.2017, 22:52

http://planeta03.cba.pl/shoutbox.php#

Niestety emotki mi się nie wczytują. Nawet się też nie chowają... Ale przede wszystkim, nie chcą się pokazać. Choć jak już na nią klikniesz i wyślesz to jest. W ich "zbiorze" pojawiają sie tylko takie kwadraciki, oznaczające, że obraz nie chciał się wczytać.

Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

DVZ Shoutbox | Panel z emotikonami (clickable smileys)

Divir

1 Edycja szablonu głównego

2 Edycja szablonu panel

3 Dodanie box'a z emotikonami

4 Zamiana kursora

5 Dodatkowo: Inny wygląd

Informacje

Spis treści

NiespecjalnieUzdolniony

Snake_

Divir

Snake_

Divir

astranaar

Divir

NiespecjalnieUzdolniony

Divir

astranaar

Jane

Divir

gloverek

Ksssa

Użytkownicy przeglądający ten wątek:

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie