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 ...
随机推荐
- 从零开始学习Vue(三)
我们从一个例子来学习组件,vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar 这个例子用到其他组件,对于初学者来说,一下子要了解那么多组件的使用,会变得一头雾水.所以我把这个例子改写了 ...
- Pascal's Triangle II leetcode
Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3,Return [1,3, ...
- 一个很逗的东西——Jd
这个嘛是本人专门为了NOI上面对拍程序写的对拍程序,已经经历了NOI2015的考验:更重要的是——纯Pascal的哦(HansBug:其实是我不会写.sh脚本TT,谁叫用惯了windows的我只会写b ...
- ios8指纹识别
简介 苹果从iPhone5S开始,具有指纹识别技术,从iOS8.0之后苹果允许第三方 App 使用 Touch ID进行身份验证.指纹识别Touch ID提供3+2共5次指纹识别机会(3次识别失败后, ...
- 无线同步模块SYN1000在电力监测相位测量领域的应用方案
在电力监测领域,出于安全考虑,有些系统不得不采用无线通信的方式,在这样一个无线通信的应用系统,该如何来控制多个设备进行同步采样,以期提高相位角的测量精度,是一个不小的难题. 很多技术人员习惯性的采用无 ...
- paoding-rose 了解
paoding-rose 是人人开源的基于 spring 开发的 javaEE 框架.wiki 地址: https://code.google.com/archive/p/paoding-rose/ ...
- cuda编程学习1——hello world!
将c程序最简单的hello world用cuda编写在GPU上执行,以下为代码: #include<iostream>using namespace std;__global__ void ...
- CSS学习笔记汇总
CSS语法格式:一个css规则,由一个选择器和一个格式声明语句构成 例如:h1{color:red; font-size:14px;} CSS选择器: 1.基本选择器 1)* 号选择器:通配符, ...
- spring定时器的使用
Spring定时任务在有的项目中起到很关键的作用,它允许你通过配置来指定特定时间去调用特定类的特定方法. 一. 分类 1.作业类需要继承特定的类.特定的类有: org.springframework. ...
- Centos7配置文件共享服务器SAMBA三步曲(转)
1.安装 yum install samba samba-client samba-common -y 2.配置 备份已有配置 mv /etc/samba/smb.conf /etc/samba/sm ...