OGeek|极客世界-中国程序员成长平台 › 门户 › 开源› WEB应用开发›Angular扩展

angular-ocDialog: 基于Angular的窗体指令。包含： * 窗体操作阻塞 * 窗体关闭及回调 ...

原作者: [db:作者] 来自: 网络收藏邀请

开源软件名称：

angular-ocDialog

开源软件地址：

https://gitee.com/increase/angular-ocDialog

开源软件介绍：

angular-ocDialog

基于Angular的窗体应用框架

项目状态

综合情况

综合案例，实际正在开发的项目Demo: http://probedemo.or-change.cn/probe托管地址: https://git.oschina.net/increase/LemonProbe.git

Version（版本）: 0.5.1 Alpha 1
Author（作者）: Chao Li, Weilin Shi, Yueyu Li
License（许可）: MIT
Supported Browsers（支持的浏览器）: Chrome,Firefox,Safari,Opera,IE 9+,iOS Safari 7.1+,Android Browser 2.3+
Document（文档）: 有标题的功能已经实现，但文档仍在努力完善

submodules（子模块）:

ocCore - 图形操作动作库: http://git.oschina.net/increase/angular-ocCore

快速开始

通过快速开始，您将了解到使用本框架的基本流程。如果需要看看效果，可以访问test/debugger.html文件，里面含有一些不完整的例子。关于更加综合的应用案例，欢迎大家了解我们团队关于WEB自动化测试的项目Lemonce - LemonProbe。相关地址见综合情况。

另外，Lemonce v0.6.4 Alpha 1版本目前停止更新，Alpha 2正在紧张研发，感兴趣的朋友仍然可以通过访问：(http://www.lemonce.net/) 来了解我们Alpha 1的产品

安装

引用脚本资源以及样式资源，注意需要加载ocCore的资源，项目地址见 项目状态 > 子模块

<script src="./ocCore_Path/dist/ocCore[.min].js"></script><script src="./ocDialog_Path/dist/ocDialog[.min].js"></script><link rel="stylesheet" src="./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);                ...    });

指令 - Directive

ocDialogOpen - 根据配置打开窗口

as attribute:

<ANY	oc-dialog-open="">...</ANY>

使用指令方式打开窗体会自动阻塞父窗体（如果存在父窗体的话）。

例如

根据配置打开一个Dialog：

<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); //根据控制器所在的dom查询所在的dialog实例对象	console.log(DI.share); //访问共享数据		...... other statements;});</script><div ng-controller="OpenDialog">	<button oc-dialog-open="myDialog"></button></div>

myDialog.html

<oc-dialog>	<div ng-controller="MyDialog"></div></oc-dialog>

ocDialogSizeMode - 切换窗体最大化和普通

ocDialogClose - 关闭窗口

as attribute:

<ANY	oc-dialog-close>...</ANY>

自动查询该指令最近的窗体并关闭。

例如

myDialog.html

<oc-dialog>	<div ng-controller="MyDialog">		<button oc-dialog-close>取消</button>	</div></oc-dialog>

ocAlertOpen - 打开警告窗口

as attribute:

<ANY	oc-alert-open="">...</ANY>

ocFileOpen - 打开文件列表窗口

as attribute:

<ANY	oc-file-open="">...</ANY>

服务 - Service

ocDialog.queryDI(element) - 根据一个HTMLElement查询其所在的Dialog实例

ocDialog.getNewDI(dialogFactoryName) - 根据Dialog工厂名获取一个Dialog实例

ocDialog.alert(options) - 生成一个alertDialog实例并打开

ocDialog.file(options) - 生成一个fileDialog实例并打开

设计窗体

使用ocDialog可以自定义一个指令

ocDialog

定义一个最简单的没有内容窗体：

<oc-dialog></oc-dialog>

ocDialogTitle - 窗体标题

这个属性会影响到窗体的标题栏内容，值作为直接量读取：

<oc-dialog oc-dialog-title="The title of myDialog"></oc-dialog>

ocDialogIcon - 窗体标志Class

这个属性会影响到窗体左上角的图标区的class，配合自定义的css样式可以设定这个区域的样式：

<oc-dialog oc-dialog-icon="lemoncelogo"></oc-dialog>

ocDialogSwitch - 窗体开关配置

