Доброго времени суток участникам!
Я бы хотел сделать простой календарь на 2012 год. Вот код:
<div class="calendarTab">
<div class="calLine">
<div class="leftArr" onclick="selectMonth(-1)"></div>
<div class="month" align="center"><font><script type="text/javascript">document.write(m_Mass[d.getMonth()])</script></font></div>
<div class="rightArr" onclick="selectMonth(+1)"></div>
<div class="closeCal" title="Закрыть"></div>
</div>
<div class="dayCell" align="center"><font>Пн</font></div>
<div class="dayCell" align="center"><font>Вт</font></div>
<div class="dayCell" align="center"><font>Ср</font></div>
<div class="dayCell" align="center"><font>Чт</font></div>
<div class="dayCell" align="center"><font>Пт</font></div>
<div class="dayCell" align="center"><font>Сб</font></div>
<div class="dayCell" align="center"><font>Вс</font></div>
<div id="innerDays">
<script type="text/javascript">document.write(fillTheTable(monthInfo[d.getMonth()][0]))</script>
</div>
</div>
css Не указываю, не суть важно. leftArr и rightArr - соответственно перелистывание месяца (в selectMonth будет ещё один параметр, указывающий месяц от которого ведется отсчет)
вот заполнение календаря, принимает параметр ecIB, обозначающий сколько пустых клеток идет в первой недели (например, если 1-ый день февраля выпадает на среду, то ecIB=2); monthInfo - двухмерный массив, первый элемент ecIB - число пустых клеток в начале, второй - дней в месяце. dayCell - пустышки, не содержат текста, нужны исключительно для заполнения пространства. (42 итерации т.к. максимальное пространство 7*6, например апрель)
function fillTheTable(ecIB){
for(i=1 ; i<=42; i++){
if(i<=ecIB) {
s +="<div class=\"dayCell\"></div>";
} else if(i>ecIB & i<=monthInfo[d.getMonth()][1]+ecIB){
s +="<div class=\"calCell\" align=\"center\"><font>"+(i-ecIB)+"</font></div>";
} else {
s +="<div class=\"dayCell\"></div>";
}
}
return s;
}
window.onload=function(){
hoverCell();
}
var d = new Date();
var s = new String();
var m_Mass = new Array("Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь");
var monthInfo = new Array([6, 31], [2, 29], [3,31] , [6, 30], [1, 31], [4, 30], [6, 31], [2, 31], [5, 30], [0, 31], [3, 30], [5, 31]);
function hoverCell()
{
$('.calCell').hover(
function(){
$(this).css({background: '#91aeea'});
$(this).children('font').css({color: 'white'});
},
function(){
$(this).css({background: 'white'});
$(this).children('font').css({color: '#0f5b8b'})
}
);
};
function selectMonth(inc){
switch(inc){
case +1:
if(d.getMonth() !== 11){
document.getElementById('innerDays').innerHTML=fillTheTable(monthInfo[d.getMonth()][0]+1);
}
case -1://всякие действия...
default:
}
}
Вопрос №1: св-во InnerHtml таким образом работает, что добавляет контент в элемент, не удаляя уже существующее содержание -> при нажатии rightArr Март лепится под Февралем. Пробовал предварительно делать empty() или remove(), detach(), но тот же результат. ЧЯДНТ?
Вопрос №2: почему, когда делаются подобные вещи через аякс, innerhtml уже работает так, что каждый раз обновляет содержимое элемента, в который запихивается ответ сервера?
Вопрос №3: После onclick на элементе rightArr св-во hover для calCell перестает работать, и вообще оно перестает работать, когда дивы calCell создаются не через document.write, а все тот же innerHtml, html(jquery), append?
