javascript - PHP 包含在 jQuery next() 冲突中

Question

如果你看看这个： http: //jsfiddle.net/Qw75j/7/你会看到我在找什么。

我希望能够在每个 DIV 中包含 PHP。如果我将 PHP 包含在第一个 DIV 中，它似乎可以正常加载，但如果我将 PHP 也放在第二个 DIV 中，或者只是放在第二个或第三个 DIV 中，next() 功能就会中断。目标是在用户单击“下一个”或“上一个”后显示不同的日历月。

我有四个资源正在协同工作。用于索引的 HTML/PHP，用于 next() 功能的 jQuery，以及用于某些日历代码的 PHP 和 CSS。

如何在每个与 next() 相关的 DIV 中嵌入单独的 PHP 页面？

预先感谢您的帮助。我真的很难过。

索引.php：

<DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="../css/style2.css" />
  <script src="http://code.jquery.com/jquery-latest.min.js" ></script>
</head>
<body>

  <button id="prev" disabled="disabled">Prev</button>
  <button id="next">Next</button>

    <div id="cal1" class="first current">
        <?php echo '<span class="monthName">'.$nmonth.' '.$cyear.'</span>';
              echo draw_calendar($cmonth,$cyear); ?>
        <span class="prevMonth"></span>
    </div>

    <div id="cal2">
        <?php echo '<span class="monthName">'.$nmonth.' '.$cyear.'</span>';
              echo draw_calendar($cmonth,$cyear); ?>
        <span class="prevMonth"></span>
    </div>

    <div id="cal3" class="last">
        <?php
        echo '<span class="monthName">'.$nmonth.' '.$cyear.'</span>';
        echo draw_calendar($cmonth,$cyear); ?>
        <span class="prevMonth"></span>
    </div>

</body>
<script>
  $('#next').click(function() {
    $('.current').removeClass('current').hide()
        .next().show().addClass('current');
    if ($('.current').hasClass('last')) {
        $('#next').attr('disabled', true);
    }
    $('#prev').attr('disabled', null);
});

$('#prev').click(function() {
    $('.current').removeClass('current').hide()
        .prev().show().addClass('current');
    if ($('.current').hasClass('first')) {
        $('#prev').attr('disabled', true);
    }
    $('#next').attr('disabled', null);
});
</script>
</html>

日历.php：

<html>
<head>
<link rel="stylesheet" type="text/css" href="calendar.css" />
</head>
</html>
<?php
/* draws a calendar */
function draw_calendar($month,$year){

    /* draw table */
    $calendar = '<table cellpadding="0" cellspacing="0" class="calendar">';

    /* table headings */
    $headings = array('SUN','MON','TUES','WED','THURS','FRI','SAT');
    $calendar.= '<tr class="calendar-row"><td class="calendar-day-head">'.implode('</td><td class="calendar-day-head">',$headings).'</td></tr>';

    /* 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.= '<tr class="calendar-row">';

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

    /* keep going with days.... */
    for($list_day = 1; $list_day <= $days_in_month; $list_day++):
        $calendar.= '<td class="calendar-day">';
            /* add in the day number */
            $calendar.= '<div class="day-number"><a href="">'.$list_day.'</a><input type="hidden" name="day" value="'.$list_day.'"></div>';

            /** QUERY THE DATABASE FOR AN ENTRY FOR THIS DAY !!  IF MATCHES FOUND, PRINT THEM !! **/
            $calendar.= str_repeat('&nbsp',2);

        $calendar.= '</td>';
        if($running_day == 6):
            $calendar.= '</tr>';
            if(($day_counter+1) != $days_in_month):
                $calendar.= '<tr class="calendar-row">';
            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.= '<td class="calendar-day-np"> </td>';
        endfor;
    endif;

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

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

    /* all done, return result */
    return $calendar;
}
        $cmonth = date('m');
        $nmonth = date('F');
        $cyear = date('Y');
?>

日历.css：

