JavaScript заметки

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

JavaScript заметки (заметки и фрагменты кода)

JavaScript заметки

Алексей

Дата: Воскресенье, 16.09.2018, 00:12 | Сообщение # 1

Продвигающийся

Группа: Администраторы

Сообщений: 324

Награды: 4

Репутация: 1

Статус: Оффлайн

Тема предназначена для общих заметок по JavaScript

Алексей

Дата: Воскресенье, 16.09.2018, 00:24 | Сообщение # 2

Продвигающийся

Группа: Администраторы

Сообщений: 324

Награды: 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 находится на странице и найти его просто по коду:

Код

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

Код

$(document).on('mouseenter','.tooltip-ellipse',function() {
$('#v-tooltip-text').text($(this).text());
});

Алексей

Дата: Воскресенье, 16.09.2018, 00:41 | Сообщение # 3

Продвигающийся

Группа: Администраторы

Сообщений: 324

Награды: 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>

JavaScript заметки (заметки и фрагменты кода)

Страница 1 из 1
1