Флажок Доступ и надстройка Office отмечен - PullRequest
Новая
       7

Флажок Доступ и надстройка Office отмечен

0 голосов
/ 24 апреля 2018

В моей надстройке Office у меня есть флажок, подобный следующему: 

<div class="ms-CheckBox">
    <input id="inputId" type="checkbox" class="ms-CheckBox-input" />
    <label id="labelId" role="checkbox" class="ms-CheckBox-field" aria-checked="false" name="checkboxA" for="inputId>
        <span class="ms-Label">Text</span>
    </label>
</div>

Я хочу получить через JavaScript его проверенный статус (или его статус aria-ckecked, я до сих пор не вижу различий между ними), который, как я думал, был через document.getElementById( 'labelId' ).checked, так как он указан в документации что у них есть дополнительный checked член, но я получаю только undefined с ним.

Я очень новичок в этих технологиях и у меня есть пара проблем:

Означает ли "необязательный элемент", что я должен явно создать его, чтобы он существовал? Если так, как я могу это сделать?

Однако член checked может появиться, нужно ли мне вручную обрабатывать его значение каждый раз, когда пользователь нажимает на него, или это уже внутреннее управление, и я просто еще не нашел способ получить к нему доступ?

Может быть, я просто не вижу ошибку, которую я сделал в html-коде для флажка?

Заранее спасибо!

1 Ответ

0 голосов
/ 25 апреля 2018

У вас есть несколько источников документации в Office UI Fabric, которые зависят от используемой вами среды. Ваш выбор:

Сформируйте таблицу поиска, которую вы бы выбрали Только JavaScript ссылку и перейдите по ней, чтобы найти интересующий вас компонент. Перед этим я бы предложил прочитать " Начало работы с использованием Fabric JS ».

Теперь, когда у вас есть документация по компоненту флажка реализации vanilla JS, выполните шаги, чтобы установить флажок. Это будет включать:

  • Подтвердите, что у вас есть ссылки на CSS и JavaScript в Fabric на вашей странице

  • Скопируйте HTML-код из одного из примеров ниже на свою страницу. 

    <div class="ms-CheckBox">
  <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
  <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
      <span class="ms-Label">Checkbox</span> 
  </label>
</div>

  • Добавьте следующий тег на страницу под ссылками на Fabric JS, чтобы создать экземпляр всех компонентов CheckBox на странице. 

    <script type="text/javascript">
    var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
    for (var i = 0; i < CheckBoxElements.length; i++) {
        new fabric['CheckBox'](CheckBoxElements[i]);
    }
</script>

  • Чтобы получить статус вашего флажка, используйте метод getValue(), который возвращает true или false независимо от того, установлен компонент или нет.

...