Jump to content

Archived

This topic is now archived and is closed to further replies.

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>

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.