Изменение макета пользовательского интерфейса при нажатии кнопки - PullRequest
Новая
       1

Изменение макета пользовательского интерфейса при нажатии кнопки

0 голосов
/ 14 декабря 2018

Я работаю над веб-сайтом, на котором я должен предоставить ярлык, скажем, имя ярлыка - «видеть в другом виде», и после нажатия на этот ярлык мой полный макет или шаблон пользовательского интерфейса должен измениться (веб-страницы содержат различные элементы, такие как таблицы,кнопки, формы и т. д.).

Поскольку я только начинаю изучать разработку пользовательского интерфейса, мне действительно нужна помощь.Может ли кто-нибудь предложить мне что-нибудь, как мне этого добиться? Должен ли я поддерживать два разных шаблона для изменения макета одним щелчком мыши (но я думаю, что было бы трудно поддерживать два разных шаблона) или что-то еще?

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

Я бы решил эту проблему с помощью JavaScript и умных классов CSS.

Используя JavaScript, я бы прикрепил прослушиватель событий к элементу ввода, к которому также прикреплена метка.Если щелкнуть метку, она вызовет события элемента ввода.Из этого EventListener можно вызывать функцию, которая может прикрепить класс CSS к элементу <body>. 

document.querySelector('input#input-element-id').addEventListener('click', function() { 
  document.querySelector('body').classList.add('different-layout') 
})

Затем можно использовать CSS, чтобы применить другой макет и стиль.Например: 

.different-layout .title { font-size: 12px; }`

Однако, если пользователь обновит свою страницу, он вернется к исходному виду.Чтобы этого не происходило, вы можете использовать localStorage API и сохранять и извлекать текущее выбранное представление.Вы должны установить представление в localStorage для того же события щелчка, что и для стиля.Вы получите его, а затем добавите класс при загрузке страницы.

0 голосов
/ 14 декабря 2018

Если я правильно понимаю, вы хотите сделать ярлык на форме кликабельным, а затем один раз щелкнуть, затем выполнить другое действие?

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

$("label").on("click", function() {
	$("form").addClass("hideme")
  $(".container").removeClass("hideme")
})
.container {
  position: absolute;
  top: 0;
}
.hideme {
  opacity: 0;
  z-index: -99999;
}

label:hover {
cursor: pointer;
}
.showme {
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form>
<label>Click ME</label>
<input type="text"></input>
</form>

<div class="container hideme">
<p>I am a new container</p>
</div>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...