twitter onglets bootstrap et getBBox

Prenons l'exemple suivant: http://jsfiddle.net/emepyc/gVNRc/twitter onglets bootstrap et getBBox

<body> 
    <ul class="nav nav-tabs"> 
    <li><a href="#plot" data-toggle="tab">Main</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="plot" class="tab-pane"> 
    </div> 
    </div> 
</body>

Lorsque le "complot" div élément est sous le contrôle d'amorçage, la bbox est à tort signalé comme: SVGRect {height: 0, largeur : 0, y: 0, x: 0}

Mais déplacer l'élément div dehors ...

<body> 
    <div id="plot"> 
    </div> 
</body>

... la bbox est correcte signalé comme: SVGRect {height: 146, width: 848, y: 180, x: 56}

Est-ce que quelqu'un sait ce qui se passe ici?

Source

2013-01-08 emepyc

Ok, donc il semble que cette conversation a été passe ailleurs ... https://groups.google.com/forum/?fromgroups=#!topic/d3-js/dW_pt5vs7kE

Et en effet, il a déjà été mentionné sur la façon dont le svg apparaîtra correctement si elle est initialisé dans un div tab-pane si le volet est le premier volet de l'onglet active.

http://jsfiddle.net/SzVrs/8/

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#plot" data-toggle="tab">Main</a></li> 
    <li><a href="#plotThickens" data-toggle="tab">Other</a></li> 
    </ul> 
    <div class="tab-content"> 
    <div id="plot" class="tab-pane active"></div> 
    <div id="plotThickens" class="tab-pane"> 
     <div class="alert"> 
      <p>The plot thickens!</p> 
     </div> 
    </div> 
    </div>

Mais que faire si l'élément svg n'est pas dans le premier onglet active?

Voici une approche: supprimez l'élément svg, et reconstruisez-le en cliquant sur le href de la navigation bootstrap.

http://jsfiddle.net/3LhtX/10/

$('a[data-toggle="tab"]').on('shown', function (e) { 
    $('svg').remove(); 
    var svg = plot(); 
    BB(svg); 
});

Source

2013-01-09 01:15:36 mg1075

Oui, cela peut être une solution de contournement. Mais avoir à recréer un svg lourd chaque fois que le tag est actif n'est pas une solution idéale. – emepyc

twitter onglets bootstrap et getBBox

Répondre

Questions connexes