Bricks Grid View Switcher - Native JS
The video demonstrates a method for switching Grid views via an accessible "Radio" set, utilizing Bricks Builder, Custom JavaScript, and CSS. This approach modifies the Grid CSS properties to adjust the views instead of hiding/showing content. Additionally, it incorporates localStorage to preserve the state.
I would love any feedback from users who have comments or ideas to improve on this.
[EDIT] at 04:53 I say "Check for focus", I meant to say "Check for Checked status"
00:00 Intro
03:15 DOM Structure for Radio inputs (Switcher)
07:04 DOM Structure for the main layout grid
10:29 Bricks structure for the "Controls"
15:43 JavaScript for the controls
27:22 Bricks Structure for the Layout Grid - Singl query loop
29:46 CSS for the Layout Grid
33:05 CSS for the Controls - Sorry this should have been after the JS :)
39:25 Reorganising the Controls structure to work with FireFox
43:00 Reflow triggering for Amimation to work properly
45:20 Changing the Carh layout for different views
Link to template used for this demo:
https://wpeasy.sharepoint.com/:u:/s/W...
Смотрите видео Bricks Grid View Switcher - Native JS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь WP Easy 21 Апрель 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 51 раз и оно понравилось 2 людям.