Category: Mobile

Posted on

ionic 卡片 近年来卡片(card)的应用越来越流行，卡片提供了一个更好组织信息展示的工具。 针对移动端的应用，卡片会根据屏幕大小自适应大小。 我们可以很灵活的控制卡片的显示效果，甚至实现动画效果。 卡片一般放在页面顶部，当然也可以实现左右切换的功能。 <div class=”card”> <div class=”item item-text-wrap”> 基本卡片，包含了文本信息。 </div> </div> 尝试一下 » 卡片(card)默认样式带有box-shadow(阴影)，由于性能的原因，和他类似的元素像 list list-inset 并没有阴影。 如果你有很多的卡片，每个卡片都有很多子元素，建议使用内嵌列表（inset list）。 卡片的头部与底部 我们可以通过添加 item-divider 类为卡片添加头部与底部： <div class=”card”> <div class=”item item-divider”> 卡片头部！ </div> <div class=”item item-text-wrap”> 基本卡片，包含了文本信息。 </div> <div class=”item item-divider”> 卡片底部！ </div> </div> 尝试一下…

Read More

Posted on

ionic 表单和输入框 list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。 输入框属性：placeholder 以下实例中，默认为100%宽度（左右两侧没有边框），并使用 placeholder 属性设置输入字段预期值的提示信息。 <div class=”list”> <label class=”item item-input”> <input type=”text” placeholder=”First Name”> </label> <label class=”item item-input”> <input type=”text” placeholder=”Last Name”> </label> <label class=”item item-input”> <textarea placeholder=”Comments”></textarea> </label> </div> 尝试一下 » 输入框属性：input-label 使用 input-label 将标签放置于输入框 input…

Read More

Posted on

ionic 按钮 按钮是移动app不可或缺的一部分，不同风格的app，需要的不同按钮的样式。 默认情况下，按钮显示样式为：display: inline-block。 <button class=”button”> Default </button> <button class=”button button-light”> button-light </button> <button class=”button button-stable”> button-stable </button> <button class=”button button-positive”> button-positive </button> <button class=”button button-calm”> button-calm </button> <button class=”button button-balanced”> button-balanced </button> <button class=”button button-energized”> button-energized </button> <button class=”button button-assertive”> button-assertive </button> <button…

Read More

Posted on

ionic 列表 列表是一个应用广泛的界面元素，在所有移动app中几乎都会使用到。 列表可以是基本文字、按钮，开关，图标和缩略图等。 列表项可以是任何的HTML元素。容器元素需要list类，每个列表项需要使用item类。 ionList和ionItem可以很容易的支持各种交互方式，比如，滑动编辑，拖动排序，以及删除项。 基本用法: <ul class=”list”> <li class=”item”> … </li> </ul> 尝试一下 » 列表分隔符 我们可以使用 item-divider 类来为列表创建分隔符，默认情况下，列表项以不同的背景颜色和字体加粗来区分，但你也可以很容易的定制他。 <div class=”list”> <div class=”item item-divider”> Candy Bars </div> <a class=”item” href=”#”> Butterfinger </a> … </div> 尝试一下 » 带图标列表 我们可以在列表项的左侧或右侧指定图标。 使用 item-icon-left 图标在左侧， item-icon-right 设置图标在右侧。如果你需要在两边都有图标，则两个类都添加上即可。 以下实例中，我们在列表项中使用了…

Read More

Posted on

ionic 创建 APP 前面的章节中我们已经学会了 ionic 框架如何导入到项目中。 接下来我们将为大家介绍如何创建一个 ionic APP 应用。 ionic 创建 APP 使用 HTML、CSS 和 Javascript 来构建，所以我们可以创建一个 www 目录，并在目录下创建 index.html 文件，代码如下： <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Todo</title> <meta name=”viewport” content=”initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”> <link href=”lib/ionic/css/ionic.css” rel=”stylesheet”> <script src=”lib/ionic/js/ionic.bundle.js”></script> <!– 在使用 Cordova/PhoneGap 创建的 APP…

Read More

Posted on

ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。 ionic 默认提供了许多种颜色样式，你可以调用不同的样式名，当然也可以自定义一个。 bar-light <div class=”bar bar-header bar-light”> <h1 class=”title”>bar-light</h1> </div> 尝试一下 » bar-stable <div class=”bar bar-header bar-stable”> <h1 class=”title”>bar-stable</h1> </div> 尝试一下 » bar-positive <div class=”bar bar-header bar-positive”> <h1 class=”title”>bar-positive</h1> </div> 尝试一下 » bar-calm <div class=”bar bar-header bar-calm”> <h1 class=”title”>bar-calm</h1> </div> 尝试一下…

Read More

Posted on

ionic 安装 本站实例采用了ionic v1.3.2 版本，使用的 CDN 库地址： <link href=”https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css” rel=”stylesheet”> <script src=”https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js”></script> ionic 最新版本下载地址：http://ionicframework.com/docs/overview/#download。 下载后解压压缩包，包含以下目录： css/ => 样式文件 fonts/ => 字体文件 js/ => Javascript文件 version.json => 版本更新说明 你也可以在 Github 上下载以下资源文件：https://github.com/driftyco/ionic（在release 目录中）。 接下来，我们只需要在项目中引入以上目录中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可创建 ionic 应用。 实例 <ion-header-bar class=“bar-positive“> <h1 class=“title“>Hello World!</h1> </ion-header-bar>…

Read More

Posted on

ionic 教程 ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。 ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。 ionic 特点 1.ionic 基于Angular语法，简单易学。 2.ionic 是一个轻量级框架。 3.ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。 4.ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。…

Read More

Posted on

使用html5,javascript,css，phonegap创建android应用程序，其实就是利用android的webview显示一个静态的html文件，实现相关的功能。   首先，需要创建一个基于phonegap的android project   创建步骤如下：   new android project and 引入phonegap的jar 添加phonegap的各种插件的配置文件到 res/xml/phonegap.xml,  res/xml/plugins.xml 修改androidmainifest.xml文件，只要是添加各种插件对android硬件的访问权限 创建文件   assets/www/index.html 在项目的入口文件的oncreate方法添加super.loadurl(“file:///android_asset/www/index.html”); 运行项目即可看到效果 注意上边的index.html文件要符合html5标准，因为我们的应用不会只有一个页面，使用html5,可以在定义的data-role=”page”的不同页面间进行跳转   其次，需要引入相关的js和css文件，我在此使用了如下js和css：   jquery.js jquery.mobile.js iscroll.js phonegap.js jquery.mobile.css 注意js的导入顺序，否则可能会出现一些麻烦。 以下的步骤就跟phonegap的api一致了。  

Read More

Posted on

IOS常用的三种本地数据持久化方式: 1：属性序列化列表 存储到文件 plist； 2：归档序列化，对模型数据进行归档； 3：本地数据库存储，嵌入式sqlite； 其实这三种方式都是把数据存储到本地文件里边，只是实现方式和使用的场景不同而已，复杂程度从上到下增加。 除此之外，还有一种方式存储数据，就是使用NSUserDefaults，它已键值对的形式记录应用程序的全局设置，其实settings.bundle里边的数据就是存在NSUserDefaults的。   主要代码如下：   方式一：plist   //先获取plist文件路径 NSArray *path = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); NSString *documentDirectory = [path objectAtIndex:0]; filePath = [documentDirectory stringByAppendingPathComponent:@”xxx.plist”]; //把数据写入plist NSArray *arr = [[NSArray allocl] initWithObjects:A,B,C,nil]; [arr writeToFile:self.filePath atomically:YES]; //从plist取数据 NSMutableArray *arr = [[NSMutableArray alloc]…

Read More