Php 使用JavaScript向前/向后箭头覆盖自动jQuery选项卡控件?
在这个话题上有相似的问题,但不尽相同。我有一个滚动jQuery特性,它使用选项卡进行选择,并且是自动的。我不能轻易地改变这个布局,因为它是动态的,并且取决于在PHP中传递的选定数组中有多少项。标记代码如下所示。。。见最后的PHPPhp 使用JavaScript向前/向后箭头覆盖自动jQuery选项卡控件?,php,javascript,jquery,twitter-bootstrap,Php,Javascript,Jquery,Twitter Bootstrap,在这个话题上有相似的问题,但不尽相同。我有一个滚动jQuery特性,它使用选项卡进行选择,并且是自动的。我不能轻易地改变这个布局,因为它是动态的,并且取决于在PHP中传递的选定数组中有多少项。标记代码如下所示。。。见最后的PHP <div id="tabs" class="clients" style="display:none;"> <a class="" href="#">1</a> <a class="" href="#">2</a
<div id="tabs" class="clients" style="display:none;">
<a class="" href="#">1</a>
<a class="" href="#">2</a>
<a class="" href="#">3</a>
<a class="" href="#">4</a>
<a class="activeSlide" href="#">5</a>
</div>
当它滚动浏览或选择tab时,它将成为activeSlide类。我计划在一些客户机上使用display:none-in-CSS来隐藏选项卡,并希望在我的前向/后向中包含此箭头布局和某种类型的JavaScript绑定
<div id="slider-controls">
<a href="#" id="prev"><img src="_img/_sliders/prev.gif" width="41" height="17" /></a> <span><img src="_img/blank.gif" width="1" height="1" /></span>
<a href="#" id="next"><img src="_img/_sliders/next.gif" width="41" height="17" /></a>
</div>
关于使用现有jQuery更容易修复的任何见解,我应该寻找什么,以及是否可以简单地添加JavaScript以使用新的前向/后向选项卡覆盖现有代码
现在,这里是我的PHP代码,看看这一切是从哪里来的,你可以看到我有一个暂停按钮,也不那么重要,还有一个客户案例研究,它不在所有项目中,所以有一个if/else。更重要的是,我想学习一种更好的方法来解决这个问题,以及如何为那些有更多时间的人解决这个问题
<?php if ($num_projs > 0){ ?>
<div id="slider">
<div id="photos">
<!-- dump all photos here, then manipulate them via tabs with jQuery -->
<?php
foreach($projects as $project){
if($project['project_media_use'] == 'video' and $project['project_video'] != ''){
?>
<div id="<?php print stripslashes($project['project_name']);?>" title="<?php print stripslashes($project['project_desc']);?>" class="video"><iframe src="http://player.vimeo.com/video/<?php print $project['project_video'];?>?title=0&byline=0&portrait=0" width="606" height="348" marginheight="0" marginwidth="0" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe></div>
<?php }else{ ?>
<div id="<?php print stripslashes($project['project_name']);?>" title="<?php print stripslashes($project['project_desc']);?>" style="background-image: url('_img/_cms_uploads/_projects/<?php print $project['project_image'];?>')"></div>
<?php } } ?>
</div>
<div id="slider-bottom"> <!-- added display:none; to hide tabs - Shane -->
<div style="display:none;" id="tabs" class="clients"></div> <!-- tabs are created automatically based on number of divs within "photos" div -->
<?php if($clientCaseStudy != ''){?>
<div id="links">
<!-- shane -->
<a><img src="_img/_sliders/pause.gif" id="pause" width="20" height="17"/></a><span><img src="_img/blank.gif" width="1" height="1" /></span>
<a id="prev"><img src="_img/_sliders/prev.gif" width="41" height="17" /></a><span><img src="_img/blank.gif" width="1" height="1" /></span><a id="next"><img src="_img/_sliders/next.gif" width="41" height="17" /></a><br />
<a style="text-align: left;" href="/<?php print $clientCaseStudy + " ";?>" rel="casestudy">CASE STUDY ></a> <div style="clear:left"></div>
<!-- shane -->
</div><?php } else{?>
<div id="links"><a><img src="_img/_sliders/pause.gif" id="pause" width="20" height="17"/></a><span><img src="_img/blank.gif" width="1" height="1" /></span>
<a id="prev"><img src="_img/_sliders/prev.gif" width="41" height="17" /></a><span><img src="_img/blank.gif" width="1" height="1" /></span><a id="next"><img src="_img/_sliders/next.gif" width="41" height="17" /></a>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
如果有帮助的话,该网站正在使用Twitter引导程序。我最终发现了这一点,并认为如果其他人遇到同样的情况,我会与大家分享。它涉及到操作一个JavaScript文件,添加最后两行代码
$(document).ready(function() {
$('#photos').cycle({
fx: 'turnDown',
speed: 'slow',
timeout: 9000,
pager: '#tabs',
before: onBefore,
after: onAfter,
next: '#next', //added shane
prev: '#prev' //added shane
});
然后将这种性质的内容添加到另一个文件中
<div class="nav">
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
</div>
…使我能够导航或使用选项卡。
这个网站非常有助于解决所有这些问题,并且看起来是jQuery循环插件的一部分