[英]jquery ui tabs and php echo out the data
I am using jquery ui's tabs 我正在使用jQuery UI的标签
And i want to make it dynamic by getting the tabs from a mysql database using php , but not sure how to add the fragment 1 , 2 , 3 according to the number of rows of the table i have. 我想通过使用php从mysql数据库中获取选项卡来使其具有动态性,但不确定如何根据我所拥有的表的行数添加片段1,2,3。 For example , there's 5 rows , that means there's 5 fragment.
例如,有5行,这意味着有5个片段。 here's the html code for the jquery ui.
这是jquery ui的html代码。
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img class="thumb" src="http://upload.wikimedia.org/wikipedia/en/thumb/0/0f/Avs38.jpg/250px-Avs38.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img class="thumb" src="http://www.crunchbase.com/assets/images/original/0007/5132/75132v1.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="image.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Loerm Ipsum</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
</div>
Normally i would use this php code to echo out database 通常我会使用此php代码来回显数据库
<?php
$rows = array();
while($row = mysql_fetch_array( $query )){
$rows[] = $row;
echo "'Some html code data $row[image] test'\n";
}
}
?>
However if i use this code , it will generate a html like : 但是,如果我使用此代码,它将生成类似html的代码:
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="image.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Loerm Ipsum</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Loerm Ipsum2</a></h2>
<p>L2222<a href="#" >read more</a></p>
</div>
</div>
As you can see , it does not make the second fragment , fragment TWO. 如您所见,它不会生成第二个片段,即两个片段。
I want the results to be like this: 我希望结果是这样的:
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="image.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Loerm Ipsum</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<div id="fragment-2" class="ui-tabs-panel" style="">
<img src="image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Loerm Ipsum2</a></h2>
<p>L2222<a href="#" >read more</a></p>
</div>
</div>
So how can i do this? 那我该怎么办呢?
<?php
$rows = array();
$frag = 1;
while($row = mysql_fetch_array( $query )){
$rows[] = $row;
echo "fragment-$frag";
echo "'Some html code data $row[image] test'\n";
$frag++;
}
}
?>
If you are talking about initial loading of the tabs, then modify your code to have a counter, and output the value of that counter to the tab fragment as follows: 如果要谈论选项卡的初始加载,请修改代码以具有一个计数器,并将该计数器的值输出到选项卡片段,如下所示:
<?php
$count = 0; // Initialize counter
$rows = array();
while($row = mysql_fetch_array( $query )) {
$rows[] = $row;
echo '<div id="fragment-' . ++$count . '" class="ui-tabs-panel" style="">';
echo "'Some html code data $row[image] test'\n";
}
?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.