Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.03.2019, 20:22
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

Перевод стилей из *.css в jquery
у меня есть вот такой html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jsChecboxIntoLabel.js"></script>
</head>
<body>


<div>
      <label class="checkbox">
        <input type="checkbox" />
        <div class="divTextNearCheckbox">Я переключаю чекбокс</div>
    </label>

</div>

</body>
</html>



вот обычный *.css к нему

.checkbox input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 20px;
}


.checkbox__text {
    position: relative;
    padding: 0 0 0 60px;
    cursor: pointer;
}


.checkbox__text:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 50px;
    height: 26px;
    border-radius: 13px;
    background: #CDD1DA;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
    transition: .2s;
}


.checkbox__text:after {
    content: '';
    position: absolute;
    top: -2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
    transition: .2s;
}


.checkbox input:checked + .checkbox__text:before {
    background: #9FD468;
}
.checkbox input:checked + .checkbox__text:after {
    left: 26px;
}
.checkbox input:focus + .checkbox__text:before {
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7);
}


Но мне нужно перевести этот код в jquery и нужно повесить событие, которое бы ловило переключение текста.

$(document).ready(function () {

    var selectorCheckbox = '.checkbox'; /*селектор элемента 'label'*/
    var selectorCheckboxInput = selectorCheckbox + ' ' + 'input';

    /*селектор контейнера 'div', находится внутри элемента 'label'*/
    var selectorDivText = '.divTextNearCheckbox';

    var nameClassBefore = 'textBefore';

    var nameClassAfter = 'textAfter';

    /*ситилизация для элемента 'input' типа 'checkbox'*/
    makeStyleCheckboxInput(selectorCheckboxInput);

    /*стилизация надписи, в контейнере 'div'*/
    makeStyleDivFotText(selectorDivText);

    /*описываем первоначальное состояние контейнера
    * 'div' с текстом*/
    addClassBeforeText(selectorDivText, nameClassBefore);

    addClassAfterText(selectorDivText, nameClassAfter)

});

/*ситилизация для элемента 'input' типа 'checkbox';
* 'checkbox' становится невидимым*/
function makeStyleCheckboxInput(selector){

    applyStyle(selector, {

    'position': 'absolute',
    'z-index': '-1',
    'opacity': '0',
    'margin': '10px 0 0 20px'
    });
}

/*стилизация надписи, в контейнере 'div';
'position': 'relative'- элемент с относительным
позиционированием.
'padding' - задает смещение элемента, относительно
его позиции, а на его месте остается пустое пространство.
* */
function makeStyleDivFotText(selector) {
    applyStyle(selector, {

    'position': 'relative',
    'padding': '0 0 0 60px',
    'cursor': 'pointer',

    });
}

/*добавим класс в контейнер с текстом и применим стиль.
 * Этот класс будет описывать первоначальное состояние
 * контейнера div*/
function addClassBeforeText(selectorForAdd, nameClass) {

    $(selectorForAdd).addClass(nameClass);

    applyStyle('.' + nameClass, {

    'position': 'absolute',
    'top': '4px',
    'left': '4px',
    'width': '25px',
    'height': '26px',
    'border-radius': '13px',
    'background': '#CDD1DA',
    'box-shadow': 'inset 0 2px 3px rgba(0,0,0,.2)',
    'transition': '.2s',


    });

}


function addClassAfterText(selectorForAdd, nameClass) {

    $(selectorForAdd).addClass(nameClass);

    applyStyle('.' + nameClass, {
        'position': 'absolute',
    'top': '-2px',
    'left': '2px',
    'width': '22px',
    'height': '22px',
    'border-radius': '10px',
    'background': '#FFF',
    'box-shadow': '0 2px 5px rgba(0,0,0,.3)',
    'transition': '.2s'
    });
}


/*Применение стиля*/
function applyStyle(selector, style) {
    $(selector).css(style);
}


Но стилизация становится совсем другой и я не понимаю почему ?

кто знает подскажите.
Ответить с цитированием
  #2 (permalink)  
Старый 19.03.2019, 02:54
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,027

Сообщение от alex-romanov
Но стилизация становится совсем другой, и я не понимаю, почему.
Псевдо-элементы не являются элементами, они существуют только в CSS.

Сообщение от alex-romanov
Но мне нужно перевести этот код в jquery
Стили описываются при помощи CSS с минимальными усилиями, вы почему-то решили, что если что-то решается при помощи одной технологии, то нужно придумать так, чтобы оно решалось при помощи 2-ух!

Сообщение от alex-romanov
нужно повесить событие, которое бы ловило переключение текста
Это событие change у флажка.

https://codepen.io/Malleys/pen/OqwWaM
Ответить с цитированием
  #3 (permalink)  
Старый 19.03.2019, 17:15
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

да вы чудесно все сделали и это то что нужно.

Но основная задача полностью перенести весь css на javaScript, таблица для базы данных рисуется только на javaScript, с использованием jQuery и вся информация будет выводится в одной html с помощью ajax (то есть авторизация, данные из разных таблиц).
Переход по ссылке на нужную страницу, будет выполняться стиранием текущей страницы и рисованием новой, в одном и том же документе.
Поэтому *.css не использую и так будет много файлов подключаться и много кода

Я не понимаю как можно выполнить стилизацию чекбокса полностью на js.

На css лишь некоторые вещи могу повторить, но не понимаю как заменить вот

это .checkbox__text:before

если можете подскажите.

Спасибо.

Последний раз редактировалось alex-romanov, 19.03.2019 в 17:17.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Просмотрела исходик jQuery Откорректируйте где не верно taksebe jQuery 5 23.11.2018 21:42
SOS! Не работает скрипт на сайте и не запускается видео Arin Библиотеки/Тулкиты/Фреймворки 6 22.06.2017 14:41
Перевод с jquery на чистый javascript Antonjrjr Элементы интерфейса 10 07.04.2017 12:11
Динамический подсчет в таблице muraig jQuery 5 11.10.2014 15:54
хочу инвайт на хабр macdack Оффтопик 45 28.07.2013 22:18