Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: двойное событие

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (2): [1] 2 »   

> Без описания
Поиск в теме | Версия для печати
Barakuda
Отправлено: 13 Февраля, 2014 - 20:56:28
Post Id



Гость


Покинул форум
Сообщений всего: 88
Дата рег-ции: Окт. 2012  
Откуда: Одесса, украина


Помог: 0 раз(а)
есть матрица 10х10 из 100 дивов, когда провожу над дивами курсором - они меняют цвет, но нужно сделать так, чтоб по клику выбранный див менялся обратно.
Проблема в том, что чтоб дойти до нужного дива - я провожу курсором над остальными дивами, и если мне не нужно на них менять цвет - он всё равно меняется.

как сделать так, чтоб например при нажатом ctrl свойство mouseover срабатывало, а без нажатого ctrl - можно было работать кликом?
 
 Top
SAD
Отправлено: 13 Февраля, 2014 - 21:23:22
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2508
Дата рег-ции: Май 2009  
Откуда: Днепропетровск, Украина


Помог: 75 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1. $(function () {
  2.     $('div.hover')
  3.         .hover(function () {
  4.             // при наведении на div он поменяет цвет
  5.             $(this).addClass('mouseover');
  6.         }, function () {
  7.             // после того, как мышь убрали с div он поменяет цвет на начальный
  8.             $(this).removeClass('mouseover');
  9.         })
  10.         .click(function () {
  11.             // при каждом клике div будет менять цвет
  12.             $(this).toggleClass('mouseover');
  13.         });
  14. });


hover - класс ваших дивов
mouseover - класс для стилизации текущего дива

(Отредактировано автором: 13 Февраля, 2014 - 23:25:10)

 
 Top
Barakuda
Отправлено: 13 Февраля, 2014 - 22:17:26
Post Id



Гость


Покинул форум
Сообщений всего: 88
Дата рег-ции: Окт. 2012  
Откуда: Одесса, украина


Помог: 0 раз(а)
Объясните, пожалуйста, что тут делает этот код?
 
 Top
Barakuda
Отправлено: 14 Февраля, 2014 - 02:27:12
Post Id



Гость


Покинул форум
Сообщений всего: 88
Дата рег-ции: Окт. 2012  
Откуда: Одесса, украина


Помог: 0 раз(а)
Вы не совсем правильно поняли суть моего вопроса. Мне нужно чтоб замененный класс сохранялся таковым.
Я делаю редактор карты, мне нужно чтоб я занес курсор над полем, нажал кнопку, провел линию - и дивы над которыми я провел курсором - поменяли цвет. Далее я отпустил кнопку, и спокойно убрал курсор с поля. Потом снова занес, кликнуд на нужном диве один раз, он поменял свой цвет, и я снова убрал курсор с поля.. вот как то так...

идеально было это чтоб mousemove (ну или hover) срабатывали только при click ЛКМ... вот это я безуспешно пытался реализовать. Улыбка
 
 Top
nerv
Отправлено: 14 Февраля, 2014 - 09:37:48
Post Id



Посетитель


Покинул форум
Сообщений всего: 407
Дата рег-ции: Февр. 2013  
Откуда: Россия


Помог: 9 раз(а)
Barakuda пишет:
а без нажатого ctrl

CODE (javascript):
скопировать код в буфер обмена
  1. .click(function (e) {
  2.     if(e.ctrlKey) {


Barakuda пишет:
при click ЛКМ...

CODE (javascript):
скопировать код в буфер обмена
  1. .click(function (e) {
  2.     if(e.which === 1) {


это гуглится на раз-два
http://learn.javascript.ru/mouse-clicks

(Отредактировано автором: 14 Февраля, 2014 - 09:40:32)



-----
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
 
 Top
MAXUS
Отправлено: 14 Февраля, 2014 - 11:27:36
Post Id


Посетитель


Покинул форум
Сообщений всего: 329
Дата рег-ции: Апр. 2011  


Помог: 7 раз(а)
Barakuda пишет:
Вы не совсем правильно поняли суть моего вопроса. Мне нужно чтоб замененный класс сохранялся таковым.
Я делаю редактор карты, мне нужно чтоб я занес курсор над полем, нажал кнопку, провел линию - и дивы над которыми я провел курсором - поменяли цвет. Далее я отпустил кнопку, и спокойно убрал курсор с поля. Потом снова занес, кликнуд на нужном диве один раз, он поменял свой цвет, и я снова убрал курсор с поля.. вот как то так...

идеально было это чтоб mousemove (ну или hover) срабатывали только при click ЛКМ... вот это я безуспешно пытался реализовать. Улыбка


А линия кривая что ли может быть? Т.е. можно вообще будет все закрасить?
(Добавление)
Barakuda пишет:
есть матрица 10х10 из 100 дивов, когда провожу над дивами курсором - они меняют цвет, но нужно сделать так, чтоб по клику выбранный див менялся обратно.
Проблема в том, что чтоб дойти до нужного дива - я провожу курсором над остальными дивами, и если мне не нужно на них менять цвет - он всё равно меняется.

как сделать так, чтоб например при нажатом ctrl свойство mouseover срабатывало, а без нажатого ctrl - можно было работать кликом?


Как минимум:

1. Надо вводить переменную, скажем status, которая устанавливается в true при mousedown на диве и откатывается в false при mouseup на document. Также при mousedown на диве он должен (судя по всему) краситься или обесцвечиваться в зависимости от текущего состояния (но тут масса нюансов).
2. Вводить обработчик события onmousemove или на document или на родительский div-контейнер. Обработчик должен красить div-ы только если переменная status==true, а target=дочерний div (т.е. любой из тех, которые можно красить), и ничего не делать, если status==false.

Вощем, задача на самом деле не из простых. Тупо даже на том, что драг надо будет грамотно отменить, уже нюансы начинаются.

(Отредактировано автором: 14 Февраля, 2014 - 11:54:33)

 
 Top
Barakuda
Отправлено: 14 Февраля, 2014 - 14:45:50
Post Id



Гость


Покинул форум
Сообщений всего: 88
Дата рег-ции: Окт. 2012  
Откуда: Одесса, украина


Помог: 0 раз(а)
MAXUS, вот Вы меня правильно поняли. Я и делал таким образом, вводил переменную check, которая меняла свое значение, но привязывал её к чекбоксу, и проверял через if, но так - ничего не работало...

ведь если у меня происходит изменение переменной ниже кода функции, который отвечает за выбор клика или маусовера, переменная работать будет ? или нет ?

точнее сначала я сделал так, чтоб читалось состояние чекбокса, потом, когда это не работало, я уже ввел переменную check, которая меняла состояние при событии .change у чекбокса.

(Отредактировано автором: 14 Февраля, 2014 - 15:20:45)

 
 Top
VenZell
Отправлено: 14 Февраля, 2014 - 15:45:12
Post Id


Частый гость


Покинул форум
Сообщений всего: 237
Дата рег-ции: Июнь 2013  


Помог: 12 раз(а)
Решение <-- ссылка (при зажатом ctrl красит клетки по движению мыши; по клику на клетку переключает ее цвет)

CODE (javascript):
скопировать код в буфер обмена
  1. $('.column-10').hover(function(e){
  2.     if (e.ctrlKey) {
  3.         $(this).addClass('active');
  4.     }
  5. });
  6. $('.column-10').click(function(e){
  7.     if ($(this).hasClass('active')) {
  8.         $(this).removeClass('active');
  9.     } else {
  10.         $(this).addClass('active');
  11.     }
  12. });

(Отредактировано автором: 14 Февраля, 2014 - 15:46:13)

 
 Top
MAXUS
Отправлено: 14 Февраля, 2014 - 18:28:58
Post Id


Посетитель


Покинул форум
Сообщений всего: 329
Дата рег-ции: Апр. 2011  


Помог: 7 раз(а)
Barakuda пишет:
MAXUS, вот Вы меня правильно поняли.


Наверное, так быстрее будет:

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>TEST</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. .parent{
  9. width: 320px;
  10. height: 320px;
  11. }
  12. .child{
  13. float: left;
  14. background: lightgrey;
  15. margin: 1px;
  16. width: 30px;
  17. height: 30px;
  18. }
  19. .child[data-selected]{
  20. background: red;
  21. }
  22. </style>
  23. <script>
  24. window.onload=function(){
  25.         var status=false;
  26.         function noDrag(){
  27.                 return false;
  28.         }
  29.         document.addEventListener(
  30.                 "mouseup",
  31.                 function(event){
  32.                         status=false;
  33.                         if(document.ondragstart==noDrag) document.ondragstart="";
  34.                 }
  35.         );
  36.  
  37.         function addDiv(){
  38.                 var div=parentDiv.appendChild(childDiv.cloneNode());
  39.                 div.addEventListener(
  40.                         "click",
  41.                         function(event){
  42.                                 if(this.getAttribute("data-selected")) this.removeAttribute("data-selected");
  43.                                 else this.setAttribute("data-selected", true);
  44.                         }
  45.                 );             
  46.         }
  47.         var parentDiv=document.createElement("div");
  48.         parentDiv.className="parent";
  49.         parentDiv.addEventListener(
  50.                 "mousemove",
  51.                 function(event){
  52.                         if(!status||event.target.className!="child") return false;
  53.                         event.target.setAttribute("data-selected", true);
  54.                 }
  55.         );
  56.         parentDiv.addEventListener(
  57.                 "mousedown",
  58.                 function(event){
  59.                         document.ondragstart = noDrag;
  60.                         status=true;
  61.                 }
  62.         );
  63.         var childDiv=document.createElement("div");
  64.         childDiv.className="child";
  65.         for(var i=0;i<100;i++) addDiv();
  66.         document.body.appendChild(parentDiv);
  67.        
  68. }
  69. </script>
  70. </head>
  71. <body>
  72. </body>
  73. </html>
  74.  


Просто в html файл это сохрани и запусти. Разберешься, значит, доделаешь, как надо в случае чего...

Добавление: Тока я чето, видать, тоже недопонял. В моем примере жмешь на див и ведешь мышь, тогда красится. А на клик перекрашивается.

(Отредактировано автором: 14 Февраля, 2014 - 18:59:43)

 
 Top
Barakuda
Отправлено: 14 Февраля, 2014 - 18:30:58
Post Id



Гость


Покинул форум
Сообщений всего: 88
Дата рег-ции: Окт. 2012  
Откуда: Одесса, украина


Помог: 0 раз(а)
VenZell, спасибо огромное, Ваш пример работает! Закатив глазки
 
 Top
MAXUS
Отправлено: 14 Февраля, 2014 - 18:43:13
Post Id


Посетитель


Покинул форум
Сообщений всего: 329
Дата рег-ции: Апр. 2011  


Помог: 7 раз(а)
Удалено...

(Отредактировано автором: 14 Февраля, 2014 - 18:52:47)

 
 Top
Barakuda
Отправлено: 14 Февраля, 2014 - 19:08:32
Post Id



Гость


Покинул форум
Сообщений всего: 88
Дата рег-ции: Окт. 2012  
Откуда: Одесса, украина


Помог: 0 раз(а)
MAXUS, спасибо за помощь, но пример который выше - полностью рабочий, я его переработал под свои нужды и решил поставленную задачу.
 
 Top
MAXUS
Отправлено: 14 Февраля, 2014 - 21:25:17
Post Id


Посетитель


Покинул форум
Сообщений всего: 329
Дата рег-ции: Апр. 2011  


Помог: 7 раз(а)
VenZell пишет:
Решение <-- ссылка (при зажатом ctrl красит клетки по движению мыши; по клику на клетку переключает ее цвет)

CODE (javascript):
скопировать код в буфер обмена
  1. $('.column-10').hover(function(e){
  2.     if (e.ctrlKey) {
  3.         $(this).addClass('active');
  4.     }
  5. });
  6. $('.column-10').click(function(e){
  7.     if ($(this).hasClass('active')) {
  8.         $(this).removeClass('active');
  9.     } else {
  10.         $(this).addClass('active');
  11.     }
  12. });


Из любопытства воспроизвел на JS:

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. function _with(element){
  3.         function getPattern(className){return new RegExp("\\s"+className+"\\s|\\s"+className+"$|^"+className+"\\s|^"+className+"$","i")};
  4.         return {
  5.                 "removeClass":function(className){
  6.                         element.className.replace(getPattern(className), "");
  7.                 },
  8.                 "addClass":function(className){
  9.                         if(!this.hasClass(className)) element.className+=" "+className;
  10.                 },
  11.                 "toggleClass":function(className){
  12.                         if(!this.hasClass(className)) element.className+=" "+className;
  13.                         else element.className=element.className.replace(getPattern(className),"");
  14.                 },
  15.                 "hasClass":function(className){
  16.                         if(element.className.search(getPattern(className))<0) return false;
  17.                         else return true;
  18.                 }
  19.         }
  20. }
  21.        
  22. var divs=document.querySelectorAll(".div");
  23. for(var i=0; i<divs.length; i++){
  24.         divs[i].addEventListener(
  25.                 "mouseover",
  26.                 function(event){
  27.                         if(ctrlKey) _with(this).addClass("active");
  28.                 }
  29.         );
  30.         divs[i].addEventListener(
  31.                 "click",
  32.                 function(event){
  33.                         _with(this).toggleClass("active");
  34.                 }
  35.         );
  36. }
  37.  
  38. var ctrlKey=false;
  39.  
  40. document.addEventListener(
  41.         "keydown",
  42.         function(event){
  43.                 if(event.keyCode==17) ctrlKey=true;
  44.         }
  45. );
  46. document.addEventListener(
  47.         "keyup",
  48.         function(event){
  49.                 if(event.keyCode==17) ctrlKey=false;
  50.         }
  51. );
  52.  
 
 Top
Barakuda
Отправлено: 16 Февраля, 2014 - 00:31:53
Post Id



Гость


Покинул форум
Сообщений всего: 88
Дата рег-ции: Окт. 2012  
Откуда: Одесса, украина


Помог: 0 раз(а)
MAXUS, мне кажется что решение с применением jquery проще хотя бы тем, что более понятен при листинге программы ) ну и экономия байтов тоже важна, хоть не столь актуальна как в девяностых Хорошо
 
 Top
MAXUS
Отправлено: 18 Февраля, 2014 - 04:29:58
Post Id


Посетитель


Покинул форум
Сообщений всего: 329
Дата рег-ции: Апр. 2011  


Помог: 7 раз(а)
Barakuda пишет:
MAXUS, мне кажется что решение с применением jquery проще хотя бы тем, что более понятен при листинге программы ) ну и экономия байтов тоже важна, хоть не столь актуальна как в девяностых Хорошо


О какой экономии байтов идет речь?! Библиотека jq 1.9 весила больше 200 Kb, 1.11 весит 94 Kb (заметно оптимизировали, о чем этот говорит?), 2.1 - 81 Kb... В 200-300 Kb, по хорошему, в среднем вся страница вместе с картинками должна умещаться, не больше (по моим представлениям). Это не аргумент, кмк. В данном случае вместо почти 100 Kb мы имеем реально байты. Особенно, если учесть нижеследующее.

А что касается листинга... В листинге проще. И то, если не понимать, где там что. А на самом деле листинг, который соответствует приведенному у VenZell коду jq - это ровно вот эти строки:

CODE (javascript):
скопировать код в буфер обмена
  1. var divs=document.querySelectorAll(".div");
  2. for(var i=0; i<divs.length; i++){
  3.         divs[i].addEventListener(
  4.                 "mouseover",
  5.                 function(event){
  6.                         if(ctrlKey) _with(this).addClass("active");
  7.                 }
  8.         );
  9.         divs[i].addEventListener(
  10.                 "click",
  11.                 function(event){
  12.                         _with(this).toggleClass("active");
  13.                 }
  14.         );
  15. }


Если сравнить с этим:

CODE (javascript):
скопировать код в буфер обмена
  1. $('.column-10').hover(function(e){
  2.     if (e.ctrlKey) {
  3.         $(this).addClass('active');
  4.     }
  5. });
  6. $('.column-10').click(function(e){
  7.     if ($(this).hasClass('active')) {
  8.         $(this).removeClass('active');
  9.     } else {
  10.         $(this).addClass('active');
  11.     }
  12. });

то код на js ненамного сложнее.

Остальное - это то, для чего подгружается jq...

Это функция, которая работает с CSS классами и включает removeClass, addClass, toggleClass! и hasClass:

CODE (javascript):
скопировать код в буфер обмена
  1. function _with(element){
  2.         function getPattern(className){return new RegExp("\\s"+className+"\\s|\\s"+className+"$|^"+className+"\\s|^"+className+"$","i")};
  3.         return {
  4.                 "removeClass":function(className){
  5.                         element.className.replace(getPattern(className), "");
  6.                 },
  7.                 "addClass":function(className){
  8.                         if(!this.hasClass(className)) element.className+=" "+className;
  9.                 },
  10.                 "toggleClass":function(className){
  11.                         if(!this.hasClass(className)) element.className+=" "+className;
  12.                         else element.className=element.className.replace(getPattern(className),"");
  13.                 },
  14.                 "hasClass":function(className){
  15.                         if(element.className.search(getPattern(className))<0) return false;
  16.                         else return true;
  17.                 }
  18.         }
  19. }


А это отлов нажатого Ctrl:

CODE (javascript):
скопировать код в буфер обмена
  1. var ctrlKey=false;
  2.  
  3. document.addEventListener(
  4.         "keydown",
  5.         function(event){
  6.                 if(event.keyCode==17) ctrlKey=true;
  7.         }
  8. );
  9. document.addEventListener(
  10.         "keyup",
  11.         function(event){
  12.                 if(event.keyCode==17) ctrlKey=false;
  13.         }
  14. );


ЗЫ А уж если понадобится еще и jq-ui к странице привязать, то об экономии байтов можно вообще не рассуждать. Это чудо техники весит в районе 400 Kb...
 
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB