Добавление компонента анимированной рамки пользовательского интерфейса с jquery - PullRequest
Новая
       32

Добавление компонента анимированной рамки пользовательского интерфейса с jquery

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

Я создаю простой одностраничный веб-сайт, и когда я нажимаю кнопку на странице, я хочу удалить часть контента, отобразить полосу прокрутки загрузки (https://getmdl.io/components/index.html#loading -раздел ), получить данные из API, отобразить полученные данные, а затем удалить счетчик загрузки.

Однако, когда я пытаюсь использовать счетчик облегченного дизайна материалов, добавляя его с помощью jquery, например: 

$("body").append("<div class=\"mdl-spinner mdl-js-spinner is-active\"></div>")

он просто дает мне слово «Загрузка», но без анимированного счетчика. Есть ли изъян в моем понимании, или нужно что-то еще добавить, чтобы он работал?

1 Ответ

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

Material должен инициализировать какой-то скрипт на load, и он обновит ваш spinner element. Но когда вы добавите позже из jquery, это не будет скрипт initialize. Так что это не работает.

Вот одно решение для вашей ситуации. Просто добавьте счетчик div с display:none, например <div id="spinner" class="mdl-spinner mdl-js-spinner is-active" style="display:none;">. И show/hide div согласно вашему требованию.

Я выполнил show/hide при нажатии кнопки. Вы можете настроить его в соответствии с вашими требованиями. Посмотрите демонстрацию ниже. 

function ShowProgressBar() {
  $("#spinner").show();
  $("#show").hide();
  $("#hide").show();
}

function HideProgressBar() {
  $("#spinner").hide();
  $("#show").show();
  $("#hide").hide();
}
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- MDL Spinner Component -->
<div id="spinner" class="mdl-spinner mdl-js-spinner is-active" style="display:none;"></div>

<div>
  <input id="show" type="button" onclick="ShowProgressBar()" value="show" />
  <input id="hide" type="button" onclick="HideProgressBar()" value="hide" style="display:none;" />
</div>
...