1

构建一个为患者查询光学图像数据库的应用程序。结果按日期排序并组织到选项卡中。每个患者都可以根据他们的就诊历史拥有任意数量的标签。我的标签在页面顶部水平组织。当只有一行结果选项卡（无论有多少）时，页面看起来不错。但是，如果选项卡的数量超过了第一行中可以包含的数量（大约 10 个），则开始第二行。div这会在我的结果选项卡和保存其内容的选项卡之间产生差距。

我想知道的是是否可以创建额外的“占位符”选项卡来填充这个空白空间，以及我将如何去做。显然每个病人的结果都是不同的，所以我需要制作足够多的额外标签来填补任何大小的空白。

代码：

<ul class="tabs" id="results">
    <?php
    if(isset($_GET['id']) && $_GET['id'] != '')
    {
      $id = $_GET['id'];

      $query = "select * from SHOT join VISIT on VISIT.ID=SHOT.VISIT_ID JOIN PATIENT ON SHOT.PATIENT_ID=PATIENT.ID where SHOT.PATIENT_ID=
            " . $id . " order by VISIT.VISIT_DATE DESC;";

      $res = mysql_query($query);
      //Here we count the number of returned rows. If it returned nothing then it will store 0.
      $count = mysql_num_rows($res);
      $i = 0;
      $j = 1;
      if($count > 0)
      {
            $previous_vdate = '';
            while($row = mysql_fetch_array($res))
            {
                    $id = $row['ID'];
                    $vdate = $row['VISIT_DATE']; 
                    $img = $row['IMG_FILENAME'];
                    $subdir = $row['SUBDIR'];
                    $subsubdir = $row['SUBSUBDIR'];

                    if ( strcmp("$vdate", "$previous_vdate") != 0)
                            {

                                    $formatted_vdate = explode(" ", $vdate);
                                    $formatted_vdate = explode("-", $formatted_vdate[0]);
                                    $visit_date = $formatted_vdate[1] . "-" . $formatted_vdate[2] . "-" . $formatted_vdate[0];

                                    if ($j == 1)
                                    {
                                            echo "<li class='active' rel='tab" . $j . "'>" . $visit_date . "</li>";
                                    }
                                    else
                                    {
                                            echo "<li rel='tab" . $j . "'>" . $visit_date . "</li>";
                                    }
                                    $previous_vdate = $vdate;
                                    $j++;
                            }
                    $i++;
            }
      }
      else
      {
            echo "<div id='no_result'>No result found !</div>";
      }
      echo "<li rel='tab" . $j . "'>All Dates Combined</li>";
    }
    else
    {
            echo "<p>Something's Broke</p>";
    }
    ?>

感谢所有帮助。如果有任何其他信息可以添加，请告诉我...接下来的几个小时我会在电脑前检查/刷新此页面。

生成的 HTML：

<ul id="results" class="tabs"><li class="active" rel="tab1">
  04-23-2012
</li><li rel="tab2">
  04-10-2012
</li><li rel="tab3">
  03-05-2012
</li><li rel="tab4">
  06-06-2011
</li><li rel="tab5">
  12-14-2010
</li><li rel="tab6">
  12-14-2009
</li><li rel="tab7">
  12-15-2008
</li><li rel="tab8">
  12-12-2007
</li><li rel="tab9">
  02-07-2007
</li><li rel="tab10">
  11-01-2006
</li><li rel="tab11">
  11-03-2005
</li><li rel="tab12">
  03-13-2002
</li><li rel="tab13">
   All Dates Combined
</li><li>

这是屏幕截图：http: //imgur.com/5lYpj5Y

4

1 回答 1

1

如果您被允许使用 Javascript，我可以建议您使用自动调整：

演示： http ://pmbennett.net/demos/autofit-tabs.html （通过更改浏览器窗口的大小来尝试）

资料来源： http: //pmbennett.net/2010/03/26/auto-fit-tabs/

缺点：不是纯 CSS 的解决方案

我个人认为一个没有功能的标签，只是为了填补空白，会让用户感到困惑。我认为用户会点击它，什么都不会发生。也许给空白空间一个更轻的（灰色？）背景也更容易。

于 2013-02-14T17:45:00.967 回答