Jquery flowplayer - onglets - contenu à l'intérieur des balises div ne pas afficher

Je cherche un exemple simple d'onglets JQuery dans lequel je prévois de montrer deux formes différentes.Jquery flowplayer - onglets - contenu à l'intérieur des balises div ne pas afficher

Je suis tombé sur cet exemple http://flowplayer.org/tools/demos/tabs/index.htm qui est parfait pour mes besoins. J'ai donc implémenté l'exemple simple. Le code en question est:

 
<div class="panes"> 
    <div>First tab content. Tab contents are called "panes"</div> 
    <div>Second tab content</div> 
    <div>Third tab content</div> 
</div>

Maintenant, mon contenu pour le premier onglet est une forme qui a plusieurs de ses propres balises div - quand je mets cette forme avec des balises div comme le contenu du premier onglet - rien ne semble .

Je fait un simple changement et a ajouté une autre balise div au contenu du premier onglet, comme indiqué ci-dessous et toujours rien apparaît:

 
<div class="panes"> 
    <div><div>First tab content. Tab contents are called "panes"</div></div> 
    <div>Second tab content</div> 
    <div>Third tab content</div> 
</div>

est-il un moyen simple de résoudre ce problème. Ceci est le contenu que je veux afficher dans mon premier onglet - Merci pour votre aide

 
<div id="formbox" class="formbox">  
<form id="shopping_form" method="post"> 

    <div id="3" style="width:520px;" >      
     <textarea id="message" name="message" rows="3" cols="50"></textarea> 
    </div> 

    <div id="store_row" style="width:220px;float:left;padding-bottom:10px;"><b>Store</b> 
     <input type="text" id="store" name="store" class="required" size="20" /> 
     <input type="hidden" id="store_id"/>     
    </div> 
    <div id="city_column" style="width:200px;float:left;padding-bottom:10px;"><b>City</b> 
    <input type="text" id="city" name="city" size="15"/> 
    </div>     
    <div id="findbutton_column" style="vertical-align:top;width:80px;float:left;"> 
    <input class="find_address" id="findaddress" type="button" value="Find Store"/> 
    </div> 

    <div id="googlerow" style="width:120px;float:left;padding-bottom:10px;"> 
     <b>Select Store</b><select id="google_stores" name="google_stores"></select> 
     <input type="hidden" id="google_address"/>     
    </div> 

    <div id="google_message" style="float:left;padding-bottom:10px;display:none;"></div> 
    <div id="locationrow" style="float:left;padding-bottom:10px;display:none;"> 
     <b>Address/Country</b>     
     <input type="text" id="address" name="address" size="20" /> 
     <input type="text" id="country" name="country" size="20"/> 
    </div> 

    <div style="width:520px;float:left;padding-bottom:10px;" > 
     <b>Price    
     <input type="text" id="price" name="price" size="20" />  
    </div>  

    <div id="buttonrow" style="width:200px;float:right;display:none;" > 
     <input id="it" type="image" src="http://images.pe.com.s3.amazonaws.com/it.png" height="35px"/>    
    </div> 

</form> 
</div>

Source

2010-06-18 Gublooo

Dans le premier exemple sans divs supplémentaires, fonctionne-t-il correctement? – MindingData

Oui cela fonctionne bien - si juste ajouter du texte cela fonctionne - seulement si vous ajoutez un div son ne fonctionne pas – Gublooo

Je suis toujours partielle aux onglets jquery ui, mais voici comment le faire fonctionner avec flowplayer:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>jQuery Tools standalone demo</title> 
    <!-- include the Tools --> 
    <script src="http://flowplayer.org/tools/download/combine/1.2.3/jquery.tools.min.js?select=full&debug=true"></script> 
    <!-- standalone page styling (can be removed) --> 
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/> 
    <!-- tab styling --> 
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" /> 
    <!-- tab pane styling --> 
    <style> 
    div.wrap { 
     width:700px; 
     margin-bottom:40px; 
    } 
    .wrap .pane { 
     background:#fff url(http://static.flowplayer.org/img/global/gradient/h150.png) repeat-x 0 20px; 
     display:none;  
     padding:20px; 
     border:1px solid #999; 
     border-top:0; 
     font-size:14px;  
     font-size:18px; 
     color:#456; 

     _background-image:none; 
    } 
    .wrap .pane p { 
     font-size:38px; 
     margin:-10px 0 -20px 0; 
     text-align:center; 
     color:#578; 
    } 
    .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} 
    .clearfix {display:block;} 
    </style> 
    </head> 
    <body> 
    <div class="wrap"> 
    <!-- the tabs --> 
    <ul class="tabs"> 
     <li><a href="#">Form</a></li> 
     <li><a href="#">Tab 2</a></li> 
     <li><a href="#">Tab 3</a></li> 
    </ul> 
    <!-- tab "panes" --> 
    <div class="pane clearfix"> 
     <div id="formbox" class="formbox">  
     <form id="shopping_form" method="post"> 
     <div id="3" style="width:520px;" >      
       <textarea id="message" name="message" rows="3" cols="50"></textarea> 
     </div> 
     <div id="store_row" style="width:220px;float:left;padding-bottom:10px;"><b>Store</b> 
      <input type="text" id="store" name="store" class="required" size="20" /> 
      <input type="hidden" id="store_id"/>     
     </div> 
     <div id="city_column" style="width:200px;float:left;padding-bottom:10px;"><b>City</b> 
      <input type="text" id="city" name="city" size="15"/> 
     </div>     
     <div id="findbutton_column" style="vertical-align:top;width:80px;float:left;"> 
      <input class="find_address" id="findaddress" type="button" value="Find Store"/> 
     </div> 
     <div id="googlerow" style="width:120px;float:left;padding-bottom:10px;"> 
      <b>Select Store</b><select id="google_stores" name="google_stores"></select> 
      <input type="hidden" id="google_address"/>     
     </div> 
     <div id="google_message" style="float:left;padding-bottom:10px;display:none;"></div> 
     <div id="locationrow" style="float:left;padding-bottom:10px;display:none;"> 
      <b>Address/Country</b>     
      <input type="text" id="address" name="address" size="20" /> 
      <input type="text" id="country" name="country" size="20"/> 
     </div> 
     <div style="width:520px;float:left;padding-bottom:10px;" > 
      <b>Price 
      <input type="text" id="price" name="price" size="20" />  
     </div>  
     <div id="buttonrow" style="width:200px;float:right;display:none;" > 
      <input id="it" type="image" src="http://images.pe.com.s3.amazonaws.com/it.png" height="35px"/>    
     </div> 
     </form> 
     </div>  
    </div> 
    <div class="pane"> 
     <p>#2</p> 
    </div> 
    <div class="pane"> 
     <p>#3 </p> 
    </div> 
    </div> 
    <!-- This JavaScript snippet activates those tabs --> 
    <script> 
    // perform JavaScript after the document is scriptable. 
    $(function() { 
    $("ul.tabs").tabs("> .pane"); 
    }); 
    </script> 
    </body> 
</html>

Source

2010-06-19 17:43:08

Je noterai que cela fonctionne parfaitement dans FF, mais vous devrez peut-être modifier le css pour Safari et chrome pour obtenir les onglets 2 et 3 fonctionnant correctement. N'a pas testé avec IE. Regardez comment flowplayer exécute les multiples onglets imbriqués. Au lieu du second jeu d'onglets, vous auriez votre formulaire. Rappelez-vous juste que vous aurez besoin de cette classe clearfix pour conclure votre formulaire. Voici l'exemple flowplayers: http://flowplayer.org/tools/demos/tabs/multiple-tabs.htm –

Merci d'avoir pris le temps de l'homme - l'apprécier. – Gublooo

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script> 
    <style> 
    .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} 
    .clearfix {display:block;} 
    </style> 
    </head> 

    <body> 
    <script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
    </script> 
    <div id="tabs"> 
     <ul> 
     <li><a href="#tabs-1">First Tab (Form)</a></li> 
     <li><a href="#tabs-2">Second Tab</a></li> 
     <li><a href="#tabs-3">Third Tab</a></li> 
     </ul> 
     <div id="tabs-1" class="clearfix"> 
     <div> 
      <div id="formbox" class="formbox">  
      <form id="shopping_form" method="post"> 
      <div id="3" style="width:520px;" >      
        <textarea id="message" name="message" rows="3" cols="50"></textarea> 
      </div> 
      <div id="store_row" style="width:220px;float:left;padding-bottom:10px;"><b>Store</b> 
       <input type="text" id="store" name="store" class="required" size="20" /> 
       <input type="hidden" id="store_id"/>     
      </div> 
      <div id="city_column" style="width:200px;float:left;padding-bottom:10px;"><b>City</b> 
       <input type="text" id="city" name="city" size="15"/> 
      </div>     
      <div id="findbutton_column" style="vertical-align:top;width:80px;float:left;"> 
       <input class="find_address" id="findaddress" type="button" value="Find Store"/> 
      </div> 
      <div id="googlerow" style="width:120px;float:left;padding-bottom:10px;"> 
       <b>Select Store</b><select id="google_stores" name="google_stores"></select> 
       <input type="hidden" id="google_address"/>     
      </div> 
      <div id="google_message" style="float:left;padding-bottom:10px;display:none;"></div> 
      <div id="locationrow" style="float:left;padding-bottom:10px;display:none;"> 
       <b>Address/Country</b>     
       <input type="text" id="address" name="address" size="20" /> 
       <input type="text" id="country" name="country" size="20"/> 
      </div> 
      <div style="width:520px;float:left;padding-bottom:10px;" > 
       <b>Price 
       <input type="text" id="price" name="price" size="20" />  
      </div>  
      <div id="buttonrow" style="width:200px;float:right;display:none;" > 
       <input id="it" type="image" src="http://images.pe.com.s3.amazonaws.com/it.png" height="35px"/>    
      </div> 
      </form> 
      </div> 
     </div> 
     </div> 
     <div id="tabs-2"> 
     <p>Second Tab Content</p> 
     </div> 
     <div id="tabs-3"> 
     <p>Third Tab Content</p> 
     </div> 
    </body> 
</html>

Source

2010-06-19 07:28:58

Merci Andrew - J'ai regardé cet exemple aussi bien - cela vient du site officiel de Jquery - http: // docs .jquery.com/UI/Tabs # source - Ouais celui-ci fonctionne mais j'essayais de comprendre comment faire fonctionner le flowplayer – Gublooo

Jquery flowplayer - onglets - contenu à l'intérieur des balises div ne pas afficher

Répondre

Questions connexes