Оценки читателей
0 Лайк 0 Лавки 0 Ахахах! 0 Ого! 0 Восторг 0 Печаль 0 Грусняшь
Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Авторские работы
- Другие модули
- Выпадающие подсказки с E-mai Адресами.
DEMO
+
Скрипт упрощает ввод E-mai Адреса путем выпадения подсказок нужных зон!... Скрипт легкий и прост в установке.
Установка:
Добавляем js скрипт:
#test - Меняем переменную на ту которая находится ваш input поля ввода.
2. Добавим CSS стили:
Установка:
Добавляем js скрипт:
Код
$(function () {
$('#test').append('<div id="all-mail"></div>');
function mMail() {
var mMail = $('input').val();
if(mMail.length > 3 | mMail.indexOf('@') != -1) {
$('#all-mail').html('<div class="myMail"><i>'+mMail+'</i>@bk.ru</div><div class="myMail"><i>'+mMail+'</i>@ro.ru</div><div class="myMail"><i>'+mMail+'</i>@ya.ru</div><div class="myMail"><i>'+mMail+'</i>@me.com</div><div class="myMail"><i>'+mMail+'</i>@gmx.com</div><div class="myMail"><i>'+mMail+'</i>@list.ru</div><div class="myMail"><i>'+mMail+'</i>@mail.ru</div><div class="myMail"><i>'+mMail+'</i>@gmail.com</div><div class="myMail"><i>'+mMail+'</i>@inbox.ru</div><div class="myMail"><i>'+mMail+'</i>@lenta.ru</div><div class="myMail"><i>'+mMail+'</i>@yandex.ru</div><div class="myMail"><i>'+mMail+'</i>@yahoo.ru</div><div class="myMail"><i>'+mMail+'</i>@hotmail.ru</div><div class="myMail"><i>'+mMail+'</i>@outlook.ru</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();
});
});
$('#test').append('<div id="all-mail"></div>');
function mMail() {
var mMail = $('input').val();
if(mMail.length > 3 | mMail.indexOf('@') != -1) {
$('#all-mail').html('<div class="myMail"><i>'+mMail+'</i>@bk.ru</div><div class="myMail"><i>'+mMail+'</i>@ro.ru</div><div class="myMail"><i>'+mMail+'</i>@ya.ru</div><div class="myMail"><i>'+mMail+'</i>@me.com</div><div class="myMail"><i>'+mMail+'</i>@gmx.com</div><div class="myMail"><i>'+mMail+'</i>@list.ru</div><div class="myMail"><i>'+mMail+'</i>@mail.ru</div><div class="myMail"><i>'+mMail+'</i>@gmail.com</div><div class="myMail"><i>'+mMail+'</i>@inbox.ru</div><div class="myMail"><i>'+mMail+'</i>@lenta.ru</div><div class="myMail"><i>'+mMail+'</i>@yandex.ru</div><div class="myMail"><i>'+mMail+'</i>@yahoo.ru</div><div class="myMail"><i>'+mMail+'</i>@hotmail.ru</div><div class="myMail"><i>'+mMail+'</i>@outlook.ru</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();
});
});
#test - Меняем переменную на ту которая находится ваш input поля ввода.
2. Добавим CSS стили:
Код
div#all-mail {display:none;
position: absolute;
padding: 5px;
background: #344149;
color: #fff;
margin: 10px 0px 0px 10px;
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: 10px 0px 0px 10px;
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
Дата добавления: 18.07.2016 в 12:08 по МСК
Категория: Другие модули
Просмотров: 625
Комментариев: 0
Эмоций:
Дата добавления: 18.07.2016 в 12:08 по МСК
Категория: Другие модули
Просмотров: 625
Комментариев: 0
Эмоций:
Теги: