Наведите курсор на обрезанное поле для просмотра полного текста?


8

У меня есть текстовое поле в таблице представлений, в котором я использую результаты перезаписи -> Обрезать это поле до максимальной длины с включенным параметром многоточия. Возможно ли это и как, чтобы при наведении курсора на этот обрезанный текст я получал полную версию в виде всплывающего окна или чтобы представление обновлялось и отображало полный текст?

Ответы:


10

Ненавижу отвечать на мой вопрос о награде, но это работает именно так, как я хочу.

Я нашел отличный способ сделать это с помощью модуля beautytips. Мое поле - это адрес (field_address). Добавьте field_address к представлениям и выполните перезапись-> обрезку с помощью многоточия, НО исключить из отображения. Снова добавьте то же поле на этот раз, переписав вывод поля с помощью:

<div class="beautytips" title="[field_address_1]">[field_address]</div>

(У меня есть "Добавить beautytips js на каждую страницу" в настройках beautytips)

+1 ответ Жилевана, который также является очень хорошим решением, но, к сожалению, не хватает опции отката / свертки / закрытия, что означало бы очень длинные таблицы с несколькими открытыми чтениями!


7

Я предлагаю Rewrite resultsпоместить ваш результат в HTML-элемент, например, <div>или <span>, укажите его с помощью idили class. и после этого используйте плагин Jquery Readmore .

Эти примеры могут быть полезны для использования плагина jquery readmore


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

вау, +25 репутации. Вы замечательные 7 чудес. Спасибо.
Юсефери

1

Я бы сказал, чтобы сделать это с JS. Это намного проще и все равно сделает работу.

шаги:

  1. Выведите полное поле в представлении
  2. Обрезать его при загрузке страницы; клонировать оригинальное полное описание в отдельный контейнер и присвоить ему специальный класс или идентификатор
  3. Добавьте многоточие в конце и добавьте функцию при наведении / клике
  4. После того, как пользователь нажмет / наведет курсор, покажите клонированное описание во всплывающем окне (если оно больше текста и нарушит макет)

В зависимости от ваших потребностей, вместо этого вы можете обернуть лишние символы в промежуток и скрыть их. Как только вы нажмете многоточие, вы можете просто применить другой класс к диапазону и показать его.


1
(function($) {
    Drupal.behaviors.expalain_popup = {
      attach:function() {
        jQuery('a.open_popup_link').click(function(){
          var node_id = jQuery(this).attr('data-value');
          window.open('/open_popup/node/'+node_id, 'Explain '+node_id,'width=450,height=600,resizable=1,scrollbars=1,toolbar=0,location=0');
        });
    }
  };
}(jQuery));

Этот код может помочь вам в достижении вашей цели.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.