OnsenUI 前端框架(三)
上一章咱们学习了OnsenUI的工具栏、侧边栏和标签栏。通过对页面上这三部分的学习,咱们对混合应用的一个页面有了大体上的认识。从这一章开始,咱们学习OnsenUI混合项目开发过程中会用到的各种各样的组件。通过对OnsenUI组件的学习,咱们可以通过书写很少的标签和样式,就能完成很美丽很舒服的页面布局组件。
1:列表
第一个要学习的OnsenUI组件就是列表,列表是在可滚动视图中显示一组数据的非常受欢迎的模式。Onsen UI通过使用<ons-list>和<ons-list-item>标签支持可滚动列表。要创建列表,请放置<ons-list>标签和<ons-list-item>标签。此外,<ons-list-header>可以用于表示分组的列表项。
代码示例:
第二个列表项中用到了一个modifier属性,属性值为tappable,通过添加这个属性和属性值,列表项会显示点击效果。
显示效果:
列表有点击的效果以外,右侧有箭头也是大家经常看到的。OnsenUI也提供了相关的属性:modifier=”chevron”
代码示例:
显示效果:
除了列表的右侧箭头,在列表中添加表单元素在有些项目中也是有需求的。
前两个列表项存放的是普通的文本表单元素。添加的样式类是OnsenUI框架提供的,可以去到输入框默认的边框。第二个列表项用到了行列标签,后面会讲到。在行列里添加了单选框,涉及到了一个OnsenUI框架里的样式类。写法相对来说很固定。后面两个列表项里存放的是switch开关,用到了一个ons-switch开关。更多标签后面会一一介绍。
显示效果:
列表展示代码中用到表单元素,和平时咱们写表单元素基本是一致的。单选框的使用很简单,有一个开关是需要大家去用一下的,那就是ons-switch。后面会有更多的OnsenUI标签,大家会陆续学到。
其实列表的内容可以是你想要的任何布局。大家可以找一个你想实现的列表,只需要将你的页面内容填充到ons-list-item即可。通过简单的设置,即可完成一个相对复杂的列表布局。下面我模仿一个美团的列表,大家看一下。
代码示例:
上面的代码是js和html部分。显示效果大家已看到了。大家可以去找一个想实现的效果列表去模仿。关于上面的代码,我以附件的形式给大家,大家可以去参考一下。今天的分享先到这里,下次咱们继续。
OnsenUI 前端框架(三)的更多相关文章
- vue 前端框架 (三)
VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 3.VUE前端框架学习记录三:Vue组件化编码1
VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- springmvc项目搭建三-添加前端框架
这几年前端框架发展可以说非常迅猛了...实际项目中也用到了几个,easyui相对来讲,算是我第一个接触的前端框架了,用的时候感觉很方便,省了很多代码量,一个好的前端框架可以为你省去很多精力在前端布局上 ...
- 移动APP开发框架盘点2:Web移动前端框架大全
前言 自上次发布了<移动APP开发框架盘点>后,时间已经过去了三年, 为什么突然又写一篇续集呢?是因为有一个非常有意思的发现. 开源项目其实有一个成熟周期,这个周期大概是三年左右,自Rea ...
- 10大H5前端框架
作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这 ...
- Web前端框架汇总
在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...
- 如何选择前端框架:ANGULAR VS EMBER VS REACT
最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发 ...
- 阿里前端框架Alice是个不错的选择
BootStrap虽然用户群体广大,其整体风格尽管有不少skin可选,但以国情来看还是不好看. 阿里开源的前端框架,个人觉得还是很不错,Alice处处透着支付宝中界面风格的气息,电商感挺强. 以下内容 ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
随机推荐
- wemall app商城源码中ScrollView中嵌套ListView主要代码
很多时间我们在scorllview中嵌入listview的时候,都只能看到listview显示一行数据,而我们的要求是显示多行,即我们数据的行数, 当ListView的高度设定一定的值时,ListVi ...
- 基于SSH协议的端口转发
[前言] 最近一直在使用ssh协议的端口转发(隧道)功能,完成对内网空透等.这篇文章将主要讲解3种常用的ssh tunnelling使用方法和基本原理. 在介绍具体内容前,我先奉上端口转发的常用情景: ...
- SQL_Join 小总结
原文出自 :http://www.nowamagic.net/librarys/veda/detail/936 对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多in ...
- Java 集合的理解(持续更新......)
一.集合的由来 通常,我们的程序需要根据程序运行时才知道创建多少个对象.但若非程序运行,程序开发阶段,我们根本不知道到底需要多少个数量的对象,甚至不知道它的准确类型.为了满足这些常规的编程需要,我们要 ...
- ionic/cordvoa 修改platform文件夹里的文件,build会覆盖问题
这个问题开始让我感觉很崩溃,然后,我也很意外,如果遇到可以试一试 情景: 编辑platform/android/build.gradle 看了一下cordova 命令,好像还没这个命令,但是我还真的执 ...
- QT Creator 快速入门教程 读书笔记(一)
一 Qt简介 Qt 是一个跨平台的C++应用程序框架,支持Windows.Linux.Mac OS X.Android.iOS.Windows Phone.嵌入式系统等.也就是说,Qt 可以同时支持桌 ...
- (5)java中的常用API,其实就是一些常见类的使用
String方法来介绍 两种声明: 1.String str="1";这种首先检查常量池中是否已经有该常量字符串"1" 如果有的话,不会创建新的常量字符串,若有 ...
- 对于用div+css随心所欲布局的思考
在div+css取代Table成为主流的时代,学会用其进行随心所欲的布局是一个不可回避的技能.那么,重点掌握哪几个要点呢? 整体布局:从整体到局部的顺序进行布局,逐步定义div集css样式: 灵活运用 ...
- java学习笔记 --- 异常
异常 (1)程序出现的不正常的情况. (2)异常的体系 Throwable |--Error 错误,严重问题,我们不处理. · |--Exception 异常 |--R ...
- SQLServer中间接实现函数索引或者Hash索引
本文出处:http://www.cnblogs.com/wy123/p/6617700.html SQLServer中没有函数索引,在某些场景下查询的时候要根据字段的某一部分做查询或者经过某种计算之后 ...