Gewusst wie: laden von Bootstrap-Registerkarte Bedienfeld mit Registerkarte klicken?

Ich bin mit Bootstrap tab panels, auf der Website so:

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#chartcontainer1" aria-controls="chartcontainer1" role="tab" data-toggle="tab">Chart 1</a></li>
  <li role="presentation"><a href="#chartcontainer2" aria-controls="chartcontainer2" role="tab" data-toggle="tab">Chart 2</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="chartcontainer1">
      <div id="layeredcolumnchart"></div>
  </div>
  <div role="tabpanel" class="tab-pane" id="chartcontainer2">
      <div id="piechart"></div>
  </div>
</div>

, Was ich will zu tun ist, um das laden der nicht-aktiven-Platten auf die Registerkarte klicken Sie auf.

(Jetzt, lädt er alle panels beim laden der Seite.)

Hinweis: Zeigen-verbergen, ist nicht eine Lösung für mich und was ich zeigen will, ist nicht auf eine externe URL. Es ist ein div (einige JS) aus der aktuellen Seite.

Machen, die Sie versteckten und onlick= show
Ich will nicht zu verstecken-zeigen, ich möchte zu laden, auf klicken Sie auf, weil ich will, um zu sehen, eine animation beim laden. Ich kann sehen, dass die animation auf Standard-aktiven tab, aber ich konnte nicht sehen, wie die animation auf anderen Platten, weil Sie geladen sind, bevor ich Sie Besuche: beim laden der Seite.
kannst du bitte erstellen Sie eine funktionierende snippet oder fiddle für diese?
So, lade eine Grafik (ein spinner, sagen) angezeigt werden soll, wenn das laden einer Seite, sonst halten die geladenen Daten, oder die Daten zu aktualisieren, auf der Registerkarte klicken Sie auf?
Ja, die Daten zu aktualisieren, auf der Registerkarte klicken.
...und jetzt der Clou. Sie erwähnt eine auf der Seite div in ein paar Orte. Ist dies ein statisches Blatt Daten sitzen da und warten auf geladen werden, in der Registerkarte, oder hattest du etwas anderes im Sinn?
Eigentlich ist es ein chart und da auf dieser Registerkarte nicht aktiv, aber auf den ersten geladen im hintergrund, ich konnte nicht sehen, die "animation". Was ich will zu tun ist, wenn ich auf den Reiter und dann ist es (die "animation") erneut lädt.
So, gleiche Daten (statisch), aber die animation muss neu geladen werden, auf der Registerkarte klicken, ist das, was ich höre?
Können Sie Bearbeiten die post für die Verwendung von 'runnable' code-snippets, also die anderen sehen das problem klar?
Sie müssen trigger-tab drücken, oder klicken Sie auf die Registerkarte nav???

InformationsquelleAutor herci | 2016-11-04

Wenn Sie möchten, laden Sie das tab "Inhalte" klicken Sie die Registerkarte, müssen Sie die Verwendung von Ajax für das gleiche.

Ist hier ein Beispiel.

HTML-Code

<ul class="nav nav-tabs tabs-up" id="friends">
  <li><a href="/gh/gist/response.html/3843293/" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li>
  <li><a href="/gh/gist/response.html/3843301/" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li>
  <li><a href="/gh/gist/response.html/3843306/" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="contacts">

  </div>
  <div class="tab-pane" id="friends_list">

  </div>
  <div class="tab-pane  urlbox span8" id="awaiting_request">

  </div>
</div>

Javascript-Code

$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
    loadurl = $this.attr('href'),
    targ = $this.attr('data-target');

$.get(loadurl, function(data) {
    $(targ).html(data);
});

$this.tab('show');
return false;
});

Klicken Sie hier zum anzeigen der Demo auf JSFiddle:-

Danke für deine Antwort. Aber es funktioniert nicht für mich, weil ich nicht laden Sie eine externe Seite, die ich laden will eine interne div. Wie kann ich dies tun? Danke.

InformationsquelleAutor Samay

Ich glaube, Sie müssen verwenden Sie die Registerkarte Ereignisse (re -) load divs innerhalb des tab-Inhalt.

Beispiel:

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  if (e.target=='#chartcontainer1') {
    $('#layeredcolumnchart').html('YOUR HTML/JAVASCRIPT/ETC HERE');
    //If you need to load jQuery plugins like charts, you need to load 
    //it here each time you display the tab-content
    //$('#layeyedcolumnchart .somediv').somePlugin();
  }
})

Blick in die Rubrik Veranstaltungen auf http://getbootstrap.com/javascript/#tabs

InformationsquelleAutor vegadavid

2

Ich denke, dass Sie sich für eine load animation mit css, nicht eine tatsächliche Last von Informationen.

Nur durch das hinzufügen der Klassen fade in auf Ihre aktive tabpanel (Ihr #chartcontainer1) und fade zu den anderen tabpanel Sie aktiv diesen Effekt.
```
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="chartcontainer1">
      <div id="layeredcolumnchart">...</div>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="chartcontainer2"> 
      <div id="piechart">...</div>
  </div>
</div>
```
Mein JSFiddle Beispiel
- Vielen Dank, aber ich bin nicht auf der Suche nach einer CSS-animation. Was ich tun möchte, ist zu laden (oder neu laden) das panel auf der Registerkarte klicken.
InformationsquelleAutor xWaZzo

So, nachdem ich ein bisschen die Anforderungen von Prozess -, ich glaube, ich kann eine Lösung haben.

Müssen Sie Ausblasen, den Inhalt, wenn Sie auf eine Registerkarte, laden Sie die Diagramm-app Holen Sie sich die animation.

<li role="presentation" class="active"><a href="#chartcontainer1" aria-controls="chartcontainer1" role="tab" data-toggle="tab">Chart 1</a></li>

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  if (e.target=='#chartcontainer1') {
     $('#chartcontainer1').html('');
     makeChartOne();
  }
})

function makeChartOne(){
  var chart = AmCharts.makeChart( "#chartcontainer1", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [ {
    "country": "Lithuania",
    "litres": 501.9
  }, {
    "country": "Czech Republic",
    "litres": 301.9
  }, {
    "country": "Ireland",
    "litres": 201.1
  }, {
    "country": "Germany",
    "litres": 165.8
  }, {
    "country": "Australia",
    "litres": 139.9
  }, {
    "country": "Austria",
    "litres": 128.3
  }, {
    "country": "UK",
    "litres": 99
  }, {
    "country": "Belgium",
    "litres": 60
  }, {
    "country": "The Netherlands",
    "litres": 50
  } ],
  "valueField": "litres",
  "titleField": "country",
   "balloon":{
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
} );
}

InformationsquelleAutor Malovich

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.