2013-10-02 58 views
1

如果你看看這個:http://jsfiddle.net/Qw75j/7/你會看到我在找什麼。PHP包含在jQuery next()衝突中

我希望能夠在每個DIV中包含PHP。如果將PHP包含在第一個DIV中,PHP似乎加載得很好,但是如果我將PHP放入第二個DIV中,或者僅在第二個或第三個DIV中,則下一個()功能會中斷。目標是在用戶點擊「下一步」或「上一步」後顯示不同的日曆月份。

我有四個資源正在一起工作。用於索引的HTML/PHP,用於下一個()功能的jQuery以及用於某些日曆代碼的PHP & CSS。

如何在每個next()相關的DIV中嵌入單獨的PHP頁面?

非常感謝您的幫助。我真的很難過。

的index.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> 

calendar.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'); 
?> 

calendar.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; 
} 
+0

你怎麼在最後呈現的頁面得到什麼?可能是PHP發佈一些警告? – Deepak

+0

我在錯誤報告中遇到的唯一警告是通常的「不要依賴服務器的時間設置......」 – Jason

+0

那麼,如果您打算渲染的calander上的任何標記,請檢查呈現的頁面的HTML源代碼.. – Deepak

回答

0

在你calander.css刪除下面的代碼

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

這樣做!非常感謝! – Jason

+0

@Jason不用擔心! – Deepak

0

基本盟友你將calendar.php腳本包含在想要使用它的腳本中。

它是一個函數,所以它只在被調用時才運行。

刪除calendar.php腳本中不必要的html以及底部的代碼設置月份和年份變量。這需要在調用draw_calendar()函數之前完成,因此您可以爲當前,-1和-2個月創建3個div(我假設您將要執行的操作)。

的index.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');