@font-face {
    font-family:Gotham-Medium;
    src: url(./css/GothamMedium.ttf);
}
@font-face {
    font-family:Gotham-Light;
    src: url(./css/Gotham-Light.ttf);
}
@font-face {
    font-family:Gotham-Bold;
    src: url(./css/Gotham-Bold.otf);
}
/* calendar */
td.calendar-day { 
    min-height:30px; 
    font-size:11px; 
    position:relative;
    background:#000;
} 
* html div.calendar-day { 
    height:30px;
    font-family:Gotham-Medium;
}
td.calendar-day-np  { 
    background:#000; 
    min-height:30px; 
} 
* html div.calendar-day-np { 
    height:30px; 
}
td.calendar-day-head { 
    background:#000;
    color:#BBA324;
    font-family:Gotham-Medium;
    font-size:12px; 
    text-align:center; 
    width:60px; 
    padding:5px;
    padding-bottom:20px;
    border:0;
}
div.day-number { 
    background:transparent;
    color:#fff;
    font-family:Gotham-Medium;
    font-size:12px;
    margin:0 5px -10px 15px; 
    width:30px;
    text-align:center;
    padding-top:5px;
    padding-bottom:5px;
}
div.day-number:hover {
background:#BBA324;
}
/* shared */
td.calendar-day, td.calendar-day-np { 
    width:30px; 
    padding:5px; 
    border:0;
}
.monthName {
font-family:Gotham-Medium;
color:#BBA324;
font-size:16px;
margin-top:-5px;
text-transform:uppercase;
}
#usTitle {
font-family:Gotham-Light;
font-size:12vw;
text-transform:uppercase;
text-align:center;
}
.plusMonth {
    font-family:Gotham-Medium;
    color:#000;
    font-size: 10px;
    float:right;
    margin-top: 5px;
}
.prevMonth {
    font-family:Gotham-Medium;
    color:#000;
    font-size: 10px;
    float:left;
    margin-top: 2px;
    text-transform: uppercase;
}
.arrow {
    font-family:Gotham-Light;
    margin-bottom: 5px;
}
#cal2,#cal3{
    display:none !important;
}

score 0 · Accepted Answer

基本上，您将calendar.php脚本包含在想要使用它的脚本中。

它是一个函数，因此它仅在调用时运行。

html从脚本中删除不必要的部分calendar.php以及底部设置月份和年份变量的代码。这需要在调用draw_calendar()函数之前完成，这样您就可以为当前、-1 和 -2 个月创建 3 个 div（我假设这就是您将要做的）。

索引.php

<?php
    // make the function available in this script
    include( 'calendar.php');
?>
<DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="../css/style2.css" />
  <!-- make the css available in this page -->
  <link rel="stylesheet" type="text/css" href="calendar.css" />
  <script src="http://code.jquery.com/jquery-latest.min.js" ></script>
</head>
<body>

  <button id="prev" disabled="disabled">Prev</button>
  <button id="next">Next</button>

    <div id="cal1" class="first current">
<?php 
    // set a value for $nmonth / $cmonth / $cyear
    // I assume this will be current month
    // TODO: Set correct month and year value
    $cmonth = date('m');
    $nmonth = date('F');
    $cyear = date('Y');

    echo '<span class="monthName">'.$nmonth.' '.$cyear.'</span>';
    echo draw_calendar($cmonth,$cyear); 
?>
        <span class="prevMonth"></span>
    </div>

    <div id="cal2">
<?php 
    // set a value for $nmonth / $cmonth / $cyear
    // I assume this will be current month -1
    // TODO: Set correct month and year value
    $cmonth = date('m');
    $nmonth = date('F');
    $cyear = date('Y');

     echo '<span class="monthName">'.$nmonth.' '.$cyear.'</span>';
     echo draw_calendar($cmonth,$cyear); 
?>
        <span class="prevMonth"></span>
    </div>

    <div id="cal3" class="last">
<?php 
    // set a value for $nmonth / $cmonth / $cyear
    // I assume this will be current month -2
    // TODO: Set correct month and year value
    $cmonth = date('m');
    $nmonth = date('F');
    $cyear = date('Y');

    echo '<span class="monthName">'.$nmonth.' '.$cyear.'</span>';
    echo draw_calendar($cmonth,$cyear); 
?>
        <span class="prevMonth"></span>
    </div>

</body>
<script>
  $('#next').click(function() {
    $('.current').removeClass('current').hide()
        .next().show().addClass('current');
    if ($('.current').hasClass('last')) {
        $('#next').attr('disabled', true);
    }
    $('#prev').attr('disabled', null);
});

$('#prev').click(function() {
    $('.current').removeClass('current').hide()
        .prev().show().addClass('current');
    if ($('.current').hasClass('first')) {
        $('#prev').attr('disabled', true);
    }
    $('#next').attr('disabled', null);
});
</script>
</html>

calendar.php 删除文件开头所有不必要的 html 即这些东西：

<html>
<head>
<link rel="stylesheet" type="text/css" href="calendar.css" />
</head>
</html>

还要从文件末尾删除它：

$cmonth = date('m');
$nmonth = date('F');
$cyear = date('Y');

score 0 · Accepted Answer

0

在您calander.css删除以下代码

#cal2, #cal3 {
 display: none !important;
}

于 2013-10-02T23:59:49.267 回答

javascript - PHP 包含在 jQuery next() 冲突中

2 回答 2

Related

Reference