这个属性用于隐藏右上角的按钮，M隐藏最小化按钮，S隐藏尺寸模式按钮：

<oc-dialog oc-dialog-switch="MS"></oc-dialog>

编码过程

根据配置的情况，在项目路径下 src/dialog/ 目录内创建窗口定义welcome.html。创建定义一个简单的登陆窗口，窗体的布局方式参见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="[yourPath]/angular.min.js"></script>		<!-- 《安装》一节所需要引用的资源 -->	</head>	<body>		<a oc-dialog-open="welcomeDialog">打开欢迎登陆窗口</a>	</body></html>

使用了名为Global的控制器，主要提供打开welcome窗口的配置：

youApp.controller('Global', function ($scope) {	$scope.welcomeDialog = {		name: 'welcome'	};});

运行应用，点击打开欢迎登陆窗口按钮，打开了之前定义的窗口。除此之外，可以继续点击该按钮无限打开welcome窗体工厂创建的窗体实例。

emGrid

支持全局缩放的2D窗体布局方法，该特性用于支持rem单位的浏览器上

元件

模仿常用的操作系统窗体编程的控件抽象的控件集合

工具栏

操作柄

按钮 / 输入框

位于Dialog内部的<button>, <input>都会受到影响

ocAddress - 地址栏

操作页面中某个iframe的控件

ocListMenu - 列表菜单

仿Windows 10 经典模式的列表菜单

ocTabs - 选项卡

仿Windows 8/10 样式的选项卡控件，可以使用一个控制对象来从外部控制tab控件的行为和状态。

用法

as Element:

<oc-tab-set oc-tab-contro="...">	<oc-tab oc-tab-title="..." oc-tab-active-fn="...">...</oc-tab>	...</oc-tab-set>

例如

简单地用指令实现一个ocTab控件，控件的尺寸直接在ocTabSet指令内定义：

<oc-tab-set style="width:20rem;height:20rem">	<oc-tab oc-tab-title="Tab 0"></oc-tab>	<oc-tab oc-tab-title="Tab 1"></oc-tab></oc-tab-set>

使用控制对象ocTabControl设定默认激活的tab选项卡，需要在ocTabSet控件所在的$scope下定义一个对象，（例如 tabControl)。ocTabControl会将对象反射到ocTabSet的Scope中。通过该控制对象，可以设置/获取当前被选中的选项卡序号；通过访问$tabs对象可以设定某个选项卡是否被禁用。

例，使用控制对象默认激活 第1个 选项卡，设定 第0个 选项卡禁用，并能够用外部方式激活 第2个 选项卡。

<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)">设置第0个选项卡禁用</button>	<button ng-click="activeTab(2)">设定第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="Tab 0">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>

如果需要在某个选项卡激活的时候执行一个过程，则可以使用ocTab指令上的ocTabActiveFn绑定一个方法。

<script>yourAppModule.controller('TabDemo', function ($scope) {		$scope.activeFn = function () {		console.log('hello, world.');	}	});</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>

以上例子，每当选项卡0被激活，都会调用一次activeFn方法。

ocGrid - 矩阵表格

类似Excel的二维数组处理控件。主要将类似：

[	['one', 'two', 'three'],	['foo', 'bar', 'baz'],	['duang', 'duang', 'duang'],	['1', '2', '3'],	['infantry', 'artillery', 'horse'],	['land', 'air', 'navy'],	['魏', '蜀', '吴'],	['1st', '2nd', '3rd'],	['幽州', '并州', '冀州'],	['青州', '兖州', '豫州'],	['徐州', '雍州', '凉州'],	['扬州', '荆州', '交州'],	['益州', '司隶', '淮南'],	...]

这样的二维数组结构的数据以类似Excel的电子表格方式展现。

用法

as Element:

<oc-grid style="width:400px;height:500px"	oc-grid-data="..."	oc-grid-refresh="..."	oc-grid-control="..."></oc-grid>

ocList - 数据列表

仿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', ... },	...]

这样的数据用列表的形式展现。

用法

as Element:

<oc-list oc-list-data="..."	oc-list-control="..."></oc-list>

例如

简单的指定数据源，列标题会根据列表中第一个数据对象的key自动生成，默认宽度120px：

<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控件的行为。例如，设置/获取当前选中的项目序号，设置标题文本及宽度：

<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>