Уроки мастерства


Кнопки с использованием Quantum Paper (Qutton)


Содержание урока

  • Quantum Paper — это цифровой документ, который может изменить свой размер, форму и цвет, чтобы отобразить новый контент. Quantum Paper является частью нового стиля Google Material дизайн.
  • С помощью этого плагина вы сможете скрыть любые <div> за Quantum [Paper] Кнопкой.

demo

Необходимое

Как Использовать

Взглянем на код, используемый в нашем демо.

Шаг 1, Добавляем необходимое:

Скачать и включить все зависимости в HTML-файле.
После того как все эти зфайлы были включены, включаем Quttons.js или Quttons.min.js и Quttons.css после загрузки из этого Repo.

Примерно так:

<script src = "Path/To/jQuery" type = "text/javascript"></script>
<script src = "Path/To/velocity.js" type = "text/javascript"></script>
<script src = "Path/To/velocity.ui.js" type = "text/javascript"></script>
<script src = "Path/To/Quttons.js" type = "text/javascript"></script>

И CSS

<link rel = "stylesheet" href = "Path/To/Quttons.css" />

Шаг 2, дизайн диалогового окна:

Дизайн диалогового окна.
Создаем дизайн тега div, как обычно, со всеми CSS-стили которые вы хотите. Внутри вашего элемента div Вы можете положить что угодно.
Вы также можете добавить прослушиватели событий для кнопки внутри диалогового окна, как обычно.
Вы можете добавить кнопку закрытия, только не забудьте дать ему класс «закрыть».
Вот пример кода который используется в нашем демо.

<div id="uploadDialog">
    <h2>Upload a new file</h2>
        <input type="text" id = "fileUrl" placeholder = "Enter URL">
    <div id="button_basic_upload"> Choose a file to upload
    </div>
</div>

Шаг 3, Обернем созданный диалог в <div>

Обернем диалог, созданный в предыдущем шаге в div с классом qutton и одним пользовательским идентификатором, который будет использоваться для ссылки на этот qutton в нашем JS файле.
Пример:

<div class = "qutton" id = "qutton_upload">
 ...(Dialog created in previous step) ...
</div>

Шаг 4, Инициализируем Qutton

В нашем .JS-файле запуск происходит ссылаясь на qutton следующим образом.

var quttonUpload = Qutton.getInstance($('#qutton_upload'));
quttonUpload.init({
    icon : './images/icon_upload.png',
    backgroundColor : "#917466"
});

внутри getInstance передать в объект jQuery, ссылающийся на обычай идентификатор который вы настроили в предыдущем шаге
init-функция принимает объект, определяющий конфигурацию кнопки.

Аргумент Описание По умолчанию
icon Иконка для отображения Qutton Нет
backgroundColor Цвет фона Qutton #FE0000
width Ширина Qutton 60
height Высота Qutton 60
easing Сложность анимации easeInOutQuint


Скачать Demo



Технологии

CSS3
jQuery

Новые комментарии



    Оставить комментарий