-2

私はこのようなJavascriptで関数を持っています:

!function($) {

    function add_tab(num, name){

        var $newDiv = $("<div class='tab-pane' />")
                    .attr("id", "tab_"+name)
                    .html("Content " + name);
                    //.html("<div class='row'>");

        $("#graphTabsContent").append($newDiv);

        var $newLi = $("<li/>");
        if(num==0){
            $newLi.attr("class", "active");
        }
        var $newA = $("<a data-toggle='tab' />")
                    .attr("href", "#tab_"+name)
                    .html(name);
        $newLi.append($newA);
        $("#ul_tabs").append($newLi);           
    };


    function update_graph_tabs(){
        $.getJSON("call/json/get_role", {}, function(roles) {
            $("#ul_tabs").empty();
            $("#graphTabsContent").empty();

            $.each(roles, function (key, role){
                add_tab(key, role);
            });

        });         

    }

//  Run
    update_graph_tabs();

}(jQuery);

この関数は JSON からデータを取得し、タブ可能なタブを作成した後、HTML でこのようにします ( http://getbootstrap.com/2.3.2/components.html#navs )。これは私のHTMLコードです:

<div class="row">
  <div class="span3">
     <div class="dropdown">   
       <select class="selectpicker btn-warning" id="groupe" data-style="btn-primary">
       <option value="">Awaiting data...</option>
       </select>
     </div>
   </div>
</div> 

<div class="row">
  <div class="span4"><div id="reportingContainer"></div></div> 
    <div class="span8">
      <div id="dashboard">
        <div id="combochart"></div>
        <div id="control"></div>
      </div>
  </div>
</div>

<div class="tabbable" >
    <ul id="ul_tabs"  class="nav nav-tabs">
    </ul>
    <div class="tab-content" id="graphTabsContent">
    </div>
</div>

今、すべてのタブで、コーディングした 1 つのグラフを表示したいと考えています。たとえば、私のHTML Oには、ページに1つの円グラフと1つのコンボチャートを作成するこのコードがありますが、タブにはありません。

4

1 に答える 1

-1

これはあなたを助けるかもしれません：

<!DOCTYPE html>   
<html lang="en">   
<head>   
<meta charset="utf-8">   
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title>   
<meta name="description" content="Twitter Bootstrap Basic Tab Based Navigation Example">  
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">   
</head>  
<body>  
<div class="container">  
<div class="row">  
<div class="span6">  
<ul class="nav nav-tabs">  
<li class="active">  
<a href="#">Home</a> </li>   
<li><a href="#">Tutorials</a></li>  
<li><a href="#">Practice Editor </a></li>   
<li><a href="#">Gallery</a></li>   
<li><a href="#">Contact</a></li>   
</ul>  
</div>  
</div>  
</div>  
</body>  
</html>  
- See more at: http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php#sthash.a9cP7aDC.dpuf

ソース: W3Resource

于 2013-08-29T12:49:15.197 に答える