1

患者の光学画像のデータベースを照会するアプリを構築します。結果は日付順に並べ替えられ、タブに整理されます。各患者は、医師の診察歴に基づいて任意の数のタブを持つことができます。私のタブはページの上部に水平に配置されています。結果タブが 1 行しかない場合 (いくつであっても)、ページは問題なく表示されます。ただし、タブの数が 1 行目に収まる量 (約 10 個) を超えると、2 行目が開始されます。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 に答える