Слияние кода завершено, страница обновится автоматически
Что такое «ZhiqimUI Frontend Framework»?
ZhiqimUI (知启蒙前端框架) — это набор интегрированных библиотек JavaScript, CSS и шрифтов, а также большого количества пользовательских элементов интерфейса, которые образуют комплект для разработки фронтенда. Это ядро Zhiqim Development Kit.
Какие преимущества у «ZhiqimUI Frontend Framework»?
Структура каталогов «ZhiqimUI Frontend Framework»
[Рисунок: структура каталогов ZhiqimUI]
Как использовать «ZhiqimUI Frontend Framework»?
<!DOCTYPE html>
<html>
<head>
<title>知启蒙前端框架</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<meta name="Author" content="知启蒙" />
<meta name="Keywords" content="ZhiqimUI 知启蒙 zhiqim 开发教程 Java HTML5"/>
<meta name="Description" content="知启蒙前端框架（ZhiqimUI）是一套集成Javascript库、Css库、Font库、常用ico图标等，并在其上开发的大量UI组件组成的前端开发套件。"/>
<!-- 引入zhiqimUI的css文件 -->
<link rel="stylesheet" href="https://zhiqim-org.oss-cn-shenzhen.aliyuncs.com/service/res/zhiqim_v1.5.0.r2018091201.css">
<!-- 引入zhiqimUI的js文件 -->
<script src="https://zhiqim-org.oss-cn-shenzhen.aliyuncs.com/service/res/zhiqim_v1.5.0.r2018091201.min.js"></script>
<script>
var i = 1;
function doUpdate() {
//以下代码将把id为text的input的value值改为"新的内容"。
Z("#text").val("新的内容"+(i++));
}
function doDialog() {
//以下代码弹出一个对话框。支持两种（dialog.text和dialog.url）
var dialog = new Z.Dialog();
dialog.text = "<div class='z-absolute-center-middle z-w100 z-h60 z-px20'>对话框内容</div>";//弹出对话框的内置HTML
//dialog.url = location.href;//使用iframe弹出加新URL
dialog.width = 500;
dialog.height = 300;
dialog.execute();
}
</script>
</head>
<body>
<!-- 使用zhiqimUI的CSS定义 -->
<table class="z-table z-bordered z-bd-rd8 z-absolute-center-middle zi-w300 z-h200">
<tr>
<td class="z-text-center">
<input id="text" class="z-input z-float-left" value="原内容"> <button class="z-button z-blue z-float-left" onclick="doUpdate();">点击</button>
</td>
</tr>
<tr>
<td class="z-text-center">
<button class="z-button z-blue z-large" onclick="doDialog();">弹出对话框</button>
</td>
</tr>
</table>
</body>
</html>
Основные элементы CSS в «ZhiqimUI Core CSS Library»
| Функциональность | Описание |
|---|---|
| Глобальные определения | Определения по умолчанию для тегов в глобальном стиле |
| Определение цвета | Определяет десять цветов в ZhiqimUI: глобальный, белый, чёрный, красный, оранжевый, жёлтый, зелёный, синий, фиолетовый. Включает цвета шрифта, фона и границ, а также соответствующие имена стилей |
| Шрифтовые иконки | Иконки, созданные с использованием векторных изображений и стандартов шрифтов. Значки хранятся в файле /service/res/font/zhiqim.woff. В настоящее время существует 59 значков, разделённых на пять категорий: операции, документы, устройства, графики и сущности. Шрифт не поддерживает курсив, поэтому для его определения используется тег <i> |
| Графические иконки | Объединение нескольких маленьких иконок в одну большую. Позиция и размер каждой иконки на большом изображении определяются с помощью свойства background-position в CSS. Текст запроса: |
Знай Шимэн — изображения для иконок в формате PNG размещаются в каталоге /service/res/image, в зависимости от размера и типа делятся на 12px, 16px, 22px, 36px. Также есть иконки файлов и деревьев. Здесь также используются треугольники и круги для создания стрелок и окружностей различных стилей.
Перевод текста:
Zhiqimeng — изображения в виде иконок формата PNG располагаются в папке /service/res/image. В зависимости от размера и вида они бывают следующих типов: 12 пикселей, 16 пикселей, 22 пикселя, 36 пикселей. Также существуют такие виды иконок, как файлы и деревья. Треугольники и окружности используются здесь для создания разнообразных стилей стрелок и кругов.
Стиль текста — это добавление стиля к тексту, например, выделение текста жирным шрифтом или курсивом, изменение размера шрифта, высоты строки, принудительный перенос строки или запрет переноса, скрытие или отображение текста, выравнивание текста и подчёркивание текста, а также применение эффектов выделения и кодирования.
Стили блоков — это добавление стилей к блокам, таким как скрытие и отображение блоков, позиционирование блоков, ширина блоков, процент ширины блоков, высота блоков, процент высоты блоков, внутренние и внешние отступы.
Табличные стили — это добавление стилей к таблицам, таких как границы таблиц, закруглённые углы таблиц, линии строк таблиц, внутренние отступы ячеек таблиц, размер шрифта в ячейках таблиц, выравнивание текста в ячейках таблиц и удаление линий под ячейками таблиц. По умолчанию таблицы не имеют границ. Кроме того, CSS требует ручной обработки нижних закруглённых углов при наличии фона, а также первой и последней объединённых ячеек.
JS-библиотека ядра Zhiqimeng Frontend Framework
Библиотека ядра Zhiqimeng JS определяет глобальное пространство имён «Z», которое является функцией window. Если «Z» конфликтует с другими определениями, рекомендуется использовать полное имя «zhiqim». В глобальном пространстве имён «Z» определяются глобальные атрибуты, функции, регулярные выражения и классы.
Статические объекты — это набор часто используемых объектов, определённых как статические атрибуты и функции. В настоящее время они включают в себя объекты браузера (Z.B), объекты документов (Z.D), события (Z.E), элементы (Z.EL), HTML (Z.H), адреса (Z.L), COOKIE (Z.CK).
Инструменты — ещё один вид статических объектов, объединяющий часто используемые статические свойства и функции в один инструмент. В настоящее время он включает в себя инструменты утверждений (Z.A/Z.Asserts), инструменты объектов (Z.O/Z.Objects), инструменты типов (Z.T/Z.Types), инструменты проверки (Z.V/Z.Validates), инструменты форм (Z.F/Z.FM), инструменты JSON (Z.J/Z.Jsons), инструменты даты (Z.DT/Z.DateTimes), инструменты массивов (Z.AR/Z.Arrays), инструменты строк (Z.S/Z.Strings), арифметические инструменты (Z.Maths), инструменты валют (Z.AM/Z.Amounts) и инструменты цвета (Z.Colors).
Объект запроса Z.Query разработан аналогично jQuery и представляет собой класс DOM-операций. Z.Query использует HTML5 document.querySelectorAll для реализации большинства API jQuery, таких как селекторы, операции DOM, методы событий и анимация. Он также добавляет свои собственные характеристики и имена, такие как offsetLeftBody() и focusEnd().
Библиотека плагинов Zhiqimeng Frontend
Плагины для форм включают поля ввода, кнопки, флажки и переключатели. Стили полей ввода определяют длину, границы и управление вводом. Стили кнопок включают стандартные, фильтрующие и множественные кнопки. Они определяют размер, цвет, границы, эффекты выбора и т. д. Многофункциональные кнопки имеют ширину границы 1 пиксель по умолчанию, которая становится 2 пикселями при наведении курсора. При выборе отображается фон и значок галочки. Флажки имеют ширину границы в 1 пиксель, которая увеличивается до 2 пикселей при наведении. Выбранные флажки отображают фон и значки галочек. Одиночные кнопки имеют ширину границы в 1 пиксель, которая увеличивается до 2 пикселей при наведении. Выбранная кнопка отображает фон и галочку. Выбор кнопок аналогичен кнопкам выбора, но предназначен для взаимодействия с формами.
Редактируемый текст — это определение фрагмента текста (span), за которым следует значок в форме ручки. При нажатии на значок появляется поле ввода и кнопка сохранения. Поле ввода поддерживает ввод данных, и нажатие на кнопку сохранения запускает событие сохранения.
Календарь — это элемент управления, который открывается при активации поля ввода и отображает год, месяц, день, час, минуту и секунду. Пользователь может выбрать дату или дату и время.
Диалоговые окна включают настраиваемые диалоговые окна, предупреждающие диалоговые окна, диалоговые окна подтверждения и диалоговые окна подсказки. Настраиваемые диалоговые окна поддерживают такие параметры, как заголовок, ширина, высота, граница, область действия, содержимое и URL. Предупреждающие диалоговые окна похожи на диалоговые окна alert. Диалоговые окна подтверждения похожи на диалоговые окна confirm. Диалоговые окна подсказок похожи на диалоговые окна prompt.
Навигационные плагины включают вкладки, шаги и подсказки. Таблицы вкладок используют nav и section для отображения меток и содержимого. Шаги используют nav для каждого шага, а секции — div для каждого содержимого шага. Подсказки появляются при наведении или щелчке на важные метки. Ниже представлен перевод текста на русский язык:
Выпадающий список — это стиль, который позволяет при наведении или клике отобразить выпадающий список. В настоящее время выпадающий список поддерживает отображение интерфейса выпадающего списка одним слоем при клике и наведении, поддерживает цвета списков и активные цвета, позволяет задать ширину выпадающего списка и другие стили для многоколоночных макетов.
Библиотека плагинов инструмента
Копирование Flash: поскольку функции буфера обмена в разных браузерах различаются и использование этой функции сложно, Zhiqim использует функцию буфера обмена, созданную с помощью контейнера спрайтов Flash, чтобы обеспечить поддержку копирования текста в различных браузерах. Решение заключается в том, что сначала используется кнопка-заполнитель, а затем прозрачный Flash перекрывает кнопку. Эта функция требует поддержки Flash.
Вызов Ajax: AJAX означает «Asynchronous Javascript And XML» (асинхронный JavaScript и XML) и относится к технологии разработки интерактивных веб-приложений. Zhiqim разработал свой AJAX на основе концепции, ориентированной на RMI, передавая параметры соответствующему методу через указание класса и метода и получая результаты выполнения метода через доступ к классу JAVA через RMI.
Перетаскивание: перетаскивание означает указание объекта, который можно перетащить, и перемещение его в другое место при нажатии мыши. Масштабирование означает указание масштабируемого объекта, который увеличивается или уменьшается при перетягивании мышью.
Загрузка файлов: Zhiqim предоставляет различные методы загрузки файлов, включая загрузку форм, загрузку одного файла, загрузку нескольких файлов, предварительную загрузку перед загрузкой и частичную загрузку больших файлов (поддерживаются HTML5 и Flash).
Техническая архитектура Zhiqim представлена на рисунке ниже.
QQ группа: чтобы присоединиться к группе QQ для общения, нажмите [458171582].
Учебник: если вы хотите узнать больше о языке идентификации Zhiqim, [нажмите здесь].
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )