Metrics
0
Watch 16 Star 36 Fork 6

lichao / angular-ocDialogJavaScriptMIT

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
基于Angular的窗体指令。 包含: * 窗体操作阻塞 * 窗体关闭及回调 * 窗体打开及回调 * z-index管理 spread retract

Clone or download
Loading...
README.md

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>

Comments ( 0 )

You need to Sign in for post a comment

Help Search