首页 文章

Jquery flowplayer - tabs - div标签内的内容不显示

提问于
浏览
1

我正在寻找一个简单的JQuery选项卡示例,我计划在其中显示两种不同的表单 .

我遇到了这个例子http://flowplayer.org/tools/demos/tabs/index.htm,这完全符合我的需要 .

所以我实现了这个简单的例子 . 有问题的代码是:

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

现在,第一个选项卡的内容是一个包含多个自己的div标签的表单 - 当我将带有div标签的表单作为第一个选项卡的内容时 - 没有任何内容出现 .

所以我做了一个简单的更改,并在第一个标签的内容中添加了另一个div标签,如下所示,但仍然没有显示:

<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>

有没有一种简单的方法来解决这个问题 . 这是我想在第一个标签中显示的内容 - 感谢您的帮助

<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>

2 回答

  • 2

    我仍然偏爱jquery ui标签,但这里是如何让它与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>
    
  • 1
    <!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>
    

相关问题