ionic-CSS：ionic select

ylbtech-ionic-CSS:ionic select 1.返回顶部 1. ionic select ionic select 的 select 相比原生的要更加美观些.但是弹出的可选选项样式是浏览器默认的. 每个平台上的可选项样式都是不一样的,在PC电脑的浏览器上,你会看到传统的下拉界面,Android 上会弹出单选按钮选项,iOS 有个滚轮操作界面. 实例 <div class="list"> <div class="item item-input…

Ionic Css样式详解

Header是固定在屏幕顶部的组件.可以包含如标题和左右的功能按钮.Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶部有一个Header的距离. 如: 1 <ion-view> <ion-content class="no-header"> <div class="bar bar-header bar-royal"> <a href=&quo…

Ionic 入门与实战之第三章：Ionic 项目结构以及路由配置

原文发表于我的技术博客本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ionic 项目结构这是初始化创建的 Ionic 项目结构,接下来将一一讲解. 因为 Ionic 使用了 Cordova 技术,所以项目的文件架构基本和 Cordova 的项目类似. 1.1 app 文件夹项目文件夹,后续的代码编写都将在这里进行,因为使用的语言就是 HTML5/CSS(Sass)/Ja…

稍复杂的ionic例子：显示一个列表，并且允许点击进入列表项

这个例子,按照MVC的方式进行了分层,下面是代码: demo3.htm <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>angular-demo3</title> <link href="lib/ionic/css/ionic.css" rel="styleshe…

Ionic学习记录（一）：ionic及cordova安装、创建第一个应用、项目结构

目录: 一.ionic的安装二.创建第一个应用程序三.浏览器中预览应用四.项目结构五.添加页面一.ionic的安装使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI”),并使用Cordova构建和部署为本机应用程序. CLI:command-line interface的缩写,命令行界面,是指可在用户提示符下键入可执行指令的界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行. Cordova:是从PhoneGap中抽出的核心代码,是贡献…

ionic-CSS：ionic icon(图标)

ylbtech-ionic-CSS:ionic icon(图标) 1.返回顶部 1. ionic icon(图标) ionic 也默认提供了许多的图标,大概有 700 多个,针对 Android 和 iOS 有不同的样式. Ionic icons 官网: http://ionicons.com/ 国内图标样式 CDN 地址:https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css. 用法也非常的简单,由一个 icon 类及指定图标类组…

ionic：ionic 教程

ylbtech-ionic:ionic 教程 1.返回顶部 1. ionic 教程 ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework ). 可以帮助您使用 Web 技术,比如 HTML.CSS 和 Javascript 构建接近原生体验的移动应用程序. ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发. ionic是一个轻量的手机UI库,…

杂项：ionic

ylbtech-杂项:ionic ionic是一个用来开发混合手机应用的,开源的,免费的代码库.可以优化html.css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS的优化.ionic会是一个可以信赖的框架. 1. 介绍返回顶部 ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架.绑定了AngularJS和Sass.这个框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用…

国内常用的三种框架：ionic/mui/framework7对比

国内常用的三种框架:ionic/mui/framework7对比原文连接:http://zhihu.com/question/19558750/answer/91179040…

ionic实战系列(一)：ionic的开发环境配置和编译、发布

我的ionic实战系列是基于<<Ionic实战>>[美]Jeremy Wilken著-这本书的读书笔记,有诸多借鉴,不详细的地方请参考书籍本身的内容. 1.1技术栈模型 Ionic的工作原理是通过cordova把一个Web应用嵌入原生应用.以下两张图介绍了Ionic的技术栈模型和Hybrid应用和其它类型的应用的区别,一目了然. ionic技术栈模型比较原生应用.移动端网站和Hybrid应用的架构原生应用 ios使用Objective-C,或者Swift.Android使用ja…

Ionic 入门与实战之第二章第二节：Ionic 环境搭建之 Ionic Lab 使用

原文发表于我的技术博客本文是「Ionic 入门与实战」系列连载的第二章第二节,主要对 Ionic Lab 工具作了介绍,并讲解了其使用方法,这也是一个开发 Ionic 比较好的调试工具. 原文发表于我的技术博客 Ionic Lab 是 Ionic 发布的一个可视化.跨平台的项目管理工具,可以创建.测试.编译.发布 Ionic 项目. 1. App 创建这里的创建功能就是类似于之前的 Ionic 的命令:ionic start. 可以选择需要使用的模板进行创建,并且可以选择是否使用 Sass…

Ionic 入门与实战之第一章：Ionic 介绍与相关学习资源

原文发表于我的技术博客本文是「Ionic 入门与实战」系列连载的第一章,主要对 Ionic 的概念.发展历程.适配的移动平台等知识进行了介绍,并分享了 Ionic 相关的学习资源. 原文发表于我的技术博客 1. Ionic 简介在前端技术发展越来越快的今天,Hybrid App 开发技术也受到了很大的影响.Ionic 在 2013 年发布第一个版本,目前已经发布到了 2.0 Beta 6 (2016/04/25),是一个比较成熟,也是发展比较快的一个 Hybrid App 开发框架. 1.1…

Ionic 2 ：如何实现列表滑动删除按钮

http://blog.csdn.net/h254532699/article/details/54382123 使用Ionic这种框架伟大的地方在于用户界面元素默认准备好了,意味着你可以设计更好的app而不需要很强的用户体检设计背景,而且让你可以更容易实现这些模式. 这篇教程将展示如何使用Ionic2添加一个简单的删除按钮到列表,当用户滑动列表项到左边的时候.这是一个处理删除列表数据时候常用的模式.本教程将涵盖创建这个滑动删除按钮所需要的一切. 删除例子 1.创建Ionic2应用通过以下命令…

第三章：ionic环境搭建之windows篇

下面是在windows操作系统上面安装ionic的步骤,已经在Windows 10/ 7/ XP下面通过验证. 安装JDK 1.1 下载(http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)并安装 1.2 配置:高级->环境变量 JAVAHOME: C:\Program Files\Java\jdk1.7.0_25 Path: C:\Program Files\Java\jdk1.…

ionic-Javascript：ionic 上拉菜单(ActionSheet)

ylbtech-ionic-Javascript:ionic 上拉菜单(ActionSheet) 1.返回顶部 1. ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项. 非常危险的选项会以高亮的红色来让人第一时间识别.你可以通过点击取消按钮或者点击空白的地方来让它消失. 实例 HTML 代码 <body ng-app="starter" ng-controller="actionsheetCtl&quo…

ionic-CSS：ionic 颜色

ylbtech-ionic-CSS:ionic 颜色 1.返回顶部 1. ionic 颜色 ionic 提供了很多颜色的配置,当然你可以根据自己的需要自定义颜色. 实例 <ul class="list color-list-demo"> <li class="item dark"> light <span class="color-demo light-bg light-border"></span>…

ionic-CSS：ionic 网格(Grid)

ylbtech-ionic-CSS:ionic 网格(Grid) 1.返回顶部 1. ionic 网格(Grid) ionic 的网格(Grid)和其他大部分框架有所不同,它采用了弹性盒子模型(Flexible Box Model) .而且在移动端,基本上的手机都支持.row 样式指定行,col 样式指定列. 同等大小网格在带有 row 的样式的元素里如果包含了 col 的样式,col 就会设置为同等大小. 以下实例中 row 的样式包含了 5 个 col 样式,每个 col 的宽度为 20%…

ionic-CSS：ionic tab(选项卡)

ylbtech-ionic-CSS:ionic tab(选项卡) 1.返回顶部 1. ionic tab(选项卡) ionic tab(选项卡) 是水平排列的按钮或者链接,用以页面间导航的切换.它可以包含文字和图标的组合,是一种移动设备上流行的导航方法. 以下选项卡容器使用了 tabs 类,每个选项卡使用 tab-item 类.默认情况下,选项卡是文本的,并没有图标. 实例 <div class="tabs"> <a class="tab-item"…

ionic-CSS：ionic Range

ylbtech-ionic-CSS:ionic Range 1.返回顶部 1. ionic Range ionic Range 是一个滑块控件,ionic 为 Range 提供了很多种默认的样式.而且你可以在许多种元素里使用它比如列表或者 Card . 实例 <div class="range"> <i class="icon ion-volume-low"></i> <input type="range"…

ionic-CSS：ionic 单选框

