Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.02.2012, 14:33
Новичок на форуме
Отправить личное сообщение для Евгений77 Посмотреть профиль Найти все сообщения от Евгений77
 
Регистрация: 19.02.2012
Сообщений: 1

Изменение содержимого для элемента по onclick
Доброго времени суток участникам!

Я бы хотел сделать простой календарь на 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?
Ответить с цитированием
  #2 (permalink)  
Старый 19.02.2012, 15:21
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от Евгений77
Вопрос №1: св-во InnerHtml таким образом работает, что добавляет контент в элемент, не удаляя уже существующее содержание
innerHTML так не работает.
Сообщение от Евгений77
Вопрос №2: почему, когда делаются подобные вещи через аякс, innerhtml уже работает так, что каждый раз обновляет содержимое элемента, в который запихивается ответ сервера?
просмотрите ещё раз свой алгоритм
Сообщение от Евгений77
Вопрос №3: После onclick на элементе rightArr св-во hover для calCell перестает работать, и вообще оно перестает работать, когда дивы calCell создаются не через document.write, а все тот же innerHtml, html(jquery), append?
Изучите основы jQwery и CSS
Ответить с цитированием
  #3 (permalink)  
Старый 20.02.2012, 22:55
Кандидат Javascript-наук
Отправить личное сообщение для Виктор Кон Посмотреть профиль Найти все сообщения от Виктор Кон
 
Регистрация: 19.07.2011
Сообщений: 135

В интернете полно готовых календарей на js. Посмотрите код любого и все поймете. Два календаря есть на моем сайте kohnvict.narod.ru, но я их не писал, а просто переделал с образцов. Поиском в Яндексе можно найти сотни, а есть специальные коллекции примеров, ссылки есть у меня на сайте, наизусть не помню.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Частичное изменение содержимого элемента kuhok Events/DOM/Window 28 07.09.2009 22:44
Функция onclick для созданных потомков Groonel Общие вопросы Javascript 6 24.04.2009 18:35
Применение функции для каждого элемента sergeygerasimov jQuery 2 26.11.2008 11:15