2012-07-25 37 views
6

aquí está el código HTML para el enlace, es decir .:cambiar el título de un popover con arranque y jQuery

<a href="javascript:void(0);" style="font-size: 3em; color: #222" class="popover-test" id="directNavPrev" data-title="Previous Result Row" data-content="Previous Result Row"> 
&laquo;</a> 

sí, yo estoy llamando .popover() para inicializar y la popover funciona bien. Puedo obtener el contenido para actualizar sin problemas. simplemente no es el título. Probé "prev.data ('título', 'título nuevo')" e incluso intenté reiniciar "prev.popover ({título: 'título nuevo'});" sin dados ... gracias.

function SetDirectNavigationPlaceholder() { 
    //debugger; 
    var item = $("#movementType :selected").val(); 
    var direct = $('#directNavigation'); 
    var prev = $('#directNavPrev'); 
    var next = $('#directNavNext'); 
    switch (item) { 
     case "result": 
      $('#bookTypeSection').addClass('hide'); 
      direct.val('Result Row from 1 - 150'); 
      prev.attr('data-title', "Previous Result Row"); 
      next.attr('data-title', "Next Result Row"); 
      prev.attr('data-content', "Check it! this will contain the information for the previous result<table><tr><td>blah</td><td>blah</td></tr><tr><td>blah</td><td>blah</td></tr><tr><td>blah</td><td>blah</td></tr><tr><td>blah</td><td>blah</td></tr></table>"); 
      next.attr('data-content', "Check it! this will contain the information for the next result<table><tr><td>blah</td><td>blah</td></tr></table>"); 
      break; 
     case "instrument": 
      $('#bookTypeSection').addClass('hide'); 
      direct.val('Instrument #'); 
      prev.attr('data-title', "Previous Instrument #"); 
      next.attr('data-title', "Next Instrument #"); 
      prev.attr('data-content', "Check it! this will contain the information for the previous <b>instrument</b><table><tr><td>blah</td><td>blah</td></tr></table>"); 
      next.attr('data-content', "Check it! this will contain the information for the next <b>instrument</b><table><tr><td>blah</td><td>blah</td></tr></table>"); 
      break; 
     case "bookpage": 
      $('#bookTypeSection').removeClass('hide'); 
      direct.val('Book/Page'); 
      prev.attr('data-title', "Previous Book/Page"); 
      next.attr('data-title', "Next Book/Page"); 
      prev.attr('data-content', "Check it! this will contain the information for the previous <b>book/page</b><table><tr><td>blah</td><td>blah</td></tr></table>"); 
      next.attr('data-content', "Check it! this will contain the information for the next <b>book/page</b><table><tr><td>blah</td><td>blah</td></tr></table>"); 
      break; 
    } 
    direct.css('color', '#aaa').not('#directNavigationHeader'); 
} 

Respuesta

1

Considere que el gato de piel!

Aquí está el acuerdo. Parece que en el archivo bootstrap.js no hay ningún método para getTitle() aunque esté llamando. Así que lo agregué. Disfrutar.

/* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js 
========================================== */ 

Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, { 
    constructor: Popover, setContent: function() { 
    //debugger; 

    var $tip = this.tip() 
    , title = this.getTitle() // didn't exist 
    , content = this.getContent() 

    $tip.find('.popover-title')[this.isHTML(title) ? 'html' : 'text'](title) 
    $tip.find('.popover-content > *')[this.isHTML(content) ? 'html' : 'text'](content) 

    $tip.removeClass('fade top bottom left right in') 
} 

, hasContent: function() { 
    return this.getTitle() || this.getContent() 
} 

, getContent: function() { 
    var content 
    , $e = this.$element 
    , o = this.options 

    content = $e.attr('data-content') 
    || (typeof o.content == 'function' ? o.content.call($e[0]) : o.content) 

    return content 
} 

, getTitle: function() { // does now 
    var title 
    , $t = this.$element 
    , n = this.options 

    title = $t.attr('data-title') 
    || (typeof n.title == 'function' ? n.title.call($t[0]) : n.title) 

    return title 
} 

, tip: function() { 
    if (!this.$tip) { 
     this.$tip = $(this.options.template) 
    } 
    return this.$tip 
} 

}) 


por alguna razón no puedo agarrar el "título" real atributo por lo que tendrá que usar "datos-título" si desea cambiarlo.

+1

El método 'getTitle' del popover se hereda del constructor' tooltip'. Así que hay un método 'getTitle' que está anulando. –

0

Parece que Twitter-arranque no evita que un div en torno a la orientación del popover por lo que cambiar el título cambiando el encabezado no es posible. Sin embargo, this article podría ayudar.

Here's a jsfiddle que puedes, eh, jugar con.

Y el código para aquellos que no pueden jugar con él. :-)

HTML:

<div style="padding-top: 45px;"> 
    <a data-content="Original Content for Popover" data-original-title="Popover Title" data-placement="right" href="#" class="btn danger" id="popover-link" rel="popover">Rollover</a> 
</div>​ 

JavaScript:

$('#popover-link').popover({title: function() {return 'new title';}}); 
$('#popover-link').attr("data-content", "New Content for Popover"); 
$('#popover-link').setTitle('new title');​ 
+0

que está sucio. sabes lo que me gusta. –

+1

que, de hecho, no era una solución. –

+0

¡Impresionante! Voy a modificar el JS y seguir adelante. Gracias. –

18

La forma más sencilla de hacerlo es la siguiente:

 var newTitle = "Here's my new title"; 
    $('#MyExample').attr('data-original-title', newTitle); 

espero que ayudó!

+0

Ese pequeño fragmento desagradable que estaba buscando, hace bastante tiempo, ¡gracias Yann, amigo mío! –

+2

¡Muchas gracias! Lo encontré solo porque noté que nadie estaba hablando al respecto –

+0

¿Por qué Bootstrap no proporciona documentación para esto, o una serie de otras características básicas? Por ejemplo, ¿por qué no hay un comando API para obtener el elemento popover cuando se muestra? –

Cuestiones relacionadas