16 Star 36 Fork 6

lichao / angular-ocDialog

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

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>
The MIT License (MIT) Copyright (c) 2015 lichao Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

基于Angular的窗体指令。 包含: * 窗体操作阻塞 * 窗体关闭及回调 * 窗体打开及回调 * z-index管理 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/increase/angular-ocDialog.git
git@gitee.com:increase/angular-ocDialog.git
increase
angular-ocDialog
angular-ocDialog
master

搜索帮助

14c37bed 8189591 565d56ea 8189591