📅  最后修改于: 2020-12-08 05:30:35        🧑  作者: Mango

Mobile Angular UI是用于开发混合移动应用程序的开源框架。移动Angular UI利用Twitter Bootstrap和AngularJS来帮助创建有吸引力的HTML5混合移动和桌面应用程序。本教程是为希望学习使用Mobile Angular UI构建混合应用程序的基础知识的软件程序员而设计的，通过简单易用的方式说明了编程概念，本教程将使您充分了解Mobile Angular UI...

📅  最后修改于: 2020-12-08 05:31:03        🧑  作者: Mango

Mobile Angular UI是用于开发混合移动应用程序的开源框架。移动Angular UI利用Twitter Bootstrap和AngularJS来帮助创建有吸引力的HTML5混合移动和桌面应用程序。移动角度UI的功能移动Angular UI有一些很酷的组件，在下面列出-导航栏-导航栏利用设备屏幕的顶部和底部。我们可以使用顶部导航栏显示菜单项或标题部分。底部导航栏可用于显示页脚部分。可滚动...

📅  最后修改于: 2020-12-08 05:31:29        🧑  作者: Mango

在本章中，我们将安装Mobile Angular UI，以便我们可以在项目中使用它。有两种安装Mobile Angular UI的方法-从Github下载使用Npm从Github下载转到以下github链接-https://github.com/mcasimir/mobile-angular-ui/releases，您可以下载最新的角度移动UI。移动角度ui的github链接如下单击克隆或下载按钮...

📅  最后修改于: 2020-12-08 05:32:01        🧑  作者: Mango

本章将介绍项目设置。我们将利用此设置来处理其余各章中的示例。项目安装将使用npm完成，因为很容易安装所需的任何软件包。打开命令提示符，创建一个名为uiformobile /的目录，然后使用cd命令输入该目录。现在执行以下命令-命令npm init将初始化proect-它将创建package.json，如下所示-现在运行以下命令以安装移动角度用户界面。要使用Mobile Angular UI，我们需...

📅  最后修改于: 2020-12-08 05:32:53        🧑  作者: Mango

在本章中，我们将创建第一个可在移动设备和台式机上运行的应用程序。我们在上一章中创建的项目设置具有以下结构-请按照以下步骤使用“移动角度UI”构建简单的UI。第1步在html头部分中添加以下css文件，如下所示-接下来添加js文件-index.html文件将如下所示-第2步我们将看到移动角度UI的基本布局如下-第三步在src /中创建一个js /文件夹，并将app.js添加到其中。定义模块并添加Mo...

📅  最后修改于: 2020-12-08 05:33:16        🧑  作者: Mango

在本章中，我们将了解Mobile Angular UI中可用的基本布局显示。基本布局的结构如下手机或台式机的屏幕分为几部分。侧边栏主体部分从侧边栏div容器开始，一个用于左侧，下一个用于右侧-侧边栏有助于很好地有效利用空间，特别是在移动设备上，从而使UI非常互动和整洁。通过边栏，窗口从左侧和右侧打开。导航栏下一部分是导航栏。以下是要显示的导航栏的div容器-它们显示在顶部和底部。应用主体部分此部分...

📅  最后修改于: 2020-12-08 05:34:21        🧑  作者: Mango

在本章中，我们将了解移动角度UI中的重要组件。它们如下-导航栏侧边栏模态叠加层导航栏导航栏利用设备屏幕的顶部和底部。我们可以使用顶部导航栏显示菜单项或标题部分。底部导航栏可用于显示页脚部分。屏幕上导航栏的简单显示如下-导航栏可以通过两种方式显示：固定方式和溢出方式。重要的CSS类在Mobile Angular UI中显示导航栏，您必须使用css类-navbar，.navbar-app。顶部/底部溢...

📅  最后修改于: 2020-12-08 05:34:39        🧑  作者: Mango

要在移动角度ui中使用下拉菜单，您需要使用.dropdown-menu类。这是显示下拉菜单的示例。我们将在src / home / home.html中添加更改。我们有一个下拉列表中显示的教程列表。屏幕上的输出如下-...

📅  最后修改于: 2020-12-08 05:35:12        🧑  作者: Mango

当内容应该以部分视图的形式出现并且一次可以看到任何一个部分时，通常会使用手风琴。您可以隐藏并打开下一部分以查看其中的内容。让我们来看一个示例，以查看手风琴在Mobile Angular UI中的工作情况。index.htmlsrc / js / app.js手风琴模板被添加到src / home / home.html中。以下是浏览器中的显示-...

📅  最后修改于: 2020-12-08 05:35:49        🧑  作者: Mango

选项卡是角度移动用户界面中可用的有用组件。选项卡可在同一包装中使用，并在单独的窗格中显示内容，就像在浏览器中如何打开选项卡一样。一次仅向用户显示一个选项卡。这是Tabs组件的工作示例。index.htmlsrc / js / app.jssrc / home / home.html以下是浏览器中的显示-...

📅  最后修改于: 2020-12-08 05:36:33        🧑  作者: Mango

在某些设备上，固定位置元素面临一些问题。要使用可滚动区域，Mobile Angular UI将使用overflow：auto。可滚动区域的模板如下-在可滚动区域中添加页眉和页脚添加CSS类.scrollable-header / .scrollable-footer，我们将向所需的可滚动区域添加固定的页眉/页脚。您不必为高度和位置担心，css会处理所有事情。页眉/页脚的模板如下所示-可滚动区域中的...

📅  最后修改于: 2020-12-08 05:37:08        🧑  作者: Mango

本章将重点介绍表格。让我们看一个工作示例，以更好地理解表单。在index.html中，代码如下-在home / home.html中src / app.js将具有以下详细信息-浏览器中的显示如下-在表单中输入详细信息，然后单击“保存”按钮。...

📅  最后修改于: 2020-12-08 05:37:48        🧑  作者: Mango

触摸，滑动，拖动项目等功能由Mobile Angular UI中的手势模块处理。手势模块具有指令和服务，可以照顾触摸，滑动和拖动所需的功能。要使用Mobile Angular UI中的手势功能，您需要添加手势模块。首先将JavaScript文件添加到index.html中，如下所示-稍后将手势模块添加为app.js中的依赖项，如下所示-我们已经讨论了使用手势模块的拖动功能如何工作。看一下“拖放”一...

📅  最后修改于: 2020-12-08 05:38:19        🧑  作者: Mango

Mobile Angular UI使用ui-switch指令提供切换开关元素。 ui-switch指令应用于布尔ngModel值时会进行切换。这是一个拨动开关的工作示例。Index.htmlapp.jssrc / home / home.html浏览器中的显示如下-...

📅  最后修改于: 2020-12-08 05:39:03        🧑  作者: Mango

部分是显示在体内的容器。 Mobile Angular UI利用可用于各节的类来更改布局结构。这是index.html-app.jshome / home.html类别为.app的容器包含顶部和底部导航栏以及屏幕上显示的主要内容。.app类没有任何填充或背景。类.section具有CSS来添加填充和背景。这是没有节的布局。添加class .section之后，您将看到填充已添加到布局中-布局的各节...