Блог

Главная - Вопросы по программированию - Сделайте активный значок ссылкой после активации, а не ссылкой, если он не активирован

Сделайте активный значок ссылкой после активации, а не ссылкой, если он не активирован

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я использую шаблон bootstrap, который я нашел в Интернете, для создания простой многоступенчатой формы. В верхней части шаблона есть несколько значков, которые указывают, где находится пользователь в процессе заполнения формы. Как только пользователь завершает шаг формы и нажимает кнопку «Далее», карта значков вверху переходит к следующему шагу, и предыдущий шаг теперь активирован (цвет изменен).

Я хочу иметь возможность сделать эти значки активной ссылкой после того, как пользователь завершит шаг, чтобы они могли быстро вернуться к предыдущему шагу, нажав на значок. Как я могу сделать значки активной ссылкой на связанные с ними шаги после их активации. Ниже приведена моя ссылка на html, js и jsfiddle.

HTML:

 <body>
  <!-- Top content -->
  <div class="top-content">
    <div class="container">

      <div class="row">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
          <form role="form" action="" method="post" class="f1">

            <h3>Register To Our App</h3>
            <p>Fill in the form to get instant access</p>
            <div class="f1-steps">
              <div class="f1-progress">
                <div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
              </div>
              <div class="f1-step active">
                <div class="f1-step-icon"><i class="fa fa-user"></i></div>
                <p>about</p>
              </div>
              <div class="f1-step">
                <div class="f1-step-icon"><i class="fa fa-key"></i></div>
                <p>account</p>
              </div>
              <div class="f1-step">
                <div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
                <p>social</p>
              </div>
            </div>

            <fieldset>
              <h4>Tell us who you are:</h4>
              <div class="form-group">
                <label class="sr-only" for="f1-first-name">First name</label>
                <input type="text" name="f1-first-name" placeholder="First name..." class="f1-first-name form-control" id="f1-first-name">
              </div>
              <div class="form-group">
                <label class="sr-only" for="f1-last-name">Last name</label>
                <input type="text" name="f1-last-name" placeholder="Last name..." class="f1-last-name form-control" id="f1-last-name">
              </div>
              <div class="form-group">
                <label class="sr-only" for="f1-about-yourself">About yourself</label>
                <textarea name="f1-about-yourself" placeholder="About yourself..." class="f1-about-yourself form-control" id="f1-about-yourself"></textarea>
              </div>
              <div class="f1-buttons">
                <button type="button" class="btn btn-next">Next</button>
              </div>
            </fieldset>

            <fieldset>
              <h4>Set up your account:</h4>
              <div class="form-group">
                <label class="sr-only" for="f1-email">Email</label>
                <input type="text" name="f1-email" placeholder="Email..." class="f1-email form-control" id="f1-email">
              </div>
              <div class="form-group">
                <label class="sr-only" for="f1-password">Password</label>
                <input type="password" name="f1-password" placeholder="Password..." class="f1-password form-control" id="f1-password">
              </div>
              <div class="form-group">
                <label class="sr-only" for="f1-repeat-password">Repeat password</label>
                <input type="password" name="f1-repeat-password" placeholder="Repeat password..." class="f1-repeat-password form-control" id="f1-repeat-password">
              </div>
              <div class="f1-buttons">
                <button type="button" class="btn btn-previous">Previous</button>
                <button type="button" class="btn btn-next">Next</button>
              </div>
            </fieldset>

            <fieldset>
              <h4>Social media profiles:</h4>
              <div class="form-group">
                <label class="sr-only" for="f1-facebook">Facebook</label>
                <input type="text" name="f1-facebook" placeholder="Facebook..." class="f1-facebook form-control" id="f1-facebook">
              </div>
              <div class="form-group">
                <label class="sr-only" for="f1-twitter">Twitter</label>
                <input type="text" name="f1-twitter" placeholder="Twitter..." class="f1-twitter form-control" id="f1-twitter">
              </div>
              <div class="form-group">
                <label class="sr-only" for="f1-google-plus">Google plus</label>
                <input type="text" name="f1-google-plus" placeholder="Google plus..." class="f1-google-plus form-control" id="f1-google-plus">
              </div>
              <div class="f1-buttons">
                <button type="button" class="btn btn-previous">Previous</button>
                <button type="submit" class="btn btn-submit">Submit</button>
              </div>
            </fieldset>

          </form>
        </div>
      </div>

    </div>
  </div>

</body>

JavaScript:

 function scroll_to_class(element_class, removed_height) {
  var scroll_to = $(element_class).offset().top - removed_height;
  if ($(window).scrollTop() != scroll_to) {
    $('html, body').stop().animate({
      scrollTop: scroll_to
    }, 0);
  }
}

function bar_progress(progress_line_object, direction) {
  var number_of_steps = progress_line_object.data('number-of-steps');
  var now_value = progress_line_object.data('now-value');
  var new_value = 0;
  if (direction == 'right') {
    new_value = now_value   (100 / number_of_steps);
  } else if (direction == 'left') {
    new_value = now_value - (100 / number_of_steps);
  }
  progress_line_object.attr('style', 'width: '   new_value   '%;').data('now-value', new_value);
}

jQuery(document).ready(function() {

  /*
      Form
  */
  $('.f1 fieldset:first').fadeIn('slow');

  $('.f1 input[type="text"], .f1 input[type="password"], .f1 textarea').on('focus', function() {
    $(this).removeClass('input-error');
  });

  // next step
  $('.f1 .btn-next').on('click', function() {
    var parent_fieldset = $(this).parents('fieldset');
    var next_step = true;
    // navigation steps / progress steps
    var current_active_step = $(this).parents('.f1').find('.f1-step.active');
    var progress_line = $(this).parents('.f1').find('.f1-progress-line');

    // fields validation
    parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() {
      if ($(this).val() == "") {
        $(this).addClass('input-error');
        next_step = false;
      } else {
        $(this).removeClass('input-error');
      }
    });
    // fields validation

    if (next_step) {
      parent_fieldset.fadeOut(400, function() {
        // change icons
        current_active_step.removeClass('active').addClass('activated').next().addClass('active');
        // progress bar
        bar_progress(progress_line, 'right');
        // show next step
        $(this).next().fadeIn();
        // scroll window to beginning of the form
        scroll_to_class($('.f1'), 20);
      });
    }

  });

  // previous step
  $('.f1 .btn-previous').on('click', function() {
    // navigation steps / progress steps
    var current_active_step = $(this).parents('.f1').find('.f1-step.active');
    var progress_line = $(this).parents('.f1').find('.f1-progress-line');

    $(this).parents('fieldset').fadeOut(400, function() {
      // change icons
      current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
      // progress bar
      bar_progress(progress_line, 'left');
      // show previous step
      $(this).prev().fadeIn();
      // scroll window to beginning of the form
      scroll_to_class($('.f1'), 20);
    });
  });

  // submit
  $('.f1').on('submit', function(e) {

    // fields validation
    $(this).find('input[type="text"], input[type="password"], textarea').each(function() {
      if ($(this).val() == "") {
        e.preventDefault();
        $(this).addClass('input-error');
      } else {
        $(this).removeClass('input-error');
      }
    });
    // fields validation

  });


});

Ссылка на JSFiddle: https://jsfiddle.net/93r5y1g3/2 /

Комментарии:

1. Помог ли вам мой ответ? Если нет, то мог ли я сделать что-то еще?

2. Извините, я только сейчас возвращаюсь к этому. Да, это помогло. Я новичок в js и jQuery, поэтому небольшой вопрос… итак, если я хочу, чтобы значки (после активации) переходили к соответствующему шагу, вы упомянули о добавлении идентификатора в набор полей. Итак, я могу добавить что-то вроде <идентификатор набора полей=»aboutInfo»> к первому, >идентификатор набора полей = «acctInfo»> ко второму и <идентификатор набора полей = «socialInfo»> к последнему. Теперь, как мне использовать js, чтобы заставить ссылки работать, когда они активированы, но не тогда, когда они не были активированы? Еще раз спасибо за вашу помощь.

3. @vastlysuperiorman Здравствуйте, просто хотел проверить, была ли у вас возможность прочитать мой ответный комментарий и дать какой-либо совет. Еще раз спасибо.

4. извините за это. У меня родился ребенок, поэтому я был отключен на пару недель. Я вскоре обновлю свой ответ.

5. Добавлен обновленный пример. Если это вам подходит, продолжайте и выберите его в качестве правильного ответа. 🙂

Ответ №1:

Лично я бы не стал создавать ссылки на значки, потому что, основываясь на вашем текущем рабочем процессе, вы не хотите фактически переходить на другую страницу. Вы просто хотите выполнить некоторый javascript.

Вместо этого добавьте cursor: pointer; в css для элементов, которые доступны для просмотра, и добавьте прослушиватель событий для click событий для подходящих значков.

Здесь я добавил изменение курсора при наведении курсора на значок, доступный для просмотра. https://jsfiddle.net/93r5y1g3/4 /

Он просто устанавливает следующее в css: 

 .f1-step.activated > .f1-step-icon {
    cursor: pointer;
}

Что касается фактического изменения между наборами полей, похоже, что вы делаете только относительные перемещения. В вашем коде родительский набор полей кнопки, на которую был нажат, исчезает и в next() . Если вы собираетесь разрешить переход между шагами, вам нужно внести два существенных изменения:

  1. Вам нужно, чтобы у каждого набора полей был идентификатор, на который ссылается значок (чтобы при нажатии на значок вы могли найти соответствующий набор полей).
  2. Вам нужно добавить прослушиватель событий для событий «щелчка» на каждом значке, который вы хотите разрешить пользователям нажимать. Возможно, проще всего добавить прослушиватель ко всем загружаемым значкам, а затем заставить вашу функцию просто возвращать false, если пользователю не разрешено нажимать на значок.

Надеюсь, это поможет.

Редактировать:

Я обновил jsfiddle (https://jsfiddle.net/93r5y1g3/8 /) с рабочим примером перехода между наборами полей. Вы можете переходить только к активным наборам полей.

Вот что я изменил:

  1. Добавлены id теги к каждому набору полей.
  2. Добавлено data-fieldset к значкам, чтобы каждый значок можно было связать с набором полей.
  3. Добавлен простой прослушиватель событий для изменения активных значков и наборов полей при нажатии на значок. Обратите внимание, что при нажатии на значок, который не был активирован, ничего не происходит.

Вот слушатель: 

 // Go to step
$('.f1-step-icon').on('click', function(e){
  var current_step = {
      fieldset: $($(".f1-step.active").children('.f1-step-icon').data('fieldset')),
      circle: $(".f1-step.active")
  }
  var jump_to_step = {
      fieldset: $($(this).data('fieldset')),
      circle: $(this).parent()
  }
  if (! jump_to_step.circle.hasClass("activated")) {
      // Right now, this prevents users jumping forward.
      // If you want jumping forward to be allowed, you need to add
      // some logic to leave a step unfinished and force a return to it.
      return;
  }
  current_step.fieldset.fadeOut(400, function() {
    current_step.circle.removeClass('active').addClass('activated')
    jump_to_step.circle.addClass('active');
    jump_to_step.fieldset.fadeIn();
    scroll_to_class($('.f1'), 20);
  });
});