| makc9I | 01.04.2013 12:47 |
Практически все получилось.
Полная картина выглядит так:
Имеется такой блок:
Визуально выглядит так:
При наведении на любую ячейку с надписью свободно видим следующее:
Клик по ячейке приводит к такому:
Вот код, который занимается обработкой сего чуда:
Во всем этом есть одна брешь:
Как только мы вызываем метод off, мы лишаемся всех настроек для нашей ячейки, но это необходимо, чтобы можно было кликнуть в input text для ввода фамилии, и выводы мыши за пределы ячейки не приводили к отмене обработки.
Но, вдруг мы случайно кликнули в ячейку и хотим отменить это действие, для этого я и добавил кнопку "отмена".
Вот ее обработка:
Все, что я могу сделать, это удалить созданную ранее форму. Но хочется, чтобы вся обработка положения мышки также вернулась, думал, что для этого достаточно прикрутить назад такое:
Но как оказалось, прикручивать назад надо вообще весь код, но ведь в этом коде присутствует сама обработка нажатия на кнопку "отмена" и происходит рекурсия. Да и в целом не очень разумно дважды вызывать один и тот же код.
Возникли мысли, что надо как-то обойтись без
Но при этом как-то блокировать обработку мыши на момент клика по ячейке (бронь), чтобы выход за пределы ячейки не приходили к сбросу отображения формы, и сам клик в input text обрабатывался именно как клик туда(чтобы вводить текст), а не как клик по ячейке (бронь).
Вот возникла проблема, решения пока не нашел.
Полная картина выглядит так:
Имеется такой блок:
<div class="order_box" id="56"> <span class="time">10 : 00 - </span> <span class="destination">п. Молочное(5007)</span> <div class="seat1 place">Иванов</div> <div class="seat2 place">Петров</div> <div class="seat3 place free">свободно</div> <div class="seat4 place free">свободно</div> <a class="approve_btn" href="/index.php?&id=56"> подтвердить </a> <div class="not_approved"> Статус:ожидает подтверждения</div> </div>
Визуально выглядит так:
При наведении на любую ячейку с надписью свободно видим следующее:
Клик по ячейке приводит к такому:
Вот код, который занимается обработкой сего чуда:
$(document).ready(function () {
$(".today .free, .usual .free, .holliday .free")
.mouseenter(function () {
$(this).text("бронь")
.css({
"background": "#FAD400",
"color": "#0000CD",
"cursor": "pointer"
})
}).mouseleave(function () {
$(this).text("свободно")
.css({
"background": "",
"color": ""
})
}).click(function () {
var myform = $("<form/>", {
"action": "http://auto/index.php",
"method": "POST",
"id": "add_name_form"
})
$("<input/>", {
"type": "text",
"name": "name",
"class": "name_input"
})
.appendTo(myform);
$("<input/>", {
"type": "submit",
"value": "ok",
"id": "name_submit"
})
.appendTo(myform);
var cell_class = $(this).attr("class").slice(0,5);
var order_id = $(this).parent().attr("id");
$("<input/>", {
"type":"hidden",
"name": "place",
"value": cell_class
})
.appendTo(myform);
$("<input/>", {
"type":"hidden",
"name": "order_id",
"value": order_id
})
.appendTo(myform);
$(".free").off();
$(this).html(myform);
$(this).append("<button> отмена</button>");
$(this).css ({
"cursor":"default"
})
$("button").click (function(){
$("#add_name_form").remove();
$(this).remove();
})
})
})
Во всем этом есть одна брешь:
$(".free").off();
Как только мы вызываем метод off, мы лишаемся всех настроек для нашей ячейки, но это необходимо, чтобы можно было кликнуть в input text для ввода фамилии, и выводы мыши за пределы ячейки не приводили к отмене обработки.
Но, вдруг мы случайно кликнули в ячейку и хотим отменить это действие, для этого я и добавил кнопку "отмена".
Вот ее обработка:
$("button").click (function(){
$("#add_name_form").remove();
$(this).remove();
})
Все, что я могу сделать, это удалить созданную ранее форму. Но хочется, чтобы вся обработка положения мышки также вернулась, думал, что для этого достаточно прикрутить назад такое:
$(".today .free, .usual .free, .holliday .free")
.mouseenter(function () {
$(this).text("бронь")
.css({
"background": "#FAD400",
"color": "#0000CD",
"cursor": "pointer"
})
}).mouseleave(function () {
$(this).text("свободно")
.css({
"background": "",
"color": ""
})
})
Но как оказалось, прикручивать назад надо вообще весь код, но ведь в этом коде присутствует сама обработка нажатия на кнопку "отмена" и происходит рекурсия. Да и в целом не очень разумно дважды вызывать один и тот же код.
Возникли мысли, что надо как-то обойтись без
$(".free").off();
Но при этом как-то блокировать обработку мыши на момент клика по ячейке (бронь), чтобы выход за пределы ячейки не приходили к сбросу отображения формы, и сам клик в input text обрабатывался именно как клик туда(чтобы вводить текст), а не как клик по ячейке (бронь).
Вот возникла проблема, решения пока не нашел.