Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rodolfo TI

Estrutura de repetição para itens de um popOver

Recommended Posts

To trabalhando num popover para mostra um texto grande que não ficaria bom em um item de uma lista

 

só que preciso repetir as clausulas dele pra que existam várias classes o script

@foreach (var item in Model)
{
    <script type="text/javascript">
    $(document).ready(function () {
        $('#@Html.DisplayFor(modelItem => item.Id)').popover({
            html: true,
            placement: 'top',
            title: 'Full URL <a class="close" href="#");">×</a>',
            content: '<div class="msg"><p class="text"> @Html.DisplayFor(modelItem => item.Url) <p></div>',
        });

        $('#@Html.DisplayFor(modelItem => item.Id)').click(function (e) {
                e.stopPropagation();
            });

            $(document).click(function (e) {
               if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
                    $('#@Html.DisplayFor(modelItem => item.Id)').popover('hide');
            }
        });


    });


    </script>
}

Então, sei que poder ser por causa do " $(document).ready" mas se colocar dentro do código o for each não funciona, alguém tem alguma idéia ?

 

Segui mais ou menos o que faz o bootstrap

 

http://getbootstrap.com/javascript/#popovers

 

Só que não funciona, debuguei mas ele não aparece o popover

 

 

Chamo pela seguinte tag:

button id="@Html.DisplayFor(modelItem => item.Id)" class="popoverThis btn btn-sm btn-default">FullURL</button>

Compartilhar este post


Link para o post
Compartilhar em outros sites

O Popover tem um estilo dinâmico que funciona assim, ele se aplica automaticamente quando encontra um elemento com a classe marcada.

 

Por exemplo, se você tiver um elemento com "rel='popover'", vou mandar a documentação e você pode dar uma olhada.

 

http://getbootstrap.com/javascript/#popovers

 

Preste atenção na propriedade selector. Este abaixo é o exemplo prático que ele dá:

 

http://jsfiddle.net/fScua/

 

Basicamente o que você precisa é colocar todos os elemento que vão receber o popover, digamos uma <td>, com o atributo de sua escolha.

Compartilhar este post


Link para o post
Compartilhar em outros sites

O Popover tem um estilo dinâmico que funciona assim, ele se aplica automaticamente quando encontra um elemento com a classe marcada.

 

Por exemplo, se você tiver um elemento com "rel='popover'", vou mandar a documentação e você pode dar uma olhada.

 

http://getbootstrap.com/javascript/#popovers

 

Preste atenção na propriedade selector. Este abaixo é o exemplo prático que ele dá:

 

http://jsfiddle.net/fScua/

 

Basicamente o que você precisa é colocar todos os elemento que vão receber o popover, digamos uma <td>, com o atributo de sua escolha.

Excelente resposta, eu estava usando uma classe separada para o popover, praticamente reinventando a roda, foi uma melhor decisão usar o do bootstrap, obrigado pela dica.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.