当前位置： 文江博客话题详情

Jquery flowplayer - 选项卡 - div 标签内的内容不显示

发布于 2024-09-06 10:52:33 字数 2994 浏览 5 评论 0原文

我正在寻找一个 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>
原文

I'm looking for a simple example of JQuery tabs in which I am planning to show two different forms.

I came across this example http://flowplayer.org/tools/demos/tabs/index.htm which is perfect for my needs.

So I implemented the simple example. The code in question is:

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

Now my content for the first tab is a form which has several of its own div tags - when I put that form with div tags as the content for the first tab - nothing appears.

So I made a simple change and added another div tag to the content of the first tab as shown below and still nothing appears:

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

Is there a simple way to fix this. This is the content that I want to display in my first tab - Thanks for your help

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

不气馁 2024-09-13 10:52:33

我仍然偏爱 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>

I am still partial to jquery ui tabs, but here is how to make it work with 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>
回复 原文
不醒的梦 2024-09-13 10:52:33
<!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>

<!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>
回复 原文
~没有更多了~

关于作者

夜未央樱花落

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文