Скрипты - уровень ученик.
Всем привет. Учусь пока писать примитивные скриптики на jquery . Часто возникают вопросы как укоротить код и сделать его профессиональнее.
Вот например модальное окно. http://jsfiddle.net/hhhh/93eJa/ Есть два вопроса, как сделать код короче и если добавлять крестик и бэкграунд при клике на кнопку, скрипт не работает (открывается но уже не закрывается). |
Цитата:
|
|
hhh,
1. понять что на несуществующий элемент клик неповесить - выход создали элемент повесли клик или поитересовались что такое делегирование и воспользовалсь on. 2. при каждом открытии как-то не по пацански создавать то что уже создали в прошлый клик да ещё вешать обработчики повторно. |
Спасибо! Уже понятнее. Думаю бессмысленно добавлять при клике в модальном окне эти элементы.
Пошаманю с on. |
Модальное окно
hhh,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> - jsFiddle demo by hhhh</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.js'></script>
<style type='text/css'>
body{text-align:center}
.modal{position:fixed;top:50%;left:50%;z-index:1;display:none;margin:0 auto;margin-top:-100px;margin-left:-175px;width:350px;height:200px;background:#fff;border:3px solid #000;border-radius:3px;font-size:15px}
.modal-inner{display:table-cell;height:100%;vertical-align:middle;text-align:center;padding-top:30px}
.modal-inner input{margin-bottom:10px}
.modal-inner input[type=text]{display:inline-block;width:300px;height:30px;text-indent:10px}
.modal-inner input[type=submit]{display:inline-block;margin-top:10px;width:100px;height:25px;cursor:pointer}
button{margin-top:50px;padding:0;border:0;border-bottom:1px dashed #000;background:0;font-size:22px;cursor:pointer}
button:hover{border-bottom:1px dashed transparent}
#close{position:absolute;top:0;right:0;width:30px;height:30px;background:#000;color:#fff;cursor:pointer;text-align:center;font-size:15px;line-height:30px}
#bg-close{position:fixed;top:0;left:0;z-index:0;display:none;width:100%;height:100%;background:rgba(0,0,0,0.5);cursor:pointer}
</style>
<script>
$(function()
{
var divs =[{id: 'close', text: 'X', click: foo, appendTo: '.modal'},
{id: 'bg-close', click: foo, appendTo: 'body'}];
$.each(divs, function(indx, el)
{
$('<div/>', el)
}
);
function foo()
{
$('.modal')['fade' + (this.id? 'Out': 'In')](500);
$('#bg-close').css('display', this.id? 'none': 'block');
}
$('button').click(foo);
}
);
</script>
</head>
<body>
<div class="modal">
<div class="modal-inner">
<input type="text" value="Имя">
<input type="text" value="Телефон">
<input type="submit" value="Отправить">
</div>
</div>
<button>Заказать звонок</button>
</body>
</html>
|
То что надо. Буду смотреть, вникать и думать:)
|
Есть такой скрипт маски http://digitalbush.com/projects/masked-input-plugin/.
http://jsfiddle.net/hhhh/R7U4K/1/ Тут я написал изменение стилизация инпута после того как номер введен. А мне нужно сделать так чтобы текст подсвечивался красным и обводился бордером, если поле не заполнено до конца, когда инпут вне фокуса. Типо тултипа. Подскажите, пожалуйста, куда копать... |
Цитата:
|
Проблема в том что при клике на инпут появляется маска которая заполняет value.
С помощью блюр вывести тултип не тяжело, или сравнить если в value меньше 4 символов например. Я не пойму пока как повесить событие если в самой маске недостаточно символов. |
|
Спасибо!:)
Есть еще вариант до которого пока мой мозг дотягивает http://jsfiddle.net/hhhh/R7U4K/3/ Но маска не наглядная пользователю, поэтому не подходит. Может кому-то понадобится. |
Все-таки смотрю и не могу въехать в логику this.value == '' в этом скрипте.
|
hhh,
при уходе с инпута (blur) плагин отработал -- маска несовпала он очистил инпут - наш blur сработает затем -- в инпуте пусто -- делаем напоминание о заполнении. ненадо вычислять длину -- если данные в инпуте есть значит они правильные - если неправильные в инпуте ничего нет |
| Часовой пояс GMT +3, время: 02:39. |