numberbox (цифровой ввод)

<div class="NumBox">
    <button class="Btn NumBoxMinus" type="button">-</button>
    <input class="NumBoxInput" type="number" value="0"/>
    <button class="Btn NumBoxPlus" type="button">+</button>
</div>

Ограничение минимального и максимального значения (1~9)

<div class="NumBox" data-min="1" data-max="9">
    <button class="Btn NumBoxMinus" type="button">-</button>
    <input class="NumBoxInput" type="number" value="5">
    <button class="Btn NumBoxPlus" type="button">+</button>
</div>

Установка шага (шаг 10)

<div class="NumBox" data-step="10" data-min="10" data-max="90">
    <button class="Btn NumBoxMinus" type="button">-</button>
    <input class="NumBoxInput" type="number" value="10">
    <button class="Btn NumBoxPlus" type="button">+</button>
</div>

form (форма) предоставляет различные формы отображения

<ul class="ListBlock">
    <li class="ListItem">
        <div class="ItemCon">
            <div class="ItemMedia">
                <img class="Icon" src="images/svg/iconfont-user.svg" alt="用户">
            </div>
            <div class="ItemInner">
                <div class="ItemTitle Label">姓名</div>
                <div class="ItemInput">
                    <input class="InputContr" type="text" placeholder="您的姓名">
                </div>
            </div>
        </div>
    </li>
    ...
</ul>

checkbox radio (флажок и переключатель)

Флажок:

<ul class="ListBlock">
    <li class="ListItem">
        <label class="ItemCon LabelCheckbox">
            <input type="checkbox" name="mycheckbox" value="Books">
            <div class="ItemMedia"><i class="Icon IconCheckbox"></i></div>
            <div class="ItemInner">
                <div class="ItemTitle">Books</div>
            </div>
        </label>
    </li>
    ...
</ul>

Переключатель:

<ul class="ListBlock">
    <li class="ListItem">
        <label class="ItemCon LabelRadio">
            <input type="radio" name="myradio" value="Books">
            <div class="ItemInner">
                <div class="ItemTitle">Books</div>
            </div>
        </label>
    </li>
    ...
</ul>

switch (переключатель)

<div class="checkbox"></div>
<div class="checkbox"><span></span></div>

icon (значок) предоставляет набор часто используемых значков (формат .svg)

list (список) предоставляет различные способы отображения списков

<ul class="ListBlock">
    <li class="ListItem">
        <div class="ItemCon InkRipple">
            <div class="ItemMedia">
                <img class="Icon" src="images/svg/iconfont-user.svg" alt="用户">
            </div>
            <div class="ItemInner">
                <div class="ItemTitle">
                Ivan Petrov
                </div>
                <div class="ItemAfter">
                CEO
                </div>
            </div>
        </div>
    </li>
</ul>

text (текст) устанавливает часто используемые текстовые заголовки

box (коробка) предоставляет различные форматы отображения карточек

<div class="Box">
    <div class="BoxHeader">...</div>
    <div class="BoxContent">
        <div class="BoxContentInner">...</div>
    </div>
    <div class="BoxFooter">...</div>
</div>

tab (вкладка) объединяет Angular для предоставления простых функций вкладок

loading (загрузка) определяет базовый значок загрузки

<span class="Loading LoadingWhite"></span>

stylebox (девятисеточный дисплей) предоставляет способ отображения девятисеточного дисплея, удобный интерфейс

Расширение функциональности

chart (EChart диаграмма) это пример диаграммы EChart, интегрированной с KMUI. Для получения подробной информации о ECharts и его API, пожалуйста, обратитесь к официальному сайту: http://echarts.baidu.com

timeline (временная шкала)

slide (слайд-шоу)

KUI события и методы вызова

===== KUI предоставляет более мощные и удобные методы разработки, предоставляя множество часто используемых функций и расширений. Чтобы отличить его от jQuery, методы KUI вызываются с использованием синтаксиса $$.. Ниже приведены примеры использования событий:

Проверка характеристик предоставляет специфические функции проверки (тип события / положение полосы прокрутки / позиция страницы и размер окна) support API

Удаление начальных и конечных пробелов и BOM

$$.fn.trim(text)

JSON-последовательность

$$.fn.jsonArray(JSON)

Обнаружение устройства/операционной системы в основном для обнаружения мобильных устройств, оно содержит полезную информацию об устройстве и платформе Device API

$.fn.device.android — для устройств Android возвращает true, для других устройств — false.

$.fn.device.ios — для устройств iOS возвращает true, для других устройств — false.

$.fn.device.ipad — для iPad возвращает true, для других устройств — false.

$.fn.device.iphone — для iPhone/iPod Touch возвращает true, для других устройств — false.

$.fn.device.pixelRatio — возвращает соотношение пикселей экрана устройства, фактически это быстрый способ получить window.devicePixelRatio.

$.fn.device.webView — если приложение работает в UIWebView (сетевое приложение, установленное на домашнем компьютере или phone gap), возвращает true.

$.fn.device.minimalUi — если включён режим minimal-ui, возвращает true. Режим minimal-ui включается, когда сетевое приложение работает на iPhone/iPod с iOS 7.1+ и добавлен метатег viewport minimal-ui.

$.fn.device.statusBar — если приложение запущено в полноэкранном режиме и требуется скрыть строку состояния, возвращает true. Только для iOS.

$.fn.device.browse — возвращает тип браузера, включая (ie Firefox Chrome Edge Opera Safari Netscape).

