Форум

SLameN · #1 (**permalink**) 14.04.2014, 19:49

При нажатии на картинку, открывается блок со смайлами.

<img src="tmpl/img/smile/smile.png" id="smilesBtn" alt="Смайлы" title="Добавить смайл">
                <div id="smiles">
        			<span>
                        <img class="smile" src="tmpl/img/smile/1.gif" alt=":)">
        			</span>

#smiles {
    display: none;
    position: absolute;
    width: 550px;
    border: 1px solid #eee;
}

Что бы хотелось:
1. При нажатии на картинку (smile.png) открывается div smiles
2. Если div smiles открыт, то при нажатии на картинку (smile.png) скрывается div smiles
3. При нажатии на картинку в div - smiles, скрывается
4. Если кликнуть в другом месте экрана, div smiles скрывается

Сейчас работает, но куча лишнего кода (много вырезал из другого проекта) и не работает пункт №4. Помогите с данным вопросом

<script type="text/javascript" src="jquery.js"></script>
$(document).ready(function () {

    var smiles = $("#smiles");
    var inputEl = $("#chatInp");
    var smilesBtn = $("#smilesBtn");

    $("#smiles span").click(function () {
        var shortCode = $.emotions.shortcode($(this).attr("title"));
        inputEl.val(inputEl.val() + " " + shortCode + " ");
        smiles.toggle();
        inputEl.focus();
    });

    $("#smilesBtn").click(function () {
        smiles.toggle();
    });
});
(function ($) {

    $.emotions = function (text) {
        return $.emotions.parse(text);
    };

    var $t = $.emotions;

    $.extend($.emotions, {

        settings: {
            replacement: '<span title="{eId}" class="emotions emo-{eId}"></span>',
        },
        shortcode: function(eId){
            var $s = $t.settings;
            for (var pattern in $s.map) {
                if($s.map[pattern] == eId)
                    return pattern;
            }
            return "";
        },
    });

    $.fn.emotions = function (action, options) {
        this.each(function () {
            var el = $(this);
            el.html($.emotions(el.html()));
        });
    };
})(jQuery);

рони · #2 (**permalink**) 14.04.2014, 20:58

SLameN,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #smiles {
    display: none;
    position: absolute;
    width: 550px;
    border: 1px solid #eee;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function () {
       $("#smilesBtn").on("click", function (event) {
           event.stopPropagation()
           $("#smiles").slideToggle(800);
       });
       $(document).on("click", function (event) {
           if ($("#smiles").has(event.target).length) {

               $("#chatInp").val(event.target.alt); //тут ваш код обработки клика по смайлу
           }

           $("#smiles").slideUp(500);

       });

   })
  </script>
</head>

<body>
 <input id="chatInp" name="" size="50"><br>
 <img src="http://javascript.ru/forum/images/smilies/victory.gif" id="smilesBtn" alt="Смайлы" title="Добавить смайл">
                <div id="smiles">
        			<span>
                        <img class="smile" src="http://javascript.ru/forum/images/smilies/dance3.gif" alt=":)">
        			</span>

</div>

</body>

</html>

SLameN · #3 (**permalink**) 14.04.2014, 21:10

Большое спасибо! Скажите, пожалуйста еще такой момент:
Может объединить все в 1 функцию? Вот, что еще есть:

<script type="text/javascript">
    $(document).ready(function(){
            $(".smile").click(function(){
            var smile = $(this).attr('alt');
            var text_comment = $.trim($("#text_comment").val());
            $("#text_comment").focus().val(text_comment + ' ' + smile + ' ');
        });
    });
</script>

Я пробовал вставлять в код, который вы написали - //тут ваш код обработки клика по смайлу, но в textarea будет - undefined. Или не нужно заморачиваться и оставить все как есть?

P.S. Не заметил, что у вас тоже работает клик по смайлу, только мне нужно получить не url, a alt, это возможно?
P.S.S. Поменял сам, большое вам спасибо, отдельно за юмор со смайлами

рони · #4 (**permalink**) 14.04.2014, 21:20

SLameN,замените 27 строку на этот код -- посмотрите там как можно получить alt

var smile = $(event.target).attr('alt');
            var text_comment = $.trim($("#text_comment").val());
            $("#text_comment").focus().val(text_comment + ' ' + smile + ' ');

SLameN · #5 (**permalink**) 14.04.2014, 21:23

Блин, простите за наглость, но есть нюанс, например я хочу поставить 2 смайла подряд, а он затирает предыдущую запись. Или например: поставить смайл, потом текст, смайл и текст

И пробелы сделать, как в примере:

$("#text_comment").focus().val(text_comment + ' ' + smile + ' ');

Все пинаю себя начать изучать JS... Простите еще раз за наглость

рони · #6 (**permalink**) 14.04.2014, 21:24

SLameN,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #smiles {
    display: none;
    position: absolute;
    width: 550px;
    border: 1px solid #eee;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function () {
       $("#smilesBtn").on("click", function (event) {
           event.stopPropagation()
           $("#smiles").slideToggle(800);
       });
       $(document).on("click", function (event) {
           if ($("#smiles").has(event.target).length) {
               var smile = event.target.alt;
               var text_comment = $.trim($("#text_comment").val());
               $("#text_comment").focus().val(text_comment + ' ' + smile + ' ');
           }

           $("#smiles").slideUp(500);

       });

   })
  </script>
</head>

<body>   <textarea id="text_comment"></textarea>
<br>
 <img src="http://javascript.ru/forum/images/smilies/victory.gif" id="smilesBtn" alt="Смайлы" title="Добавить смайл">
                <div id="smiles">
        			<span>
                        <img class="smile" src="http://javascript.ru/forum/images/smilies/dance3.gif" alt=":)">
        			</span>

</div>

</body>

</html>

SLameN · #7 (**permalink**) 14.04.2014, 21:27

Огромное спасибо! :смайлик с пивом:

Форум

Справочник

Discord чат

Курсы javascript