Javascript PHP包含在jQuery next()冲突中
如果你看看这个,你就会明白我在找什么 不过,我希望能够在每个div中包含PHP。如果我将PHP包含在第一个DIV中,它的加载似乎很好,但是如果我将PHP也放在第二个DIV中,或者放在第二个或第三个DIV中,next()功能就会中断。目标是在用户单击“下一个”或“上一个”后显示不同的日历月 我有四个资源在一起工作。用于索引的HTML/PHP,用于next()功能的jQuery,以及用于某些日历代码的PHP&CSS 如何在每个与next()相关的DIV中嵌入单独的PHP页面 事先谢谢你的帮助。我真的被难住了 index.php:Javascript PHP包含在jQuery next()冲突中,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,如果你看看这个,你就会明白我在找什么 不过,我希望能够在每个div中包含PHP。如果我将PHP包含在第一个DIV中,它的加载似乎很好,但是如果我将PHP也放在第二个DIV中,或者放在第二个或第三个DIV中,next()功能就会中断。目标是在用户单击“下一个”或“上一个”后显示不同的日历月 我有四个资源在一起工作。用于索引的HTML/PHP,用于next()功能的jQuery,以及用于某些日历代码的PHP&CSS 如何在每个与next()相关的DIV中嵌入单独的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>
<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(' ',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');
?>
@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;
}
基本上,您可以将
calendar.php
脚本包含到想要使用它的脚本中
它是一个函数,因此它只在被调用时运行
从calendar.php
脚本中删除不必要的html
,并删除底部设置月份和年份变量的代码。这需要在调用draw\u 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>
在
calander.css中删除以下代码
#cal2, #cal3 {
display: none !important;
}
您在最终呈现的页面中得到了什么?可能是php发出了一些警告??我在错误报告中得到的唯一警告是通常的“不要依赖服务器的时间设置…”。如果您正在破坏呈现的calander上的任何标记,那么请检查呈现页面的HTML
源代码。此方法有效:。但是,如果我在第二个DIV中以与第一个DIV完全相同的方式添加PHP,jQuery就会失败!非常感谢你!
$cmonth = date('m');
$nmonth = date('F');
$cyear = date('Y');
#cal2, #cal3 {
display: none !important;
}