1.0.6 • Published 8 years ago

oc-dialog v1.0.6

Weekly downloads
3
License
MIT
Repository
-
Last release
8 years ago

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（子模块）:

快速开始

通过快速开始，您将了解到使用本框架的基本流程。 如果需要看看效果，可以访问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>
dialog
angular
1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago

0.9.6

8 years ago

0.9.5

8 years ago

0.9.4

8 years ago

0.9.3

8 years ago

0.9.2

8 years ago

0.9.1

8 years ago

0.9.0

8 years ago