Question

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

我想知道的是，是否可以创建额外的“占位符”标签，这些标签可以填补这个空白空间以及我可能会如何做到这一点。显然，每个患者的结果都不同，所以我需要制作足够的额外标签来填补任何大小的差距。

CODE：

<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

Answer 1

如果您被允许使用Javascript我可以建议您使用自动适合：

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

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

缺点：不是仅限CSS的解决方案

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

PHP＆＃34;占位符＆＃34;结果，标签

1 个答案: