1
Привет, я сделал календарь, в котором есть события, но проблема в том, что я не могу исправить щелчок по событию, как вы можете видеть здесь в сентябре месяца. У меня события. Я вижу события с помощью: hover css, made функция Jquery, но я не могу, как нажать на кнопку радио или что-тоПоказать/скрыть div?
http://esig-sandbox.ch/paintball/calendrierClient2.php Я хочу, чтобы показать класс = «информация»
Спасибо за вашу помощь :)
$(document).on('click', '.toggleNextInfo', function() {
$(this).parent().find('.info').toggle();
});
\t/*[fmt]0020-000A-3*/
body{ background:#EEEEEE; letter-spacing:1px; font-family:Helvetica; padding:10px;}
.year{ color:#D90000; font-size:85px;}
.relative{ position:relative;}
.months{}
.month{ margin-top:12px;}
.months ul{ list-style:none; margin:0px; padding:0px;}
.months ul li a{ float:left; margin:-1px; padding:0px 15px 0px 0px; color:#888888; text-decoration:none; font-size:35px; font-weight:bold; text-transform:uppercase;}
.months ul li a:hover, .months ul li a.active{ color:#D90000;}
table{ border-collapse:collapse;}
table td{ border:1px solid #A3A3A3; width:80px; height:80px;}
table td.today{ border:2px solid #D90000; width:80px; height:80px;}
table td.padding{ border:none;}
table td:hover{ background:#DFDFDF; cursor:pointer;}
table th{ font-weight:normal; color:#A8A8A8;}
table td .day{ position:absolute; color:#8C8C8C; bottom:-40px; right:5px; font-weight:bold; font-size:24.3pt;}
table td .events{ position:relative; width:79px; height:0px; margin:-39px 0px 0px; padding:0px;}
table td .events li{ width:10px; height:10px; float:left; background:#000; /*+border-radius:10px;*/ -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px 10px 10px 10px; margin-left:6px; overflow:hidden; text-indent:-3000px;}
table td:hover .events{ position:absolute; left:582px; top:66px; width:442px; list-style:none; margin:0px; padding:11px 0px 0px;}
table td:hover .events li{ height:40px; line-height:40px; font-weight:bold; border-bottom:1px solid #D6D6D6; padding-left:41px; text-indent:0; background:none; width:500px; }
table td .events li:first-child{ border-top:1px solid #D6D6D6;}
table td .daytitle{ display:none;}
table td:hover .daytitle{ position:absolute; left:582px; top:21px; width:442px; list-style:none; margin:0px 0px 0px 16px; padding:0px; color:#D90000; font-size:41px; display:block; font-weight:bold;}
.clear{ clear:both;}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" href="images/date.ico" />
<title>Calendrier</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
\t \t
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
\t \t <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.month').hide();
$('.month:first').show();
$('.months a:first').addClass('active');
var current = 1;
$('.months a').click(function(){
var month = $(this).attr('id').replace('linkMonth','');
if(month != current){
$('#month'+current).slideUp();
$('#month'+month).slideDown();
$('.months a').removeClass('active');
$('.months a#linkMonth'+month).addClass('active');
current = month;
}
return false;
});
});
\t \t \t
\t \t
</script>
<script type="text/javascript">
$(document).on('click', '.toggleNextInfo', function() {
$(this).parent().find('.info').toggle();
});
\t </script>
</head>
<body>
<?php
require('config.php');
require('date.php');
$date = new Date();
$year = date('Y');
$events = $date->getEvents($year);
$dates = $date->getAll($year);
?>
<div class="periods">
<div class="year"><?php echo $year; ?></div>
<div class="months">
<ul>
<?php foreach ($date->months as $id=>$m): ?>
<li><a href="#" id="linkMonth<?php echo $id+1; ?>"><?php echo utf8_encode(substr(utf8_decode($m),0,3)); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<div class="clear"></div>
<?php $dates = current($dates); ?>
<?php foreach ($dates as $m=>$days): ?>
<div class="month relative" id="month<?php echo $m; ?>">
<table>
<thead>
<tr>
<?php foreach ($date->days as $d): ?>
<th><?php echo substr($d,0,3); ?></th>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<tr>
<?php $end = end($days); foreach($days as $d=>$w): ?>
<?php $time = strtotime("$year-$m-$d"); ?>
<?php if($d == 1 && $w != 1): ?>
<td colspan="<?php echo $w-1; ?>" class="padding"></td>
<?php endif; ?>
<td <?php if($time == strtotime(date('Y-m-d'))): ?> class="today" <?php endif; ?>> <input type="button" class="toggleNextInfo">
<div class="relative">
<div class="day"><?php echo $d; ?></div>
</div>
<div class="daytitle">
<?php echo $date->days[$w-1]; ?> <?php echo $d; ?> <?php echo $date->months[$m-1]; ?>
</div>
\t \t \t \t \t \t \t </br>
<ul class="events">
\t \t \t \t \t \t \t </br>
\t \t \t \t \t \t \t </br>
<?php if(isset($events[$time])): foreach($events[$time] as $e): ?>
\t \t \t \t \t \t \t \t \t <div class="info" >
<li > <?php echo $e; ?></li>
\t \t \t \t \t \t \t \t \t \t \t <li> \t
\t \t \t \t \t \t \t \t \t \t \t \t \t <form> \t <input type="radio" name="Disponibilité" value="Disponibilité"> Choisir cette disponibilite
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <input type="submit" name="Envoyer" value="Envoyer">
\t \t \t \t \t \t \t \t \t \t \t \t \t </form>
\t \t \t \t \t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t
<?php endforeach; endif; ?>
</ul>
</td>
<?php if($w == 7): ?>
</tr><tr>
<?php endif; ?>
<?php endforeach; ?>
<?php if($end != 7): ?>
<td colspan="<?php echo 7-$end; ?>" class="padding"></td>
<?php endif; ?>
</tr>
</tbody>
</table>
</div>
<?php endforeach; ?>
</div>
\t \t
<div class="clear"></div>
</div>
\t \t
</body>
</html>
do js inside $ ready функция. – cforcloud