在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称: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
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); ... }); 指令 - DirectiveocDialogOpen - 根据配置打开窗口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>
<oc-dialog> <div ng-controller="MyDialog"></div></oc-dialog> ocDialogSizeMode - 切换窗体最大化和普通ocDialogClose - 关闭窗口as attribute: <ANY oc-dialog-close>...</ANY> 自动查询该指令最近的窗体并关闭。 例如
<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> 服务 - ServiceocDialog.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> 编码过程根据配置的情况,在项目路径下 <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> 使用了名为 youApp.controller('Global', function ($scope) { $scope.welcomeDialog = { name: '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对象可以设定某个选项卡是否被禁用。 例,使用控制对象默认激活 <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> |
请发表评论