MAC_UI
MAC_UI — это основанный на WIN10UI, но выполненный в стиле Mac, фоновый пользовательский интерфейс (UI), который поможет вам легко создать привлекательный фоновый интерфейс.
| [Нажмите здесь, чтобы присоединиться к группе MAC-UI Official Communication Group] |
(https://jq.qq.com/?_wv=1027&k=4Er0u8i) |
Версия v1.1.2.5
Эта версия представляет собой небольшое обновление, направленное на разработку плагинов. Были добавлены некоторые синтаксические сахара (подробные изменения см. в журнале обновлений).
Способ обновления: в основном нет необходимости изменять HTML-файл, просто замените файлы CSS и win10.js.
Что касается изменений в HTML-файле, то была добавлена только одна строка кода. В #mac>.desktop div добавьте div <div id="mac-desktop-scene"></div>
в конец.
Для тех, кто действительно не хочет изменять HTML, мы добавили код автоматического исправления в JS, поэтому даже без изменений будет нормальный эффект. Однако этот код исправления будет отменён в будущих версиях и будет использоваться только временно.
Предварительный просмотр ![1] http://mac.apecloud.ltd
Особенности
Компоненты предварительного условия
Быстрое начало работы
<div id="mac-shortcuts">
<div class="shortcut" onclick="//do something...">
<img src="图片地址" class="icon" />
<div class="title">Текст под значком</div>
</div>
<div class="shortcut" onclick="//do something...">
<div class="icon">Пользовательский HTML-контент</div>
<div class="title">Текст под значком</div>
</div>
</div>
Значки должны быть установлены как изображения или пользовательские заполняющие div.
<div class="list mac-menu-hidden animated animated-slideOutLeft">
<div class="item">Меню первого уровня</div>
<div class="item">Меню первого уровня</div>
<div class="sub-item">Меню второго уровня</div>
<div class="sub-item">Меню второго уровня</div>
<div class="sub-item">Меню второго уровня</div>
<div class="item">Меню первого уровня</div>
<div class="item">Меню первого уровня</div>
</div>
Меню первого уровня добавляется классом item, а меню второго уровня — sub-item. Не нужно использовать меню первого уровня для «обёртывания» меню второго уровня, оно автоматически распознает принадлежность меню второго уровня. Обратите внимание на порядок.
<script>
Macui.onReady(function () {
//Macui-ui инициализация завершена, и этот код будет выполнен здесь
});
</script>
Все методы должны начинаться с префикса Macui.
Macui.setBgUrl({main:'Широкоформатная фоновая картинка',mobile:'Вертикальная фоновая картинка'})
.[['30%','30%'],['50px','50px']]
).**['class1','class2','class3-1 class3-2']
. Магнитные наклейки будут случайным образом выбирать одну анимацию для воспроизведения (максимум 3 секунды).Рекомендуется внимательно изучить код demo, многие способы использования были упомянуты.
Следуя минималистичному дизайну, все связанные со значками вспомогательные классы устанавливаются как «значок».
<div class="shortcut">
<img class="icon" src="./img/icon/mac.png"/>
<div class="title">Официальный сайт Macui-UI</div>
</div>
На значках рабочего стола установите img.icon, чтобы объявить изображение значком.
<div class="shortcut">
<i class="fa fa-camera-retro icon"></i>
<div class="title">Официальный сайт Macui-UI</div>
</div>
В значке рабочего стола используйте .icon, чтобы указать значок шрифта (на примере шрифта awesome).
Macui.openUrl("http://win10ui.yuri2.cn","<img class=\"icon\" src=\"./img/icon/mac.png\"/>Официальный сайт Macui-UI");
Macui.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></i>Значок шрифта");
Верно! Вы также можете вставить изображение значка или значок шрифта в параметр title функции openUrl!
<div class="item"><i class=" icon fa fa-wrench fa-fw"></i><span>Тестирование API</span></div>
<div class="item"><img class="icon" src="./img/icon/doc.png"><span>Изображение значка документа</span></div>
В пунктах меню используйте icon, чтобы определить изображение значка и значок шрифта.
Вы можете разместить два содержимого и присвоить им вспомогательные классы detail и cover, чтобы получить впечатляющий эффект обложки и переключения основного тела.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )