PHP Jquery选项卡：内容加载到一个选项卡的面板中

时间：2016-05-02 10:36:39

标签： javascript php jquery

感谢任何可以提供帮助的人！ 我有以下代码，最新发生的是在一个选项卡上绘制三个日历，而不是每个日历到他们自己的选项卡。我使用easy-tabs jquery插件作为参考。 

 <?php
    if(!function_exists('draw_calendar')){
        function draw_calendar($month,$year,$day1,$lTaught1,$tutorid,$stuEmail,$timeStart,$timeEnd,$cost,$date,$count1){
            switch($lTaught1){
                    case "eng":
                        $language = "English";
                        break;
                    case "oth":
                        $language = "Other";
                        break;
                    case "chi":
                        $language = "Chinese";
                        break;
                };

            if($count1 ==2){
                echo"helo";
            }
            /* draw table */
            $calendar = '<div id="tabs'.$count1.'-html"><div id="calendar-wrapper">';

            /* table headings */

            $calendar.= '<div id="weekday"><ul>
                <li>Sunday</li>
                <li>Moday</li>
                <li>Tuesday</li>
                <li>Wednesday</li>
                <li>Thursday</li>
                <li>Friday</li>
                <li>Saturday</li>
            </ul></div><div id="calendar">';

            /* days and weeks vars now ... */
            $running_day = date('w',mktime(0,0,0,$month,1,$year));
            $days_in_month = date('t',mktime(0,0,0,$month,1,$year));
            $days_in_this_week = 1;
            $day_counter = 0;
            $dates_array = array();

            /* row for week one */
            $calendar.= '<ul class="days">';

            /* print "blank" days until the first of the current week */
            for($x = 0; $x < $running_day; $x++):
                $calendar.= '<li class="day other-month"></li>';
                $days_in_this_week++;
            endfor;

            /* keep going with days.... */
            for($list_day = 1; $list_day <= $days_in_month; $list_day++):

                    /* add in the day number */
                    if($day1 == $list_day && $status="available"){
                         $calendar.= '<li class="day">';

                        $calendar .= '<div class="date">'.$list_day.'</div>';
                        $calendar .= '<div class="event"><a href="registerSession.php?tutorid='.$tutorid.'&email='.$stuEmail.'&timestart='.$timeStart.'&timeend='.$timeEnd.'&cost='.$cost.'&date='.$date.'">Book this</a></div>';
                    } else {
                         $calendar.= '<li class="day">';
                    $calendar.= '<div class="date">'.$list_day.'</div>';
                    }


                $calendar.= '</li>';
                if($running_day == 6):
                    $calendar.= '</ul>';
                    if(($day_counter+1) != $days_in_month):
                        $calendar.= '<ul class="days">';
                    endif;
                    $running_day = -1;
                    $days_in_this_week = 0;
                endif;
                $days_in_this_week++; $running_day++; $day_counter++;
            endfor;

            /* finish the rest of the days in the week */
            if($days_in_this_week < 8):
                for($x = 1; $x <= (8 - $days_in_this_week); $x++):
                    $calendar.= '<li class="day other-month"></li>';
                endfor;
            endif;

            /* final row */
            $calendar.= '</ul>';

            /* end the table */
            $calendar.= '</div></div>';

            /* all done, return result */
            return $calendar;

        }
    }    
    ?>

有绘制日历的代码，这个代码在这里调用：

<html lang="en">
<head>  
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="robots" content="index,follow"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >

    <title>Vesta | <?php echo $fname ?></title>
    <script src="calendar/vendor/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="calendarvendor/jquery.hashchange.min.js" type="text/javascript"></script>
    <script src="calendarlib/jquery.easytabs.min.js" type="text/javascript"></script>
    <link href="css/1140.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700' rel='stylesheet' type='text/css'>
    <link href="calendar/style.css" rel="stylesheet" type="text/css">

     <style>
        /* Example Styles for Demo */
        .etabs { margin: 0; padding: 0; }
        .tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
        .tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
        .tab a:hover { text-decoration: underline; }
        .tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
        .tab a.active { font-weight: bold; }
        .tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
        .panel-container { margin-bottom: 10px; }
    </style>

      <script type="text/javascript">
        $(document).ready( function() {
          $('#tab-container').easytabs();
        });
      </script>
</head>  
<body>
    <div class="container12">
        <?php include "nav.php"; ?>    
    </div>
    <div class="wrapper">                
    <?php     
        $sql2 = "SELECT timeStart, timeEnd, dateFor, languageTaught, cost, status FROM tutorslots WHERE tutorid='$tutorid'";
        include('calendar/calendar.php');
            $result2 = mysqli_query($conn,$sql2);
        $result3 = mysqli_query($conn,$sql2);
                if (!$result2) {
                    echo 'MySQL Error: ' . mysqli_error();
                    exit;
                }

                $count = 1;
                echo "<div id='tab-container' class='tab-container'>";
                echo "<ul class='etabs'>";

                while ($row3=mysqli_fetch_assoc($result3)){
                    echo "<li class='tab'><a href='#tabs".$count."'>HTML Markup</a></li>";
                    $count++;
                }
                echo "</ul>";


                $count1 = 1;
                echo "<div class='panel-container'>";   
                while ($row2 = mysqli_fetch_assoc($result2)) {

                    $timeStart = $row2["timeStart"];
                    $timeEnd = $row2["timeEnd"];
                    $date = $row2["dateFor"];
                    $languageTaught = $row2["languageTaught"];
                    $status = $row2["status"];
                    $cost = $row2["cost"];  
                    $dateElements = explode('-', $date);
                    $year1 = $dateElements[0];
                    $mo = $dateElements[1];
                    $day1 = $dateElements[2];
                    $lTaught1 = $languageTaught;


                    echo "<h1>".$date."</h1>";
                    echo "<br>";  
                    echo draw_calendar($mo,$year1,$day1,$lTaught1,$tutorid,$stuEmail,$timeStart,$timeEnd,$cost,$date, $count1);

                    $count1 ++;
                 }
                echo '</div>';
        echo "</div>";
   ?>

如果有人能看到这个问题，我相当肯定它与php draw_calendar（）函数以及我调用它的方式有关。我只是看不出我做错了什么..

任何帮助都会非常感激！

1 个答案:

答案 0 :(得分：0)

好的，所以我不确定如何回答我自己的问题，但我找到了答案，所以包住了别人在这上面绊倒了，这里就是这样。 

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>    

</head>  
<body>
    <div class="container12">
        <?php include "nav.php"; ?>    
    </div>
    <div class="wrapper"> 
    <div id="tabs">
        <?php 

            $sql2 = "SELECT timeStart, timeEnd, dateFor, languageTaught, cost, status FROM tutorslots WHERE tutorid='$tutorid'";
            include('calendar/calendar.php');

            $result2 = mysqli_query($conn,$sql2);
                if (!$result2) {
                    echo 'MySQL Error: ' . mysqli_error();
                    exit;
                }
            $result3 = mysqli_query($conn,$sql2);
                if (!$result3) {
                    echo 'MySQL Error: ' . mysqli_error();
                    exit;
                }

            echo "<ul>";
            $count = 0;
            while ($row3 = mysqli_fetch_assoc($result3)) {
                $count++;
                echo '<li><a href="#tab-'.$count.'"><span>Time Slot</span></a></li>';
            }
            echo "</ul>";

            $count1 = 0;
            while ($row2 = mysqli_fetch_assoc($result2)) {

                $count1++;
                $timeStart = $row2["timeStart"];
                $timeEnd = $row2["timeEnd"];
                $date = $row2["dateFor"];
                $languageTaught = $row2["languageTaught"];
                $status = $row2["status"];
                $cost = $row2["cost"];  
                $dateElements = explode('-', $date);
                $year1 = $dateElements[0];
                $mo = $dateElements[1];
                $day1 = $dateElements[2];
                $lTaught1 = $languageTaught;

                echo '<div id="tab-'.$count1.'">';
                echo draw_calendar($mo,$year1,$day1,$lTaught1,$tutorid,$stuEmail,$timeStart,$timeEnd,$cost,$date);
                echo '</div>';
                 }
        ?>
    <br> 

    </div>
    </div>
    <div clas="container12">
        <?php include('footer.php'); ?>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#tabs").tabs();
        });

    </script>

基本上我不需要对draw_calendar函数做任何事情，我需要的只是正确的代码，可以这样：

<html>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>    
</head>
<body>
    <div id="tabs">
    <ul>
       <li><a href="#tab-1"><span>Patient Information</span></a></li>
        <li><a href="#tab-2"><span>Medical History</span></a></li>
    </ul> 
        <div id="tab-1">
            <?php include('calendar.php');  
            echo draw_calendar(8,2016,04,eng,40,email,1,1,1,03-8-2016); 
            ?>
        </div>
        <div id="tab-2">
            <?php include('calendar.php');  
            echo draw_calendar(9,2016,04,eng,40,email,1,1,1,03-8-2016); 
            ?>
        </div>
        <script type="text/javascript">
     $(document).ready(function() {
         $("#tabs").tabs();
     });

</script>
       </body>
</html>
相关问题
最新问题