- 0
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
BSandro
На просторах интернета, нашел пошаговую регистрацию на javascript
Так как я еще учу javascript, не быстро, но пытаюсь...
Не поможете ли вы разобраться с данным скриптом
содержит jquery.inputfocus-0.9.min
$(function(){ //original field values var field_values = { //id : value 'username' : 'Логин', 'password' : 'Пароль', 'cpassword' : 'Пароль', 'firstname' : 'Имя', 'lastname' : 'Фамилия', 'email' : 'email' }; //inputfocus $('input#username').inputfocus({ value: field_values['username'] }); $('input#password').inputfocus({ value: field_values['password'] }); $('input#cpassword').inputfocus({ value: field_values['cpassword'] }); $('input#lastname').inputfocus({ value: field_values['lastname'] }); $('input#firstname').inputfocus({ value: field_values['firstname'] }); $('input#email').inputfocus({ value: field_values['email'] }); //reset progress bar $('#progress').css('width','0'); $('#progress_text').html('0% Выполнено'); //first_step $('form').submit(function(){ return false; }); $('#submit_first').click(function(){ //remove classes $('#first_step input').removeClass('error').removeClass('valid'); //ckeck if inputs aren't empty var fields = $('#first_step input[type=text], #first_step input[type=password]'); var error = 0; fields.each(function(){ var value = $(this).val(); if( value.length<4 || value==field_values[$(this).attr('id')] ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } }); if(!error) { if( $('#password').val() != $('#cpassword').val() ) { $('#first_step input[type=password]').each(function(){ $(this).removeClass('valid').addClass('error'); $(this).effect("shake", { times:3 }, 50); }); return false; } else { //update progress bar $('#progress_text').html('33% Выполнено'); $('#progress').css('width','113px'); //slide steps $('#first_step').slideUp(); $('#second_step').slideDown(); } } else return false; }); $('#submit_second').click(function(){ //remove classes $('#second_step input').removeClass('error').removeClass('valid'); var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; var fields = $('#second_step input[type=text]'); var error = 0; fields.each(function(){ var value = $(this).val(); if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } }); if(!error) { //update progress bar $('#progress_text').html('66% Выполнено'); $('#progress').css('width','226px'); //slide steps $('#second_step').slideUp(); $('#third_step').slideDown(); } else return false; }); $('#submit_third').click(function(){ //update progress bar $('#progress_text').html('100% Выполнено'); $('#progress').css('width','339px'); //prepare the fourth step var fields = new Array( $('#username').val(), $('#password').val(), $('#email').val(), $('#firstname').val() + ' ' + $('#lastname').val(), $('#age').val(), $('#gender').val(), $('#country').val() ); var tr = $('#fourth_step tr'); tr.each(function(){ //alert( fields[$(this).index()] ) $(this).children('td:nth-child(2)').html(fields[$(this).index()]); }); //slide steps $('#third_step').slideUp(); $('#fourth_step').slideDown(); }); $('#submit_fourth').click(function(){ //send information to server alert('Данные отправлены'); });});Я хочу написать примерно такого рода но немного в другую степень...
Я вот немного тут по разбирал код
$('#third_step').slideUp(); //выводит слайд сверху $('#fourth_step').slideDown(); // выводит слайд снзу// то есть при нажатий кнопки "далее" слайд уходит в верх и вылазит новый снизу.$('#progress_text').html('33% Выполнено');$('#progress').css('width','113px');// Ну тут понятно с каждым шагом мы меняем название, например с 0% выполнено на 33% выполнено//Ну и конечно задаем новые параметры полоски, в нашем случай это widh:113px $('#submit_fourth').click(function(){//send information to serveralert('Данные отправлены');});//Тут в самом начале уроке говорилось про alert() про сплывающее окно!//Я к сожалению не дошел до функций, но чуть чуть их понимаю$(function(){//original field valuesvar field_values = {//id : value'username' : 'Логин','password' : 'Пароль','cpassword' : 'Пароль','firstname' : 'Имя','lastname' : 'Фамилия','email' : 'email'};//Как видно тут, мы функций с переменной filed_values присваиваем//ниже приведенную таблицу.Я хочу сделать почти что то в этом роде..
Только немного по другому..
Допустим первое у нас имя, второе фамилия..
А дальше уже прикрепить проверку, введены ли туда какие то данные..
Допустим если человек не ввел туда не чего, справа у input выводится облако, и в этом облаке уже текст ошибки...
Например:
Поле не может быть пустым, введите имя от 3 до 12 символов
так же у второго...
Но написать я хочу это уже с вашей поддержкой...
Как говорится не что бы там вы за меня все написали, а если я где то что то не так сделал, вы мне бы подсказали.
Ну пожалуй я начну:
$(function(){ var form_values = { 'firstname' : 'Имя', 'lastname' : 'Фамилия' };$('input#firstname').inputfocus({ value: form_values['firstname'] });$('input#lastname').inputfocus({ value: form_values['lastname'] });//для кнопки submit$('form').submit(function(){ return false; });$('#submit_step1').click(function(){ //сама кнопка у нее свое значение name=""$('#step input').removeClass('error').removeClass('valid'); // это у нас для того что бы удалить предыдущий класс// и потом уже что бы появился новый класс, по другому новая форма.А вот дальше надо сделать проверку к сожалению до этого допереть не могу..
Edited by BSandroLink to comment
Share on other sites
24 answers to this question
Recommended Posts