综合案例,实际正在开发的项目 Demo: 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的产品
引用脚本资源以及样式资源,注意需要加载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);
...
});
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>
as attribute:
<ANY
oc-dialog-close>
...
</ANY>
自动查询该指令最近的窗体并关闭。
myDialog.html
<oc-dialog>
<div ng-controller="MyDialog">
<button oc-dialog-close>取消</button>
</div>
</oc-dialog>
as attribute:
<ANY
oc-alert-open="">
...
</ANY>
as attribute:
<ANY
oc-file-open="">
...
</ANY>
使用ocDialog可以自定义一个指令
定义一个最简单的没有内容窗体:
<oc-dialog></oc-dialog>
这个属性会影响到窗体的标题栏内容,值作为直接量读取:
<oc-dialog oc-dialog-title="The title of myDialog"></oc-dialog>
这个属性会影响到窗体左上角的图标区的class,配合自定义的css样式可以设定这个区域的样式:
<oc-dialog oc-dialog-icon="lemoncelogo"></oc-dialog>
这个属性用于隐藏右上角的按钮,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窗体工厂创建的窗体实例。
支持全局缩放的2D窗体布局方法,该特性用于支持rem单位的浏览器上
模仿常用的操作系统窗体编程的控件抽象的控件集合
位于Dialog内部的<button>, <input>都会受到影响
操作页面中某个iframe的控件
仿Windows 10 经典模式的列表菜单
仿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方法。
类似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>
仿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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型