[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Компьютеры » Программирование » HTML » JavaScript заметки (заметки и фрагменты кода)
JavaScript заметки
АлексейДата: Воскресенье, 16.09.2018, 00:12 | Сообщение # 1
Продвигающийся
Группа: Администраторы
Сообщений: 318
Награды: 4
Репутация: 1
Статус: Оффлайн
Тема предназначена для общих заметок по JavaScript
 
АлексейДата: Воскресенье, 16.09.2018, 00:24 | Сообщение # 2
Продвигающийся
Группа: Администраторы
Сообщений: 318
Награды: 4
Репутация: 1
Статус: Оффлайн
Варианты реализации tooltip. В примере реализована два варианта tooltip. Первый вариант реализуется стандартными средствами html, второй средствами JS.


Код
<html>
<head>
   <style>
      .tooltip-ellipse
      {
         border: solid 1px black;
         height: 20px;
         width: 120px;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
      }
   </style>
</head>
<body>
   <br><br>
   <div class="tooltip-ellipse" id='item'>long text long text long text long text long text</div>
   <br>
   <div class="tooltip-ellipse" id='item2'>short text</div>
   <br>
   <button id="swap">swap</button>
   <button id="enab">title html enabled</button>
   
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <script>
   var isJs = false;
   function updatetip() {
      if (isJs) {
         $(".tooltip-ellipse").each(function() {
            var el = $(this);
            el.removeAttr('title');
         });
         $(document).on('mouseenter','.tooltip-ellipse',function() {
            var el = $(this);
            if (this.offsetWidth < this.scrollWidth)
               el.attr('title', el.text());
            else
               el.removeAttr('title');
         });
      } else {
         $(document).off('mouseenter','.tooltip-ellipse');
         $('.tooltip-ellipse').each(function() {
         var el = $(this);
         if (this.offsetWidth < this.scrollWidth)
            el.attr('title', el.text());
         else
            el.removeAttr('title');
         });
      }
   }
   updatetip();
   $(document).on("click","#swap",function(){
      var t1 = $("#item").text();
      var t2 = $("#item2").text();
      $("#item").text(t2);
      $("#item2").text(t1);
      if (isJs == false) {
            updatetip();
      }
   });
   $(document).on('click','#enab',function() {
      isJs = !isJs;
      updatetip();
   });
   </script>
</body>
</html>

Данный вопрос поднимался, когда встала задача о необходимо отображения tooltip через Vaadin. В результате оказалось, что в Vaadin нет возможности отображает всплывающую подсказку, когда часть содержимого элемента скрыто. По крайней мере решение на этот момент найти не удалось. Проблема актуальна до версии Vaddin 8, в более новых версиях решение возможно есть. В Vaadin элемент отвечающий за отображение tooltip находится на странице и найти его просто по коду:
Код
<div class="v-tooltip" role="tooltip" aria-live="assertive" aria-relevant="additions" style="margin-left: 0px; margin-top: 0px; left: -5000px; top: -5000px; z-index: 20001; visibility: visible; position: absolute; overflow: visible;"><div class="popupContent"><div style=""><div class="v-errormessage" aria-hidden="true" style="display: none;"><div class="gwt-HTML"> </div></div><div class="v-tooltip-text"></div></div></div></div>

Поэтому для решения проблема код из примера выше чуть чуть был переделан чтобы решать существующую задачу

Код
$(document).on('mouseenter','.tooltip-ellipse',function() {
   $('#v-tooltip-text').text($(this).text());
});
 
АлексейДата: Воскресенье, 16.09.2018, 00:41 | Сообщение # 3
Продвигающийся
Группа: Администраторы
Сообщений: 318
Награды: 4
Репутация: 1
Статус: Оффлайн
Занялся немного изучением Vue.js. Столкнулся с интересной задачей. Нужно было зациклить кое-что на странице, чтобы регулярно обновлялся текст. Сделал небольшой пример на времени и пока что-то получается не очень или даже пока вообще не получилось сделать это прямо внутри объекта Vue. На текущий момент неработающий код выглядит примерно так:


Код
<div id='app'>
Дата из метода - {{ getDateTime() }} <br/>
Дата из интервала -  {{ date.now() }} <br/>
Дата из watch - {{ date2 }}
</div>
<script>
var app = new Vue({
    el : '#app',
    data : {
  test1: 'test one',
  date : Date,
  date2 : Date.now()
    },
    methods : {
  getDateTime : function() {
   return this.date.now();
  }
    },
    watch : {
  date2 : function(oldValue,newValue) {
   this.date2 = Date.now();
  }
    }
});
app.date2 = Date.now()
</script>
 
Форум » Компьютеры » Программирование » HTML » JavaScript заметки (заметки и фрагменты кода)
  • Страница 1 из 1
  • 1
Поиск: