php - "Paginating"具有动态定义的按钮数量的滚动选项卡组

Question

我想以某种方式“分页”我的滚动功能，以便我可以从“选项卡/按钮”列表中进行选择，它会自动滚动到那个“div/tab”......这就是我所拥有的，这个正在通过 while 语句在我的数据库中生成歌曲，每个“标签”都是自己的歌曲...

///PHP///
$x=count($array);
$song .= '
<div class="tab">
   <div id="full">
    <div id="container" style="color:#00234A;"><h1>' . $title . '</h1></div>
    <hr style="margin-bottom:10px;" />
    <div class="transpose" style="background-color:#F3F3F3; border: 1px solid #D1D1D1; font-size:13px; padding:3px 10px; color:#225c7e; margin-bottom:10px;">
//////////HERE IS WHERE I WOULD LIKE THE BUTTONS//////////////////////
    transpose:&nbsp; 
      <a class="transposeUp" id="transposeUp'.$vID.'" title="transpose up" 
        onclick="return false" 
        onmousedown="transposeUp(\''.$vID.'\');">
      <span>&and;</span></a>&nbsp;
      <a class="transposeDown" id="transposeDown'.$vID.'" title="transpose down" 
        onclick="return false" 
        onmousedown="transposeDown(\''.$vID.'\');">
      <span>&or;</span></a>
    </div><br /><br />';
   </div>
</div>

然后我的CSS...

.window{overflow:hidden; width:900px; font-size:14px;}
.space{width:<?php echo $i; ?>px; overflow:hidden;}
.tabs{float:left;}
.tab{float:left; width:900px; display:inline;}

我的 JS...

$('.scrollable a.left').click(function(e){
  var sz = $('.window');
  sz.animate({scrollLeft: "-=900"}, 300, 'linear');
}, function(e){
  $(sz).stop();
});

$('.scrollable a.right').click(function(e){
  var sz = $('.window'); 
  sz.animate({scrollLeft : "+=900"}, 300, 'linear');
}, function(e){
  $(sz).stop();
});

和 HTML...

<div class="mainBodyTable">
    <div style="background-color:white; padding:10px 15px;">                    
        <div class="scrollable">
            <div class="window">
                <div class="space">
                    <div class="tabs">
                        <?php echo $song; ?>
                    </div>
                </div>
            </div>
            <a href="#" class="left">&larr;</a>
            <a href="#" class="right">&rarr;</a>
        </div>
    </div>
</div>

想法是将有 $x 定义的方框，每个方框都有各自的编号。单击它时，它将滚动到其各自的 div。有人至少可以提供指导吗？提前致谢...

Answer 1

要使用此解决方案，您需要编写 php，使您的选项卡具有 yourClassSelector 的类属性和递增的 id 属性以匹配其相关歌曲。

类似于:

<?php 
    $i = 1;
    $count_of_tabs = // count() or my_sql_num_rows();

    while $i < $count_of_tabs:
       name_tab("your_tabs", $your_tab_array, $i);
       $i++;
    endwhile;

    function name_tab($tab_id_string, $tab_array, $b) {
       foreach($tab_array as $cur_tab) {
           $output = // insert html;
           $output .= $tab_id_string . $b;
           $output .= // insert more html;
           echo $output;
       }
    }
?>

<script type="text/javascript">

// I adapted this from another post on stackoverflow. I didn't write getOffset.

function getOffset( el ) {
  var _x = 0;
  var _y = 0;
  while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return { top: _y, left: _x };
}

jQuery('.yourClickSelector').click(function(e) {
  e.preventDefault(); 

  var tabId = jQuery(this).attr("id");

  var songId = jQuery(tabId + '-song');

  var x = getOffset( document.getElementById(songId) ).left;
  var y = getOffset( document.getElementById(songId) ).top;
  window.scrollTo(x,y)
});

</script>

我写完后没有校对，所以请不要只是复制粘贴然后插入再看。