Эта библиотека обнаружения устройств также добавляет дополнительные классы к элементу , чтобы иметь разные стили CSS на разных операционных системах и платформах.

Например, если вы используете устройство iOS 7.1, при открытии приложения у вас будут следующие классы:

<html class="ios ios-7 ios-7-1 iosGt6 PixelRatio1">
...

Если вы используете устройство с экраном Retina и iOS 7.1 и открываете приложение в полноэкранном режиме ($$.fn.device.statusBar = true), то:

<html class="ios ios-7 ios-7-1 iosGt6 Retina PixelRatio2 StatusbarOverlay">
...

Если вы используете устройство iOS 8.0 и открываете приложение в полноэкранном режиме ($$.fn.device.statusBar = true):

<html class="ios ios-8 ios-8-0 iosGt6 iosGt7 StatusbarOverlay">
...

Если вы используете iPhone6 Plus и ваше приложение работает в полноэкранном режиме ($$.fn.device.statusBar = true):

<html class="ios ios-8 ios-8-0 iosGt6 iosGt7 Retina PixelRatio3 StatusbarOverlay">
...

Если вы используете устройство Android 4.4 и открываете приложение:

<html class="android android-4 android-4-4">
...

События касания возвращают соответствующие координаты движения для указанного элемента DOM и предоставляют обратный вызов.

$$.fn.touches(document.getElementById("id"),function(Touches){
        $$.fn.log($$.fn.jsonArray(Touches))
    })

Проверка предоставляет распространённые проверки, такие как телефон, электронная почта, номер и т. д.

$$.validate('13123456789','mobile')

Разложение параметров URL, например: http://www.kui.com/kui.html?id=1

var Url = $$.getUrlParams();
alert(Url.id)

Динамическая загрузка динамически загружает JS (с поддержкой обратного вызова) и CSS.

$$.loadJC('paths/app.css','css');
$$.loadJC('paths/app.js','js',function(){callback});

UI часть

Вернуться наверх:

$$.backToTop();

Уведомления: окно уведомлений с методами показа и закрытия.

$$.addNotify({
    title: 'Моё приложение',
    subtitle: 'Новое сообщение от KUI',
    message: 'Привет! Добро пожаловать в KUI, KUI предлагает вам удивительные визуальные эффекты.',
    media: '<img src="images/02.jpg" width="44"/>',
    onClose: function () {
        $$.alert('Уведомление закрыто');
    }
});

Индикатор загрузки: загрузка индикатора и разгрузка.

$$.indicator();
$$.unIndicator();

Загрузка: загрузка (с возможностью изменения заголовка) и разгрузка.

$$.loading('Пользовательский заголовок');
$$.unLoading();

Окно предупреждения: имитация окна предупреждения и предоставление метода обратного вызова. Заголовок можно не заполнять.

$$.alert('Содержание','Пользовательский заголовок',function(){обратный вызов});

Подтверждающее окно: аналогично окну предупреждения, но с кнопкой отмены и методом обратного вызова. Заголовок можно не заполнять.

$$.confirm("Содержание","Сообщение подтверждения",function(){обратный вызов});

Автоматически исчезающее окно подсказки: без метода обратного вызова, используется только для напоминания, отображается в течение 2000 миллисекунд.

$$.prompt("Содержание");

Нижнее подтверждающее окно: имитирует окно подтверждения приложения, аналогично подтверждающему окну, отображается внизу и предоставляет кнопку отмены и метод обратного вызова. Заголовок можно не заполнять.

$$.confirmModal("Содержание","Нижнее окно подтверждения",function(){обратный вызов});

Пустое окно подсказки: отображается, когда содержимое пусто, и предоставляет метод обратного вызова. Содержимое можно не заполнять.

$$.blankTips("Заголовок","Содержимое",function(){обратный вызов});

Отображение формы операции: имитирует форму операции Apple, отображает её способом, предоставляет метод обратного вызова и определённый режим отображения. Обратный вызов может быть пустым.

var actionSheetButtons = [
    [{
        text: 'Здесь можно описать операцию ниже',
        label: true
    },{
        text: 'Предупреждающее сообщение окна предупреждения',
        onClick: function () {
            $$.alert('Предупреждающее сообщение окна предупреждения!');
        }
    },{
        text: 'Кнопка красного цвета',
        color: 'CR',
        onClick: function () {
            $$.alert('Вы нажали кнопку красного цвета!');
        }
    }],
    [
        {
            text: 'Отмена',
            color: 'CW',
            bg: 'BBlue'
        }
    ]
];
$$.actions(actionSheetButtons);

Числовой ввод: предоставляет общие функции сложения и вычитания чисел.

$$.numberBox();

Прогрессбар: отображает полосу прогресса в указанном месте и может установить время.

$$.progressbar("body",time);

Пользовательская библиотека DOM

KUI не требует никаких сторонних библиотек, включая операции с DOM. У него есть собственная библиотека KDOM. Один из высокопроизводительных библиотек, который интегрирует большинство часто используемых операций DOM.

Вам не нужно изучать что-то новое, потому что его использование и применение похожи на широко известные jQuery, включая большинство распространённых методов и цепочечные вызовы в стиле jQuery.

Теперь существует глобальный объект KDom, чтобы избежать конфликтов с другими библиотеками, мы используем $$$.

Пример использования:

$$('.something').on('click', function (e) {
    $$(this).addClass('hello').attr('title', 'world').insertAfter('.something-else');
});

Доступные методы: