Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.05.2018, 21:19
Аспирант
Отправить личное сообщение для kiberchainik Посмотреть профиль Найти все сообщения от kiberchainik
 
Регистрация: 19.02.2015
Сообщений: 43

блоки сообщений как в вк
я сделал такую вот небольшую ленту с двумя пользователями: html
<div class="msg_block">
       <div class="users_msg_block">
            <a data-triger="user1" class="new_msg_user"><img src="/images/icons/users/consultation.png" alt="" title="" /></a>
            <a data-triger="user2" class="new_msg_user"><img src="/images/icons/users/consultation.png" alt="" title="" /></a>
       </div>
       <div class="msg_bnt_active">
            <a><i class="fa fa-comments-o"></i></a>
       </div>
</div>


теперь вопрос в том как сделать чтоб при клике на юзера открывался блок диалога с этим юзером, а при нажатии на msg_bnt_active показывался и скрывался список этих пользователей.

блок который будет открываться и закрываться вот:
<div class="msg_box">
                <div class="msg_box_header">
                    <div><h5>User 1</h5></div>
                    <div><a><i class="fa fa-times"></i></a></div>
                </div>
                <div class="msg_box_wrapper">
                dialog...
                </div>
                <div class="msg_box_footer">
                <input type="text" name="send_message" />
                </div>
            </div>


для каждого пользователя должен открываться свой блок с диалогом

Последний раз редактировалось kiberchainik, 27.05.2018 в 21:48. Причина: добавление блока который должен запускаться при клике
Ответить с цитированием
  #2 (permalink)  
Старый 27.05.2018, 21:24
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,342

а где этот блок диалога?
Ответить с цитированием
  #3 (permalink)  
Старый 27.05.2018, 21:44
Аспирант
Отправить личное сообщение для kiberchainik Посмотреть профиль Найти все сообщения от kiberchainik
 
Регистрация: 19.02.2015
Сообщений: 43

например вот
<div class="msg_box">
                <div class="msg_box_header">
                    <div><h5>User 1</h5></div>
                    <div><a><i class="fa fa-times"></i></a></div>
                </div>
                <div class="msg_box_wrapper">
                dialog...
                </div>
                <div class="msg_box_footer">
                <input type="text" name="send_message" />
                </div>
            </div>
Ответить с цитированием
  #4 (permalink)  
Старый 27.05.2018, 21:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,500

очередная "открывашка"
Ответить с цитированием
  #5 (permalink)  
Старый 27.05.2018, 22:06
Аспирант
Отправить личное сообщение для kiberchainik Посмотреть профиль Найти все сообщения от kiberchainik
 
Регистрация: 19.02.2015
Сообщений: 43

уважаемый Профессор, именно да, именно так, именно
Цитата:
очередная "открывашка"
если Вы действительно Профессор и Вам не сложно то помогите с вопросом! спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 27.05.2018, 22:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,500

kiberchainik,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .hide {
       display: none;
   }

  </style>

  <script>
 document.addEventListener('DOMContentLoaded', function() {
 function show(elem) {
        return function(event) {
    event.preventDefault();
    elem.classList.toggle("hide")
  }
     };
 var a = document.querySelectorAll('[data-triger]'), b = document.querySelectorAll('.msg_box');
 [].forEach.call(a, function(node, i) {
    node.addEventListener("click", show(b[i]))
 });
var elem = document.querySelector(".users_msg_block");
document.querySelector(".msg_bnt_active").addEventListener("click", show(elem))

 });
</script>
</head>

<body>
<div class="msg_block">
       <div class="users_msg_block">
            <a data-triger="user1" class="new_msg_user"><img src="/images/icons/users/consultation.png" alt="" title="" /></a>
            <a data-triger="user2" class="new_msg_user"><img src="/images/icons/users/consultation.png" alt="" title="" /></a>
       </div>
       <div class="msg_bnt_active">
            <a><i class="fa fa-comments-o">user</i></a>
       </div>
</div>
<div class="msg_box">
                <div class="msg_box_header">
                    <div><h5>User 1</h5></div>
                    <div><a><i class="fa fa-times"></i></a></div>
                </div>
                <div class="msg_box_wrapper">
                dialog...
                </div>
                <div class="msg_box_footer">
                <input type="text" name="send_message" />
                </div>
            </div>
<div class="msg_box">
                <div class="msg_box_header">
                    <div><h5>User 2</h5></div>
                    <div><a><i class="fa fa-times"></i></a></div>
                </div>
                <div class="msg_box_wrapper">
                dialog...
                </div>
                <div class="msg_box_footer">
                <input type="text" name="send_message" />
                </div>
            </div>

</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Аддон для Firefox как парсить конкретную страницу ? Torero Firefox/Mozilla 16 26.09.2013 20:02
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 13:25
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 19:48
Как сделать как в JQ? faforty Общие вопросы Javascript 8 13.11.2011 23:35
Подскажите как правильно оформить код frolvict Общие вопросы Javascript 4 30.04.2010 09:51