Jquery flowplayer - tabs - content inside div tags not displaying
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>
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>
<!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>
加载中,请稍侯......
精彩评论