Оценки читателей
0 Лайк 0 Лавки 0 Ахахах! 0 Ого! 0 Восторг 0 Печаль 0 Грусняшь
Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Авторские работы
- Другие модули
- Выпадающие подсказки с E-mai Адресами 2.0
DEMO
+
Всем привет, мы уже выпускали его но мы решили облегчить его и упростить установку. Сам же скрипт упрощает ввод E-mai Адреса путем выпадения подсказок нужных зон!...
Что Нового:
1. Авто определение координат поля заполнения email.
2. Массив перебора email адресов.
Установка:
1. Для input заполнения добавляем класс auto-mail
2. Добавляем js скрипт:
3. Добавим CSS стили:
Что Нового:
1. Авто определение координат поля заполнения email.
2. Массив перебора email адресов.
Установка:
1. Для input заполнения добавляем класс auto-mail
Код
Пример: <input class="auto-mail" value="" placeholder="Введите свой E-mail ">
2. Добавляем js скрипт:
Код
$(function () {
auToMail = $('.auto-mail')[0];
aMtop = auToMail.offsetTop;
aMleft = auToMail.offsetLeft;
$('body').append('<div id="all-mail" style="top:'+aMtop+'px;left:'+aMleft+'px;"></div>');
function mMail() {
var mMail = $('input').val();
if(mMail.length > 2 | mMail.indexOf('@') != -1) {
var MailVer = ["bk.ru", "ro.ru", "ya.ru","me.com","gmx.com","list.ru","mail.ru","gmail.com","inbox.ru","lenta.ru","yandex.ru","yahoo.ru","hotmail.ru","outlook.ru"];
$('#all-mail').html('');
MailVer.forEach(function(entry) {
$('#all-mail').append('<div class="myMail"><i>'+mMail+'</i>@'+entry+'</div>').show();
});
} else {$('#all-mail').hide();}
myMail();
if(mMail.indexOf('@') != -1 || mMail.indexOf('.') != -1 || mMail.indexOf(' ') != -1) {$('#all-mail').hide();}
}
function myMail() {
$('.myMail').click(function () {
var mThismail = $(this).html();
mThismail = mThismail.replace('<i>','').replace('</i>','');
$('#all-mail').hide();
$('input').val(mThismail);
});
$(document).click(function () {$('#all-mail').hide();});
};
$('input').keyup(function () {
mMail();
});
});
auToMail = $('.auto-mail')[0];
aMtop = auToMail.offsetTop;
aMleft = auToMail.offsetLeft;
$('body').append('<div id="all-mail" style="top:'+aMtop+'px;left:'+aMleft+'px;"></div>');
function mMail() {
var mMail = $('input').val();
if(mMail.length > 2 | mMail.indexOf('@') != -1) {
var MailVer = ["bk.ru", "ro.ru", "ya.ru","me.com","gmx.com","list.ru","mail.ru","gmail.com","inbox.ru","lenta.ru","yandex.ru","yahoo.ru","hotmail.ru","outlook.ru"];
$('#all-mail').html('');
MailVer.forEach(function(entry) {
$('#all-mail').append('<div class="myMail"><i>'+mMail+'</i>@'+entry+'</div>').show();
});
} else {$('#all-mail').hide();}
myMail();
if(mMail.indexOf('@') != -1 || mMail.indexOf('.') != -1 || mMail.indexOf(' ') != -1) {$('#all-mail').hide();}
}
function myMail() {
$('.myMail').click(function () {
var mThismail = $(this).html();
mThismail = mThismail.replace('<i>','').replace('</i>','');
$('#all-mail').hide();
$('input').val(mThismail);
});
$(document).click(function () {$('#all-mail').hide();});
};
$('input').keyup(function () {
mMail();
});
});
3. Добавим CSS стили:
Код
div#all-mail {display:none;
position: absolute;
padding: 5px;
background: #344149;
color: #fff;
margin: 35px 0px 0px 0px;
border: 1px solid #000;
border-radius: 2px;
}
div#all-mail:after, div#all-mail:before {
bottom: 100%;
left: 20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
div#all-mail:after {
border-color: rgba(52, 65, 73, 0);
border-bottom-color: #344149;
border-width: 8px;
margin-left: -8px;
}
div#all-mail:before {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000;
border-width: 9px;
margin-left: -9px;
}
.myMail {
cursor: pointer;
padding: 2px 10px 5px 0px;
margin-top: 5px;
font-size: 12px;
font-family: sans-serif;
}
.myMail:hover {
background: rgba(0, 0, 0, 0.38);
}
.myMail i {
font-style: normal;
background: #1c90f3;
color: white;
padding: 2px 5px 5px 5px;
margin-right: 3px;
}
.myMail:hover i {background: forestgreen;}
position: absolute;
padding: 5px;
background: #344149;
color: #fff;
margin: 35px 0px 0px 0px;
border: 1px solid #000;
border-radius: 2px;
}
div#all-mail:after, div#all-mail:before {
bottom: 100%;
left: 20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
div#all-mail:after {
border-color: rgba(52, 65, 73, 0);
border-bottom-color: #344149;
border-width: 8px;
margin-left: -8px;
}
div#all-mail:before {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000;
border-width: 9px;
margin-left: -9px;
}
.myMail {
cursor: pointer;
padding: 2px 10px 5px 0px;
margin-top: 5px;
font-size: 12px;
font-family: sans-serif;
}
.myMail:hover {
background: rgba(0, 0, 0, 0.38);
}
.myMail i {
font-style: normal;
background: #1c90f3;
color: white;
padding: 2px 5px 5px 5px;
margin-right: 3px;
}
.myMail:hover i {background: forestgreen;}
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Добавил: Best_Studio
Дата добавления: 09.04.2018 в 20:32 по МСК
Категория: Другие модули
Просмотров: 501
Комментариев: 0
Эмоций:
Дата добавления: 09.04.2018 в 20:32 по МСК
Категория: Другие модули
Просмотров: 501
Комментариев: 0
Эмоций:
Теги: