Бесплатный раздел

    Вы здесь: Главная страница » Файлы » Мини чат / Чат
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Новый вид для мини-чата (Прямой обмен сообщениями)

    Дата добавления: 14.03.2017 - 04:51
    Категория: Мини чат / Чат
    Добавил: Buger
    Количество просмотров: 3.5k
    Количество комментариев: 1
    Размер файла: 21.1 Kb
    Рейтинг материала: 5.0 / 12
    Новый вид для мини-чата (Прямой обмен сообщениями)
    БЕСПЛАТНО
    Демонстрация
    рейтинг 5.0
    /
    голосов 12
    Это реализация нового вида для мини-чата, а точнее его заготовка. Вы можете посмотреть его в живую в предоставленной демонстрации. Возможно, в дальнейшем мы его доработаем и адаптируем под готовую версию мини-чата для сайта. Пока что это просто демонстрация, но задумка, согласитесь, очень интересная.

    Давайте приступим к его демонстрационной установке.

    Подключим минимализированную версию библиотеки CSS стилей для скроллинга сообщений (jquery.mCustomScrollbar.min.css)
    Код
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.min.css'>


    Добавим HTML разметку нашего чата
    Код
    <div class="chat">
      <div class="chat-title">
      <h1>Buger</h1>
      <h2>Администратор</h2>
      <figure class="avatar">
      <img src="https://373480170.uid.me/avatar.jpg" /></figure>
      </div>
      <div class="messages">
      <div class="messages-content"></div>
      </div>
      <div class="message-box">
      <textarea type="text" class="message-input" placeholder="Введите сообщение..."></textarea>
      <button type="submit" class="message-submit">Отправить</button>
      </div>
    </div>


    Затем пропишем для него CSS стили
    Код
    <style type="text/css">
      *,
      *::before,
      *::after {
      box-sizing: border-box;
      }

      /* Chat
      --------------------*/
      .chat {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 300px;
      height: 80vh;
      max-height: 500px;
      z-index: 2;
      overflow: hidden;
      box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.5);
      border-radius: 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      }
       
      /* Chat Title
      --------------------*/
      .chat-title {
      -webkit-box-flex: 0;
      -ms-flex: 0 1 45px;
      flex: 0 1 45px;
      position: relative;
      z-index: 2;
      background: rgba(0, 0, 0, 0.2);
      color: #fff;
      text-transform: uppercase;
      text-align: left;
      padding: 10px 10px 10px 50px;
      }
       
      .chat-title h1,
      .chat-title h2 {
      font-weight: normal;
      font-size: 10px;
      margin: 0;
      padding: 0;
      }
       
      .chat-title h2 {
      color: rgba(255, 255, 255, 0.5);
      font-size: 8px;
      letter-spacing: 1px;
      }
       
      .chat-title .avatar {
      position: absolute;
      z-index: 1;
      top: 8px;
      left: 9px;
      border-radius: 30px;
      width: 30px;
      height: 30px;
      overflow: hidden;
      margin: 0;
      padding: 0;
      border: 2px solid rgba(255, 255, 255, 0.24);
      }
       
      .chat-title .avatar img {
      width: 100%;
      height: auto;
      }
       
      /* Messages
      --------------------*/
      .messages {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      color: rgba(255, 255, 255, 0.5);
      overflow: hidden;
      position: relative;
      width: 100%;
      }
       
      .messages .messages-content {
      position: absolute;
      top: 0;
      left: 0;
      height: 101%;
      width: 100%;
      }
       
      .messages .message {
      clear: both;
      float: left;
      padding: 6px 10px 7px;
      border-radius: 10px 10px 10px 0;
      background: rgba(0, 0, 0, 0.3);
      margin: 8px 0;
      font-size: 11px;
      line-height: 1.4;
      margin-left: 35px;
      position: relative;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      }
       
      .messages .message .timestamp {
      position: absolute;
      bottom: -15px;
      font-size: 9px;
      color: rgba(255, 255, 255, 0.3);
      }
       
      .messages .message::before {
      content: '';
      position: absolute;
      bottom: -6px;
      border-top: 6px solid rgba(0, 0, 0, 0.3);
      left: 0;
      border-right: 7px solid transparent;
      }
       
      .messages .message .avatar {
      position: absolute;
      z-index: 1;
      bottom: -15px;
      left: -35px;
      border-radius: 30px;
      width: 30px;
      height: 30px;
      overflow: hidden;
      margin: 0;
      padding: 0;
      border: 2px solid rgba(255, 255, 255, 0.24);
      }
       
      .messages .message .avatar img {
      width: 100%;
      height: auto;
      }
       
      .messages .message.message-personal {
      float: right;
      color: #fff;
      text-align: right;
      background: -webkit-linear-gradient(330deg, #248A52, #257287);
      background: linear-gradient(120deg, #248A52, #257287);
      border-radius: 10px 10px 0 10px;
      }
       
      .messages .message.message-personal::before {
      left: auto;
      right: 0;
      border-right: none;
      border-left: 5px solid transparent;
      border-top: 4px solid #257287;
      bottom: -4px;
      }
       
      .messages .message:last-child {
      margin-bottom: 30px;
      }
       
      .messages .message.new {
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-animation: bounce 500ms linear both;
      animation: bounce 500ms linear both;
      }
       
      .messages .message.loading::before {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      content: '';
      display: block;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      z-index: 2;
      margin-top: 4px;
      -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
      animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
      border: none;
      -webkit-animation-delay: .15s;
      animation-delay: .15s;
      }
       
      .messages .message.loading span {
      display: block;
      font-size: 0;
      width: 20px;
      height: 10px;
      position: relative;
      }
       
      .messages .message.loading span::before {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      content: '';
      display: block;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      z-index: 2;
      margin-top: 4px;
      -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
      animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
      margin-left: -7px;
      }
       
      .messages .message.loading span::after {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      content: '';
      display: block;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      z-index: 2;
      margin-top: 4px;
      -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
      animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
      margin-left: 7px;
      -webkit-animation-delay: .3s;
      animation-delay: .3s;
      }
       
      /* Message Box
      --------------------*/
      .message-box {
      -webkit-box-flex: 0;
      -ms-flex: 0 1 40px;
      flex: 0 1 40px;
      width: 100%;
      background: rgba(0, 0, 0, 0.3);
      padding: 10px;
      position: relative;
      }
       
      .message-box .message-input {
      background: none;
      border: none;
      outline: none !important;
      resize: none;
      color: rgba(255, 255, 255, 0.7);
      font-size: 11px;
      height: 17px;
      margin: 0;
      padding-right: 20px;
      width: 265px;
      }
       
      .message-box textarea:focus:-webkit-placeholder {
      color: transparent;
      }
       
      .message-box .message-submit {
      position: absolute;
      z-index: 1;
      top: 9px;
      right: 10px;
      color: #fff;
      border: none;
      background: #248A52;
      font-size: 10px;
      text-transform: uppercase;
      line-height: 1;
      padding: 6px 10px;
      border-radius: 10px;
      outline: none !important;
      -webkit-transition: background .2s ease;
      transition: background .2s ease;
      }
       
      .message-box .message-submit:hover {
      background: #1D7745;
      }
       
      /* Custom Srollbar
      --------------------*/
      .mCSB_scrollTools {
      margin: 1px -3px 1px 0;
      opacity: 0;
      }
       
      .mCSB_inside > .mCSB_container {
      margin-right: 0px;
      padding: 0 10px;
      }
       
      .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
      background-color: rgba(0, 0, 0, 0.5) !important;
      }
       
      /* Bounce
      --------------------*/
      @-webkit-keyframes bounce {
      0% {
      -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      4.7% {
      -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      9.41% {
      -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      14.11% {
      -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      18.72% {
      -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      24.32% {
      -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      29.93% {
      -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      35.54% {
      -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      41.04% {
      -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      52.15% {
      -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      63.26% {
      -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      85.49% {
      -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      100% {
      -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      }
       
      @keyframes bounce {
      0% {
      -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      4.7% {
      -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      9.41% {
      -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      14.11% {
      -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      18.72% {
      -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      24.32% {
      -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      29.93% {
      -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      35.54% {
      -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      41.04% {
      -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      52.15% {
      -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      63.26% {
      -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      85.49% {
      -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      100% {
      -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      }
       
      @-webkit-keyframes ball {
      from {
      -webkit-transform: translateY(0) scaleY(0.8);
      transform: translateY(0) scaleY(0.8);
      }
      to {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      }
      }
       
      @keyframes ball {
      from {
      -webkit-transform: translateY(0) scaleY(0.8);
      transform: translateY(0) scaleY(0.8);
      }
      to {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      }
      }
    </style>


    Теперь нам необходимо подключить плагины, jQuery и mCustomScrollbar отвечающий за скроллинг сообщений в чате.
    Код
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.concat.min.js'></script>


    Ну и в завершении, подключаем сам js обработчик нашего мини-чата
    Код
    <script>
      var $messages = $('.messages-content'),
      d, h, m,
      i = 0;

      $(window).load(function () {
      $messages.mCustomScrollbar();
      setTimeout(function () {
      fakeMessage();
      }, 100);
      });

      function updateScrollbar() {
      $messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', {
      scrollInertia: 10,
      timeout: 0
      });
      }

      function setDate() {
      d = new Date()
      if (m != d.getMinutes()) {
      m = d.getMinutes();
      $('<div class="timestamp">' + d.getHours() + ':' + m + '</div>').appendTo($('.message:last'));
      }
      }

      function insertMessage() {
      msg = $('.message-input').val();
      if ($.trim(msg) == '') {
      return false;
      }
      $('<div class="message message-personal">' + msg + '</div>').appendTo($('.mCSB_container')).addClass('new');
      setDate();
      $('.message-input').val(null);
      updateScrollbar();
      setTimeout(function () {
      fakeMessage();
      }, 1000 + (Math.random() * 20) * 100);
      }

      $('.message-submit').click(function () {
      insertMessage();
      });

      $(window).on('keydown', function (e) {
      if (e.which == 13) {
      insertMessage();
      return false;
      }
      })

      var Fake = [
      'Здравствуйте, я Buger - руководитель интернет-магазина ART-UCOZ.RU, а вы?',
      'Очень приятно!',
      'Как ваши дела? Как настроение?',
      'Чем вы занимаетесь?',
      'Это потрясающе',
      'ART-UCOZ - отличный интернет-магазин',
      'Я думаю вам понравится здесь',
      'Почему вы так думаете?',
      'Извините, мне нужно отлучиться не на долгое время',
      'Было приятно пообщаться с вами',
      'Буду рад видеть вас здесь снова',
      'До свидания!',
      ':)'
    ]

      function fakeMessage() {
      if ($('.message-input').val() != '') {
      return false;
      }
      $('<div class="message loading new"><figure class="avatar"><img src="https://373480170.uid.me/avatar.jpg" /></figure><span></span></div>').appendTo($('.mCSB_container'));
      updateScrollbar();
       
      setTimeout(function () {
      $('.message.loading').remove();
      $('<div class="message new"><figure class="avatar"><img src="https://373480170.uid.me/avatar.jpg" /></figure>' + Fake[i] + '</div>').appendTo($('.mCSB_container')).addClass('new');
      setDate();
      updateScrollbar();
      i++;
      }, 1000 + (Math.random() * 20) * 100);
       
      }
    </script>


    Источник: http://art-ucoz.ru/
    anubis
    Ждем доработку :)
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: