Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 05.11.2019, 11:18   #1
volni
Форумчанин
 
Регистрация: 16.03.2019
Сообщений: 188
По умолчанию Календарь

Здравствуйте, нашел готовый календарь ( всплывающий календарь, который возникает при нажатии на ячейку ), вроде бы все работает, но возникла одна проблема.
Этот календарь закрывается только при нажатии на ту же ячейку, откуда был вызван, как сделать, чтобы он закрывался при нажатии на любую часть страницы?
Там в принципе весь код закоменчен, но я в java вообще ничего не понимаю=)
Спасибо за внимание=)
Вложения
Тип файла: 7z tcal - копия.7z (3.6 Кб, 9 просмотров)

Последний раз редактировалось volni; 05.11.2019 в 11:40.
volni вне форума Ответить с цитированием
Старый 05.11.2019, 15:13   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

можно так:
Код:
<html>
<head>
<meta charset="utf-8">
<title>Simple Tigra Calendar</title>

<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script> 

</head>
<body>
Upload calendar files to your website
Link calendar resources (JS and CSS) to your pages
Add class="tcal" to text input(s)
<form>
<div>
<input name="mydate1" type="text" class="tcal" value="">
</div>
<p>
<input name="mydate2" type="text" class="tcal">
</p>
</form>

<script>
document.addEventListener('click', function(event) {
  if (!event.target.classList.contains('tcal')){
	if (!(event.target.id.indexOf('tcal')==0)){
		// close all clalendars
		f_tcalCancel();
	}
  }
});
</script>
</body>
</html>

Последний раз редактировалось Serge_Bliznykov; 05.11.2019 в 15:26.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 06.11.2019, 12:19   #3
volni
Форумчанин
 
Регистрация: 16.03.2019
Сообщений: 188
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
можно так:
Код:
<html>
<head>
<meta charset="utf-8">
<title>Simple Tigra Calendar</title>

<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script> 

</head>
<body>
Upload calendar files to your website
Link calendar resources (JS and CSS) to your pages
Add class="tcal" to text input(s)
<form>
<div>
<input name="mydate1" type="text" class="tcal" value="">
</div>
<p>
<input name="mydate2" type="text" class="tcal">
</p>
</form>

<script>
document.addEventListener('click', function(event) {
  if (!event.target.classList.contains('tcal')){
	if (!(event.target.id.indexOf('tcal')==0)){
		// close all clalendars
		f_tcalCancel();
	}
  }
});
</script>
</body>
</html>
а, то есть не изменить сам файл js, а просто добавить это в html?=) Ну да, так и есть, спасибо=)

Последний раз редактировалось volni; 06.11.2019 в 12:35.
volni вне форума Ответить с цитированием
Старый 06.11.2019, 12:36   #4
volni
Форумчанин
 
Регистрация: 16.03.2019
Сообщений: 188
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
Код:
<script>
document.addEventListener('click', function(event) {
  if (!event.target.classList.contains('tcal')){
	if (!(event.target.id.indexOf('tcal')==0)){
		// close all clalendars
		f_tcalCancel();
	}
  }
});
</script>
А можете пожалуйста построчно объяснить, что делает этот скрипт, надо потихонечку разбираться в этом=)
volni вне форума Ответить с цитированием
Старый 06.11.2019, 12:43   #5
p51x
Старожил
 
Регистрация: 15.02.2010
Сообщений: 15,695
По умолчанию

https://developer.mozilla.org/en-US/...dEventListener
p51x на форуме Ответить с цитированием
Старый 06.11.2019, 13:39   #6
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от volni Посмотреть сообщение
А можете пожалуйста построчно объяснить, что делает этот скрипт
ну, построчно объяснять нет смысла, если Вы будете изучать JS, то всё будет по синтаксису понятно.
а по смыслу так:
в документе (это окно в браузере) добавляем обработчик события click (клик мышкой).
в обработчик передаётся событие event
в нём есть сведения об объекте, где этот клик произошёл.
Если в этом объекте нет класса tcal тогда проверим, может быть мы по кнопкам календаря клацаем - если id объекта, по которому кликнули не начинается с tcal, тогда кликнули в любое другое место документа. Тогда мы закрываем все открытые календари (код закрытия я подсмотрел в самом tcal.js)
всё.

если что-то непонятно - спрашивайте.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 06.11.2019, 13:43   #7
volni
Форумчанин
 
Регистрация: 16.03.2019
Сообщений: 188
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
ну, построчно объяснять нет смысла, если Вы будете изучать JS, то всё будет по синтаксису понятно.
а по смыслу так:
в документе (это окно в браузере) добавляем обработчик события click (клик мышкой).
в обработчик передаётся событие event
в нём есть сведения об объекте, где этот клик произошёл.
Если в этом объекте нет класса tcal тогда проверим, может быть мы по кнопкам календаря клацаем - если id объекта, по которому кликнули не начинается с tcal, тогда кликнули в любое другое место документа. Тогда мы закрываем все открытые календари (код закрытия я подсмотрел в самом tcal.js)
всё.

если что-то непонятно - спрашивайте.
Примерно понял,спасибо=)
А не посоветуете книжечку или статейки по js?=)
volni вне форума Ответить с цитированием
Старый 06.11.2019, 13:48   #8
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от volni Посмотреть сообщение
А не посоветуете книжечку или статейки по js?=)
начните отсюда - https://programmersforum.ru/showthread.php?t=6921

а вообще, уж чего-чего, но учебного материала по JS в интернете более чем достаточно.

p.s. нужно только время, желание, настойчивость.
мне JS даётся тяжко. и я его знаю процентов на 15% (примерно, конечно).
Serge_Bliznykov вне форума Ответить с цитированием
Старый 06.11.2019, 14:30   #9
volni
Форумчанин
 
Регистрация: 16.03.2019
Сообщений: 188
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
начните отсюда - https://programmersforum.ru/showthread.php?t=6921

а вообще, уж чего-чего, но учебного материала по JS в интернете более чем достаточно.

p.s. нужно только время, желание, настойчивость.
мне JS даётся тяжко. и я его знаю процентов на 15% (примерно, конечно).
Спасибо=)
В этом то и проблема, что его много:D
volni вне форума Ответить с цитированием
Старый 06.11.2019, 14:58   #10
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от volni Посмотреть сообщение
В этом то и проблема, что его много:D
тогда - https://learn.javascript.ru/
Serge_Bliznykov вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
календарь на С# Sergey_gorobets Помощь студентам 2 30.03.2014 02:16
Календарь Golda ASP.NET 0 03.03.2014 16:53
Календарь форкас Microsoft Office Excel 2 02.09.2012 19:52
Календарь и БД svyatoi777 Помощь студентам 4 21.01.2011 20:40
Календарь 19920808 Общие вопросы Delphi 9 08.06.2010 22:17