ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Модальные окна, паттерн, JS
4 сообщений из 4, страница 1 из 1
Модальные окна, паттерн, JS
    #38844887
TepKuH
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TepKuH
Участник
Уважаемые коллеги,
Сам я не местный и имею крайне мало опыта в разработке фронт-ендов и у меня вопрос относительно паттерна проектирования UI. А именно как делать правильно.
Задача следующая:
Есть элементы списка и нужно чтобы при нажатии на какой либо элемент появлялось модальное окно. Где при нажатии на кнопку "Cancel" не происходило ничего, т.е. модальное окно закрывалось.
Но при нажатии на кнопку "Continue" происходила отправка id элемента LI на сервер-сайд.
В качестве демонстрации выше сказанного привожу 3и варианта того что удалось придумать, но я не совсем не уверен в их правильности.
Как впрочем и не уверен в том что есть какой то 4ый расово верный.
В общем хочу получить совет о правильном подходе при работе с модальными окнами.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
	<form id="dialog-confirm" style="display:none">
		<span>If you continue following connections will be lost</span>	
		<input type="hidden" name="tmp">
		<button>Continue</button>
		<button onclick="$('#dialog-confirm').hide(); return false;">Cancel</button>
	</form>
	<ul class="service-menu">
        	<li id="first" onClick="showModal(this);">my first text</li>
                <li id="secod" onClick="showModal(this);">my second text</li>
        </ul>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>




Первый подход не нравится тем что нужно постоянно вызывать функцию удаления всех евентов с элемента $( "#dialog-confirm" ).
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
function showModal(item) {
	var id = $(item).attr("id");
	$( "#dialog-confirm" ).show();
	$( "#dialog-confirm" ).off(); //Вот этот момент больше всего не нравится, так как всегда приходит удаление всех event'ов у #dialog-confirm
	$( "#dialog-confirm" ).on('submit', function(e) {
		var deleted = sendData(id);
	});
}

function sendData(id) {
	console.log(id);
	//Отправка данных на сервер-сайд
	return true;
}



Второй подход не нравится тем что в HTML необходимо держать часть логики, а именно деражать в элемент
<input type="hidden" name="tmp"> что идеологически кажется не правильным.

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
function showModal(item) {
	var id = $(item).attr("id");
	var $tmp = $('#dialog-confirm').find("input[name='tmp']");
	$tmp.val(id);
	$( "#dialog-confirm" ).show();
}

function sendData(id) {
	console.log(id);
	//Отправка данных на сервер-сайд
	return true;
}

$( "#dialog-confirm" ).on('submit', function(e) {
	var $tmp = $('#dialog-confirm').find("input[name='tmp']");
	var id = $tmp.val();
	var deleted = sendData(id);
});



Третий подход нравится больше всего, ибо и код короче и выглядит понятнее, но есть один недостаток, это хранение глобальной переменной вне функций, в случаи наличия большого числа модальных окон, таких глобальных переменных будет очень и очень много, что значительно ухудшит читаемость JS.
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
var id;
function showModal(item) {
	id = $(item).attr("id");
	$( "#dialog-confirm" ).show();
}

function sendData(id) {
	console.log(id);
	//Отправка данных на сервер-сайд
	return true;
}

$( "#dialog-confirm" ).on('submit', function(e) {
	var deleted = sendData(id);
});
...
Рейтинг: 0 / 0
28.12.2014, 17:44
| Ответить | Цитировать | Написать  
Модальные окна, паттерн, JS
    #38845334
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
TepKuHв случаи наличия большого числа модальных окон
а ты их не делай.
В андроиде интерфейс такой, что их всё меньше и меньше.
...
Рейтинг: 0 / 0
29.12.2014, 11:28
| Ответить | Цитировать | Написать  
Модальные окна, паттерн, JS
    #38845481
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
Petro123,
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
 <script>
	 
$(function(){
	$("#item").hide();
	
$(".service-menu").on("click","li[name=text]",function(){
	id=$(this).attr('id');
	$("#hide").val(id);
	$("#item").show();
	});
		
$("button[name=cancel]").on('click',function(){
	$("#item").hide();
	});
	
$("button[name=continue]").on('click',function(){
	console.log ($("#hide").val()); //тут отсылаем данные
	});	
	
});
	
 </script>   
 
</head>

<body>
	<div id="item" >
		<span>If you continue following connections will be lost</span>	
		<button name="continue">Continue</button>
		<button name="cancel">Cancel</button>
	</div>
	
	<ul class="service-menu">
        	<li name="text" id="X">my first text</li>
            <li name="text" id="Y">my second text</li>
            <input id="hide" type="hidden">
    </ul>

</body>
</html>


Можно данные от поля сохранять в куки.. в общем программирование-это ваша фантазия.
...
Рейтинг: 0 / 0
29.12.2014, 13:06
| Ответить | Цитировать | Написать  
Модальные окна, паттерн, JS
    #38845497
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
можно еще просто в переменную загнать:
Код: java
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<script>
	 var a;
$(function(){
	$("#item").hide();
	
$(".service-menu").on("click","li[name=text]",function(){
	id=$(this).attr('id');
	a=id;
	$("#item").show();
	});
		
$("button[name=cancel]").on('click',function(){
	$("#item").hide();
	});
	
$("button[name=continue]").on('click',function(){
	console.log (a); //тут отсылаем данные
	});	
	
});

</script>
...
Рейтинг: 0 / 0
29.12.2014, 13:16
| Ответить | Цитировать | Написать  
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Модальные окна, паттерн, JS
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=83&tid=1446400]:
 0ms
get settings:
 6ms
get forum list:
 11ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 45ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 36ms
get tp. blocked users:
 2ms
others: 248ms
total:  362ms
созд. / загр.: 362ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]