Пользовательский div, который действует как переключатель - PullRequest
Новая
       15

Пользовательский div, который действует как переключатель

0 голосов
/ 22 января 2019

Я работаю над веб-сайтом, и у меня возникают проблемы с реализацией div (имеет название продукта, цену и изображение), который ведет себя как переключатель (что-то вроде этого https://www.harrys.com/en/us/signup/products)

Любой тип решения будетСледует отметить, что в настоящее время я использую bootstrap4 и JQuery / Javascript

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Идея состоит в том, чтобы позволить пользователю щелкнуть ярлык радиокнопки.Это позволяет окружающему его элементу делать что-то еще и выглядеть так, как вы на самом деле нажимаете.Вы также должны использовать атрибут «for» в метке для ссылки на идентификатор внутри ввода.

Радио отменит выбор других и выберет тот, который был нажат, если вы используете атрибут имени.обратите внимание на разметку, что все радиостанции содержат название «myradio».Хотя у них разные идентификаторы.Это так, что вы можете получить эти данные и использовать их по своему вкусу.

Обратите внимание, что CSS выполняет тяжелую работу.Мы позволяем ему искать вход, который был проверен (input [name = "myradio"]: флажок) и используем "+", чтобы получить следующий элемент после него (.clickable или .clickable .checked-box).

Я также добавил в пример небольшой jQuery, чтобы показать идентификатор выбранного поля в консоли, чтобы вы могли увидеть, что я имею в виду для возврата данных.

Также здесь есть ссылка для получения дополнительной информации о селекторе CSS, который я использовал.

Элемент CSS + селектор элемента

https://www.w3schools.com/cssref/sel_element_pluss.asp

<!DOCTYPE html>
<html>
    <head>
        <title>Code Sample</title>
        <style>
            .div-inline-list{
                margin: 24px auto;
                width: 80%;
                text-align: center;
            }
            .div-inline-list > .product-container{
                display: inline-block;
                margin: 16px;
            }
            .product-container{
                position: relative;
                width: 100px;
                height: 100px;
                padding: 0px;
            }

            .product{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

            }
            .clickable{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0px;
                left: 0px;
                border: 1px solid green;
                border-radius: 4px;
                transition: all ease .5s;
                z-index: 10;
            }
            .checked-box{
                position: absolute;
                top: 0px;
                right: 0px;
                width: 22px;
                height: 22px;
                background-color: #0055ff;
                color: #fff;
                text-align: center;
                border-top-right-radius: 4px;
                display: none;
            }

            input[name="myradio"]:checked + .clickable{
                border-color: #0055ff; 
                box-shadow: 0px 0px 6px 2px #0055ff;
            }

            input[name="myradio"]:checked + .clickable .checked-box{
                display: block;
            }
        </style>
    </head>
    <body>
        <!-- create the div inline boxes -->
        <div class="div-inline-list">
            <!-- create the product container the user sees -->
            <div class="product-container">
                <input id="prod1" type="radio" name="myradio">
                <label for="prod1" class="clickable"><span class="checked-box">&#10004;</span></label>
                <p class="product">Prod 1</p>
            </div>
            <div class="product-container">
                <input id="prod2" type="radio" name="myradio">
                <label for="prod2" class="clickable"><span class="checked-box">&#10004;</span></label>
                <p class="product">Prod 2</p>
            </div>
            <div class="product-container">
                <input id="prod3" type="radio" name="myradio">
                <label for="prod3" class="clickable"><span class="checked-box">&#10004;</span></label>
                <p class="product">Prod 3</p>
            </div>
        </div>
        <!-- Added jquery since you are using bootstrap -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                //on radio button "myradio" state change log to the console to view
                $('input[name="myradio"]').change(function(){
                    console.log("#" + $('input[name="myradio"]:checked').attr('id'));
                });
            });
        </script>
    </body>
</html>
0 голосов
/ 22 января 2019

Простое решение состоит в том, чтобы использовать класс, чтобы указать, какая кнопка выбрана, затем перехватывать каждое нажатие кнопки и:

(1) Выключить класс на всех кнопках,

(2) Включите класс для нажатой кнопки

Простой, элегантный, работает. 

$('.myradio').click(function(){
  $('.myradio').removeClass('myactive');
  $(this).addClass('myactive');
});
.myradio{display:inline-block;}
.myactive{background:dodgerblue;color:white;}

/* Appearance only */
.myradio{padding:3px 7px;margin-left:10px;border:1px solid dodgerblue;border-radius:5px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="myradio myactive">One</div>
<div class="myradio">Two</div>
<div class="myradio">Three</div>

При желании вы также можете присвоить каждому div уникальный идентификатор и отслеживать, какой идентификатор имеет «активный» класс.Это позволяет определить, какая кнопка выбрана в настоящий момент, и, возможно, отправить эти данные куда-нибудь.

...