ylbtech-ionic-CSS:ionic 单选框 1.返回顶部 1. ionic 单选框 ionic 单选按钮与标准 type="radio" 的 input元素类似.以下展示了现代app类型的单选按钮. 每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同.radio-icon 类用于是否显示图标. ionic 在单选项中使用了 <label> 元素,使其更易点击. 实例 <div cla…

ionic-CSS：ionic checkbox（复选框）

ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox 效果上其实相差不大,只是样式上有所不同. 以下实例演示了多个复选框的列表. 注意,每个选项的 item 类后需要添加 item-checkbox 类. 复选框可以使用 checkbox-assertive 来指定颜色. <ul class="list"> <li cla…

ionic-CSS：ionic Toggle(切换开关)

ylbtech-ionic-CSS:ionic Toggle(切换开关) 1.返回顶部 1. ionic Toggle(切换开关) 切换开关类似与 HTML 的 checkbox 标签,但它更易于在移动设备上使用. 切换开关可以使用 toggle-assertive 来指定颜色. <label class="toggle"> <input type="checkbox"> <div class="track">…

ionic-CSS：ionic 表单和输入框

ylbtech-ionic-CSS:ionic 表单和输入框 1.返回顶部 1. ionic 表单和输入框 list 类同样可以用于 input 元素.item-input 和 item 类指定了文本框及其标签. 输入框属性:placeholder 以下实例中,默认为100%宽度(左右两侧没有边框),并使用 placeholder 属性设置输入字段预期值的提示信息. <div class="list"> <label class="item item-inp…

ionic-CSS：ionic 卡片

ylbtech-ionic-CSS:ionic 卡片 1.返回顶部 1. ionic 卡片近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具. 针对移动端的应用,卡片会根据屏幕大小自适应大小. 我们可以很灵活的控制卡片的显示效果,甚至实现动画效果. 卡片一般放在页面顶部,当然也可以实现左右切换的功能. <div class="card"> <div class="item item-text-wrap"> 基本卡片…

ionic-CSS：ionic 列表

ylbtech-ionic-CSS:ionic 列表 1.返回顶部 1. ionic 列表列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到. 列表可以是基本文字.按钮,开关,图标和缩略图等. 列表项可以是任何的HTML元素.容器元素需要list类,每个列表项需要使用item类. ionList和ionItem可以很容易的支持各种交互方式,比如,滑动编辑,拖动排序,以及删除项. 基本用法: <ul class="list"> <li class=&quo…

ionic-CSS：ionic 按钮

ylbtech-ionic-CSS:ionic 按钮 1.返回顶部 1. onic 按钮按钮是移动app不可或缺的一部分,不同风格的app,需要的不同按钮的样式. 默认情况下,按钮显示样式为:display: inline-block. <button class="button"> Default </button> <button class="button button-light"> button-light </…

ionic-CSS：ionic 头部与底部

ylbtech-ionic-CSS:ionic 头部与底部 1.返回顶部 1. ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮. ionic 默认提供了许多种颜色样式,你可以调用不同的样式名,当然也可以自定义一个. bar-light <div class="bar bar-header bar-light"> <h1 class="title">bar-light</h1…

Ionic实战三：Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览

这个demo的主要功能有两个,一个是首页的导航向上拉动会浮动在最上面的效果,另一个就是我们平时非常实用的功能,就是图片预览功能点击可以放大图片,并且可以左右滑动,还可以双击放大缩小图片以及双手指控制图片的大小,有点类似汽车之家的图片预览功能 iClub theme主要功能 Included ionic plugins Ionic Filter Bar Ionic Gallery () Ionic Scroll Sista ion-affix 使用此demo需要的Cordov…

ionic第二坑——ionic 上拉菜单(ActionSheet)安卓样式坑

闲话不说,先上图: 这是IOS上的显示效果,代码如下: HTML部分: <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <h2 ng-click="show()">Action Sheet</h2> </ion-content> </ion-pane>…

jQuery插件：模拟select下拉菜单

没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery插件:模拟select下拉菜单</title> <style> /* css reset */ body,ul,ol,li,dl,dt,dd,h1,table,tr,td,thead,tbody,tfoot,h2,h3,h4,h5,h6,…

【ionic-CSS：ionic select】的更多相关文章