Passar o mouse sobre um campo de vistas cortadas para obter texto completo?


8

Eu tenho um campo de texto em uma tabela de visualizações em que uso a opção Reescrever resultados -> Cortar esse campo para um comprimento máximo com a opção de reticências ativada. É possível e como, para que, quando passe o mouse sobre o texto cortado, receba a versão completa em pop-up ou que a exibição seja atualizada para mostrar o texto completo?

Respostas:


10

Odeio responder minha própria pergunta sobre recompensa, mas isso funciona exatamente como eu quero.

Encontrei uma ótima maneira de fazer isso com o módulo beautytips. Meu campo é um endereço (endereço_campo). Adicione campo_address às ​​visualizações e reescreva-> aparar com reticências, MAS excluir da exibição. Adicione o mesmo campo novamente desta vez reescrevendo a saída do campo com:

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

(Eu tenho "Adicionar js de dicas de beleza a todas as páginas" ativado nas configurações de dicas de beleza)

+1 na resposta de zhilevan, que também é uma solução muito boa, mas infelizmente está faltando a opção rollback / rollup / close, o que significaria tabelas muito longas com poucos costumes de leitura abertos!


7

Sugiro em Rewrite resultscolocar seu resultado em um elemento html como <div>or <span>, especifique-o com a idou class. e depois use o Jquery Readmore Plugin .

Este amostras talvez úteis para a utilização do jQuery readmore plug-in


Eu acho que seria ótimo, mas como o primeiro comentário diz no primeiro link, ele também precisa ser revertido, principalmente porque está em uma tabela.
7wonders

uau, + 25 reputação. vocês são ótimas 7 maravilhas. Obrigado.
Yusef

1

Eu diria para fazer isso com JS. É muito mais fácil e ainda fará o trabalho.

Passos:

  1. Saída do campo completo na visualização
  2. Corte-o no carregamento da página; clone a descrição completa original em um contêiner separado e forneça uma classe ou ID especial
  3. Adicione uma elipse no final e anexe uma função ao passar o mouse / clicar
  4. Depois que o usuário clicar / passar o mouse, mostre a descrição clonada em um pop-up (se houver mais texto e interromper o layout)

Dependendo das suas necessidades, em vez disso, você pode agrupar os caracteres em excesso em um espaço e ocultá-los. Depois de clicar em reticências, você pode aplicar outra classe ao intervalo e mostrá-lo.


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));

Esse código pode ajudá-lo a alcançar seu objetivo.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.