1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/muziys-macUI

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

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

Особенности

  • Пользовательский интерфейс MAC UI.
  • Автоматическое упорядочивание значков на рабочем столе.
  • Интеграция панели задач с дочерним окном iframe, обеспечивая тот же опыт управления окнами, что и в Windows.
  • Меню «Пуск» и центр уведомлений, удовлетворяющие требованиям дизайна фонового интерфейса.
  • Минимальное количество API, большинство функций можно реализовать с помощью определения элементов HTML.
  • Адаптивный дизайн, обеспечивающий хороший визуальный опыт даже в мобильных браузерах.
  • В настоящее время поддерживается только совместимость с основными современными браузерами.
  • Поддержка class для настройки эффекта размытия Гаусса и фона blur background_blur.

Компоненты предварительного условия

  • layer (v3.0.3).
  • animated.css.
  • jquery (v2.2.4).
  • font-awesome.

Быстрое начало работы

Как настроить значки на рабочем столе?

<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. Не нужно использовать меню первого уровня для «обёртывания» меню второго уровня, оно автоматически распознает принадлежность меню второго уровня. Обратите внимание на порядок.

API

  • Вызов: API Macui-ui должен вызываться после его инициализации.
<script>
    Macui.onReady(function () {
        //Macui-ui инициализация завершена, и этот код будет выполнен здесь
    });
</script>

Все методы должны начинаться с префикса Macui.

  • setBgUrl(bgs) устанавливает фоновое изображение Macui.setBgUrl({main:'Широкоформатная фоновая картинка',mobile:'Вертикальная фоновая картинка'}).
  • openUrl(url,title,areaAndOffset) ** открывает дочернее окно. Параметры: url, заголовок, [размер, область](тот же формат настройки area и offset, что и у layer, также можно передать 'max' для принудительного максимизации, например [['30%','30%'],['50px','50px']]).**
  • onReady(handle) — обратный вызов после завершения инициализации mac-ui.
  • menuOpen() — открывает меню «Пуск».
  • menuClose() — закрывает меню «Пуск».
  • menuToggle() — переключает открытие/закрытие меню «Пуск».
  • commandCenterOpen() — открывает информационный центр.
  • commandCenterClose() — закрывает информационный центр.
  • commandCenterToggle() — переключает открытие/закрытие информационного центра.
  • renderShortcuts() — повторно отображает значки на рабочем столе (можно использовать при динамическом добавлении или удалении значков рабочего стола).
  • renderMenuBlocks() — повторно обрабатывает магнитные наклейки (можно использовать при динамическом добавлении или удалении магнитных наклеек).
  • buildList() — предварительная обработка списка меню (можно использовать при динамическом добавлении или удалении пунктов меню).
  • newMsg(title, content,handle_click) отправляет уведомление, handle_click — обработчик кликов.
  • isSmallScreen() возвращает true, если ширина экрана меньше 768 пикселей, в противном случае возвращает false.
  • setAnimated(animated_classes,animated_liveness) использует классы css для установки анимации магнитных наклеек. animated_liveness устанавливает вероятность запуска анимации (0~1). animated_classes хранит массив классов css, таких как ['class1','class2','class3-1 class3-2']. Магнитные наклейки будут случайным образом выбирать одну анимацию для воспроизведения (максимум 3 секунды).
  • exit() закрывает всю страницу (с подтверждением).
  • aboutUs() информация о компании.
  • lang(cn,en) простая поддержка двух языков, если это китайский язык, возвращается cn, в противном случае возвращается en.
  • getLayeroByIndex(index) возвращает объект jq окна по индексу, возвращённому openUrl.
  • hideWins() минимизирует все окна.
  • setContextMenu(jq_dom, menu) настраивает контекстное меню (см. расширенное использование).
  • getDesktopScene() возвращает объект jq сцены рабочего стола (для продвинутых пользователей DIY фоновых изображений).

Расширенное использование

Рекомендуется внимательно изучить код demo, многие способы использования были упомянуты.

Идея дизайна

  • Macui-UI следует рассматривать как основной вход вашего веб-сайта, а конкретные функциональные страницы подходят для открытия в виде дочерних окон. Дочерние окна реализованы через iframe, что снижает конфликты js и css и обеспечивает независимость. Кроме того, родительские и дочерние страницы могут взаимодействовать через API Macui_child.js.
  • Значки на рабочем столе подходят для наиболее часто используемых операций, а меню подходит для создания списка всех операций (здесь операции не ограничиваются открытием дочернего окна).
  • Магнитные наклейки визуально привлекательны, помимо того, что они могут служить заметными кнопками, они также могут использоваться в качестве информационных панелей, и даже сложные приложения, такие как музыкальные проигрыватели, могут быть созданы в пространстве магнитных наклеек (например).

Классы вспомогательных значков

Следуя минималистичному дизайну, все связанные со значками вспомогательные классы устанавливаются как «значок».

<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, чтобы определить изображение значка и значок шрифта.

Дизайн магнитных наклеек

  • Размер магнитной наклейки фиксирован на 44px/grid, что удобно для разработчиков для разработки желаемого стиля.
  • Гибкое использование setAnimated функции.
  • Настройка некоторых эффектов наведения может дать хорошие результаты.
  • Поддержка передовых инструментов, таких как vue.

Классы вспомогательных магнитных наклеек

Вы можете разместить два содержимого и присвоить им вспомогательные классы detail и cover, чтобы получить впечатляющий эффект обложки и переключения основного тела.

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Описание недоступно Развернуть Свернуть
Отмена

Обновления (1)

все

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/muziys-macUI.git
git@api.gitlife.ru:oschina-mirror/muziys-macUI.git
oschina-mirror
muziys-macUI
muziys-macUI
master