Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на 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
Код
Пример: <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();
});
});


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;}
Данный раздел авторский все работы являются собственностью BS (mybeststudio.ru) любое коммерческое использование строго запрещено.

При копировании материала указываем источник MyBeststudio.ru.

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Поделиться новостью в социальной сети.
Добавил: Best_Studio
Дата добавления: 09.04.2018 в 20:32 по МСК
Категория: Другие модули
Просмотров: 53
Комментариев: 0
Эмоций:
Теги: js, css, best, mail
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]