Преобразование динамически созданного ввода флажка в переключатель в стиле Switchery - PullRequest
Новая
       44

Преобразование динамически созданного ввода флажка в переключатель в стиле Switchery

1 голос
/ 03 мая 2020

Мне нужно динамически создать переключатель Switchery .

Я создаю нединамические c переключатели, как это: 

<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12">Admin User</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
      <input type="checkbox" class="js-switch" id= "canModify"/>
   </div>
</div>

И это прекрасно работает.

Однако, когда я создаю ту же структуру с помощью JavaScript, например: 

  html = '<input type="checkbox" class="js-switch" id= "' + elementID +  '"/>'

, я получаю следующие результаты:

Not loading the look of the js-switch

Статут добавлен ниже, и он отображается правильно. Вышеуказанный файл генерируется динамически, но отображается только как флажок. Итак, мой вопрос, как мне решить эту проблему?

Ответы [ 2 ]

2 голосов
/ 03 мая 2020

Простое добавление нового входа в DOM с помощью class="js-switch" не приведет к созданию переключателя в стиле Switchery .

A JavaScript Для каждого входа необходимо создать объект Switchery.

Эта функция преобразует все входы без коммутации в DOM в коммутаторы в стиле коммутатора: 

// convert all inputs with class="js-switch" to Switchery
function convertToSwitchery() {

  // get all "js-switch" class inputs in the DOM
  const jsSwitchInputs = document.querySelectorAll('.js-switch');

  jsSwitchInputs.forEach(input => {
    // ignore if input is already switchery
    if (input.dataset.switchery) {
      return;
    }
    // create new Switchery object
    new Switchery(input);
  });
}

Рабочий пример: 

// convert all inputs with class="js-switch" to Switchery-style
function convertToSwitchery() {
  const jsSwitchInputs = document.querySelectorAll('.js-switch');
  jsSwitchInputs.forEach(input => {
    // ignore if input is already switchery
    if (input.dataset.switchery) {
      return;
    }
    new Switchery(input);
  });
}



// code for demo only:
const divResult = document.getElementById('result');
let iButton = 0;

// add a new "js-switch" input
function addInput() {
  const br = document.createElement('br');
  divResult.appendChild(br);
  const label = document.createElement('label');
  label.for = `input${++iButton}`;
  label.className = 'mr-4';
  label.innerHTML = `Dynamic "js-switch" ${iButton} `;
  divResult.appendChild(label);
  const input = document.createElement('input');
  input.type = 'checkbox';
  input.className = 'js-switch';
  input.id = `input${iButton}`;
  divResult.appendChild(input);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/switchery-latest@0.8.2/switchery.css" rel="stylesheet" />

<div class="p-4">
  <h4>Convert Checkbox Inputs to Switchery Style</h4>
  <button class="btn btn-primary btn-sm" onclick="addInput();">
    Add ".js-switch"</button>
  <button class="btn btn-primary btn-sm"
    onclick="convertToSwitchery();">
    Convert All to Switchery</button>
    
  <div class="mt-4" id="result">
    <label for="static-input">Static "js-switch"</label>
    <input type="checkbox" class="js-switch" checked />
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/switchery-latest@0.8.2/dist/switchery.min.js"></script>

Рекомендации:

0 голосов
/ 03 мая 2020

После просмотра документации я нашел кое-что работающее.

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

   document.getElementById("mainPanel").innerHTML = html;

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

   // This is required to enable Switchery. 
   var elem = document.querySelector('.js-switch');
   var init = new Switchery(elem);

Надеюсь, это поможет кому-то еще!

...