Слияние кода завершено, страница обновится автоматически
Пример проекта, который находится в процессе разработки
Демо: http://probedemo.or-change.cn/probe
Репозиторий: https://git.oschina.net/increase/LemonProbe.git
С помощью этого руководства вы узнаете основной процесс использования данного фреймворка.
Если вас интересует демонстрация работы, вы можете посетить файл test/debugger.html, где содержится несколько незаконченных примеров.
Для более полного примера приложения обратитесь к нашему проекту WEB автоматизации тестирования Lemonce - LemonProbe.
Дополнительные ссылки см. в разделе Общие сведения.
Кроме того, версия Lemonce v0.6.4 Alpha 1 больше не обновляется, а версия Alpha 2 находится в активной разработке. Интересующихся можно попросить посетить:
(http://www.lemonce.net/) для получения информации о продукте Alpha 1
<script src="./ocCore_Path/dist/ocCore.min.js"></script>
<script src="./ocDialog_Path/dist/ocDialog.min.js"></script>
<link rel="stylesheet" href="./ocDialog_Path/dist/style.css"/>
angular.module("YourApp", ["oc-dialog"])
.config(function(ocDialogProvider) {
// Настройка маршрута для ресурсов диалогового окна
ocDialogProvider.config("ROUTE_PATH", "./src/dialog/");
// Основной z-index диалогового окна
ocDialogProvider.config("BASE_Z_INDEX", 500);
});
в качестве атрибута:
<ANY
oc-dialog-open="">
...
</ANY>
Использование директивы для открытия диалогового окна автоматически блокирует родительское окно (если оно существует).
Открытие диалогового окна согласно конфигурации:
<script>
yourAppModule.controller('OpenDialog', function($scope) {
$scope.myDialog = {
name: "dialogFactoryName",
share: function() {
return {
data: "Определяет данные, которые будут общими между открытым окном и текущим окном",
...
};
}
};
});
controller('MyDialog', function ($scope, $element, ocDialog) {
var DI = ocDialog.queryDI($element); // Поиск экземпляра диалогового окна, связанного с контроллером
console.log(DI.share); // Доступ к общим данным
...
});
</script>
<div ng-controller="OpenDialog">
<button oc-dialog-open="myDialog">Открыть диалоговое окно</button>
</div>
myDialog.html
<oc-dialog>
<div ng-controller="MyDialog"></div>
</oc-dialog>
как атрибут:
<ANY
oc-dialog-close>
...
</ANY>
Автоматически ищет ближайшее диалоговое окно и закрывает его.
myDialog.html
<oc-dialog>
<div ng-controller="MyDialog">
<button oc-dialog-close>Отмена</button>
</div>
</oc-dialog>
как атрибут:
<ANY
oc-alert-open="">
...
</ANY>
как атрибут:
<ANY
oc-file-open="">
...
</ANY>
Используйте ocDialog для создания своих собственных директив
Создайте самое простое диалоговое окно без содержимого:
<oc-dialog></oc-dialog>
Этот атрибут влияет на содержимое заголовка окна, значение используется как прямой текст:
<oc-dialog oc-dialog-title="Заголовок моего окна"></oc-dialog>
```### ocDialogIcon — Класс иконки окна
Этот атрибут влияет на класс иконки в верхнем левом углу окна, который можно использовать для применения пользовательских CSS стилей:
```html
<oc-dialog oc-dialog-icon="lemoncelogo"></oc-dialog>
```### ocDialogSwitch — Настройки переключения окна
Этот атрибут используется для скрытия кнопок управления в правом верхнем углу: M — скрыть кнопку минимизации, S — скрыть кнопку изменения размера.
```html
<oc-dialog oc-dialog-switch="MS"></oc-dialog>
```### Процесс разработки
В зависимости от [настроек](#настройки), создайте определение окна в директории проекта `src/dialog/`:
```plaintext
welcome.
Создайте определение простого окна входа, с использованием метода расположения элементов emGrid:
<oc-dialog style="width:10.2rem;height:6rem" oc-dialog-title="Окно входа" oc-dialog-switch="MS">
<div class="grid" ng-controller="Login">
<label style="top:0rem;left:0.3rem;">Введите токен:</label>
<input type="text" style="top:1.3rem;left:0.3rem;width:16em;">
<button oc-dialog-open="main"
style="right:0.3rem;bottom:0.3rem;height:1.4rem;width:4.3rem">Отмена</button>
</div>
</oc-dialog>
Напишите HTML-элемент в HTML, чтобы открыть это окно, используя скрипты Angular и других ресурсов, таких как установка. Пример файла запуска приложения может выглядеть следующим образом:
<!DOCTYPE html>
<html ng-app="probe" ng-controller="Global" style="font-size: 20px;">
<head>
<meta charset="utf-8"/>
<script src="[ваш путь]/angular.min.js"></script>
<!-- Ресурсы, необходимые для установки -->
</head>
<body>
<a oc-dialog-open="welcomeDialog">Открыть окно входа</a>
</body>
</html>
Используется контроллер с названием Global, который предоставляет конфигурацию для открытия окна приветствия:
youApp.controller('Global', function($scope) {
$scope.welcomeDialog = {
name: 'welcome'
};
});
Запустите приложение, кликните по кнопке «Открыть окно входа», чтобы открыть ранее определённое окно.
Кроме того, можно продолжать кликать по этой кнопке, чтобы бесконечно открывать экземпляры окон, созданные оконной фабрикой.### emGrid
Метод размещения элементов двумерного окна с поддержкой глобального масштабирования, используемый для браузеров, поддерживающих единицы измерения rem.
Набор абстракций контролов, имитирующий часто используемые элементы управления операционной системы.
Контроллеры <button> и <input>, находящиеся внутри диалогового окна, будут подвержены влиянию.
Элемент управления страницей, содержащей iframe.
Меню списка, имитирующее Windows 10 в режиме классического дизайна.
Элемент управления вкладками, имитирующий стиль Windows 8/10. Можно использовать один объект управления для внешнего управления поведением и состоянием элемента управления вкладками.
Как элемент:
<oc-tab-set oc-tab-control="...">
<oc-tab oc-tab-title="..." oc-tab-active-fn="...">...</oc-tab>
...
</oc-tab-set>
Простое использование директивы для создания элемента управления ocTab, размер которого определяется прямо в директиве ocTabSet:
<oc-tab-set style="width:20rem;height:20rem">
...
Используйте контроллер ocTabControl для установки активной вкладки по умолчанию. Для этого требуется определить объект (например, tabControl) в области видимости $scope.Контроллер ocTabControl отражает этот объект в области видимости ocTabSet. Через этот контроллер можно устанавливать/получать текущую выбранную вкладку; через доступ к объекту $tabs можно управлять состоянием вкладок.
Пример использования контроллера для активации первой вкладки по умолчанию, деактивации второй вкладки и активации третьей вкладки снаружи:
<script>
yourAppModule.controller('TabDemo', function($scope) {
$scope.tabControl = {
selected: 1
};
$scope.toDisable = function(index) {
$scope.tabControl.selected = index;
}
$scope.activeTab = function(index) {
$scope.tabControl.$tabs[index].isDisabled = true;
}
});
</script>
<div ng-controller="TabDemo">
<button ng-click="toDisable(0)">Деактивировать первую вкладку</button>
<button ng-click="activeTab(2)">Активировать третью вкладку</button>
<label>Номер активированной вкладки:</label>
<input ng-model="tabControl.selected"/>
<oc-tab-set oc-tab-control="tabControl" style="width:20rem;height:20rem">
<oc-tab oc-tab-title="Вкладка 0">вкладка 0</oc-tab>
<oc-tab oc-tab-title="Вкладка 1">вкладка 1</oc-tab>
<oc-tab oc-tab-title="Вкладка 2">вкладка 2</oc-tab>
</oc-tab-set>
</div>
Если вам нужно выполнить какое-либо действие при активации конкретной вкладки, вы можете использовать атрибут ocTabActiveFn, чтобы привязать метод к этой вкладке.
<script>
yourAppModule.controller('TabDemo', function($scope) {
$scope.activeFn = function() {
console.log('Здравствуй, мир!');
}
});
</script><div ng-controller="TabDemo">
<oc-tab-set oc-tab-control="tabControl" style="width:20rem;height:20rem">
<oc-tab oc-tab-title="Tab 0" oc-tab-active-fn="activeFn">tab 0</oc-tab>
<oc-tab oc-tab-title="Tab 1">tab 1</oc-tab>
<oc-tab oc-tab-title="Tab 2">tab 2</oc-tab>
</oc-tab-set>
</div>
В этом примере каждый раз, когда активируется первая вкладка, вызывается метод activeFn.
Сеточный компонент для работы с двумерными массивами данных, аналогично Excel. Пример использования может выглядеть следующим образом:
<oc-grid data="data"></oc-grid>
``````js
[
['один', 'два', 'три'],
['foo', 'bar', 'baz'],
['дуанг', 'дуанг', 'дуанг'],
['1', '2', '3'],
['пехота', 'артиллерия', 'конница'],
['земля', 'воздух', 'море']
]
``````markdown
[['Цинь', 'Шу'], ['первый', 'второй', 'третий'], ['Южный округ', 'Средний округ', 'Западный округ'], ['Восточный округ', 'Центральный округ', 'Южный округ'], ['Восточно-южный округ', 'Северо-западный округ', 'Северо-восточный округ'], ['Юго-восточный округ', 'Южный округ', 'Юго-западный округ'], ['Западный округ', 'Средне-южный округ', 'Южнозападный округ'], ...]
Такое двумерное массива данных отображается в виде электронной таблицы, аналогичной Excel.
как Элемент:
<oc-grid style="width:400px;height:500px"
oc-grid-data=". . . "
oc-grid-refresh=". . . "
oc-grid-control=". . . "></oc-grid>
Контрол, имитирующий список файлов Windows. Основной формат данных может выглядеть следующим образом:
[
{ fileName: 'xxxx1', updateTime: 'yyyy-HH-dd', ... },
{ fileName: 'xxxx2', updateTime: 'yyyy-HH-dd', ... },
{ fileName: 'xxxx3', updateTime: 'yyyy-HH-dd', ... },
{ fileName: 'xxxx4', updateTime: 'yyyy-HH-dd', ... },
...
]
Эти данные отображаются списком.
как Элемент:
<oc-list oc-list-data=". . ." oc-list-control=". . . "></oc-list>
Простое указание источника данных, заголовки колонок будут сгенерированы автоматически на основе ключей первого объекта списка, ширина по умолчанию составляет 120 пикселей:
<script>
yourAppModule.controller('listDemo', function($scope) {
$scope.listData = [
{ fileName: 'xxxx1', updateTime: '2001-04-21' },
{ fileName: 'xxxx2', updateTime: '2001-04-22' },
{ fileName: 'xxxx3', updateTime: '2001-04-23' },
{ fileName: 'xxxx4', updateTime: '2001-04-24' }
];
});
</script>
<div ng-controller="listDemo">
<oc-list oc-list-data="listData"></oc-list>
</div>
```
Используя контроллер, поведение компонента `ocList` можно управлять внешним образом. Например, установка/получение текущего выбранного элемента, установка заголовков и их ширины:
```html
<script>
yourAppModule.controller('listDemo', function($scope) {
$scope.listData = [
{ fileName: 'xxxx1', updateTime: '2001-04-21' },
{ fileName: 'xxxx2', updateTime: '2001-04-22' },
{ fileName: 'xxxx3', updateTime: '2001-04-23' },
{ fileName: 'xxxx4', updateTime: '2001-04-24' }
];
$scope.listCtrl = {
selected: 2,
header: [
{
key: 'fileName',
text: "Файл",
width: '70px'
},
{
key: 'updateTime',
text: "Дата обновления",
width: '6em'
}
]
};
});
</script>
<div ng-controller="listDemo">
<oc-list oc-list-data="listData" oc-list-control="listCtrl"></oc-list>
</div>
```
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )