HTML5-ionic框架

pm—–ionic框架(不常用,是基于angular的)

使用时,先把css、js文件引入,写ng-app=”myApp”
这里写图片描述
bundle.js里面有angular所有的东西,例如路由等

1、bar-header

主标题
这里写图片描述
bar-light title可使文字居中
这里写图片描述
bar-stable 颜色与上面有区别
这里写图片描述

bar-positive 颜色与上面有区别
这里写图片描述

bar-calm 颜色与上面有区别
这里写图片描述
bar-balanced 颜色与上面有区别
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

副标题
这里写图片描述

这里写图片描述

这里写图片描述
pull-right把文本拉到右边
这里写图片描述
3、按钮,同header一样的颜色设置—index3.html
这里写图片描述

button-block占满整行
这里写图片描述
这里写图片描述

button-full占满整个宽度(两者有一点区别)
这里写图片描述

button-large 设置为大按钮,button-small 设置为小按钮。
这里写图片描述

button-outline 设置背景为透明。
这里写图片描述
button-clear 设置按钮背景为透明,且无边框。

图标按钮(可设置图标位置,图标形状)
这里写图片描述
这里写图片描述

在头部添加按钮

这里写图片描述

这里写图片描述

4、按钮栏—index4.html
这里写图片描述
这里写图片描述
5、列表—index5.html
普通列表
这里写图片描述
这里写图片描述
图标列表
这里写图片描述
这里写图片描述
这里写图片描述

按钮列表
这里写图片描述
这里写图片描述
这里写图片描述

头像列表
这里写图片描述
这里写图片描述
这里写图片描述

缩略图列表
这里写图片描述
这里写图片描述

内嵌列表
这里写图片描述

这里写图片描述

am—–ionic框架

1、卡片的制作和表单的设置以及其他的自己在网上学习
toggle的应用
这里写图片描述
这里写图片描述
其它的自己网上了解
网格比bootstrap中的栅格好用一些
这里写图片描述
用js实现一些效果(知道网上复制粘贴修改等)
这里写图片描述
把ionic写入
上拉菜单
这里写图片描述
红线部分前者是用来实现下拉效果的,后者是延时器
背景层
这里写图片描述
红线部分前者是用来实现效果的,
下拉刷新
这里写图片描述

复选框
这里写图片描述
这里写图片描述

此处用过滤器json,就是将其转换为json字符串
这里写图片描述
画线部分有无均可
这里写图片描述
可以给鼠标加样式,比如图片

单选框
这里写图片描述
切换开关(类似bootstrap中的switch)
这里写图片描述

手势—长按事件
这里写图片描述
这里写图片描述
手势—轻击事件(类似click)—-on-tap
手势—双击事件(类似doubleclick)—-on-double-tap
手势—轻击事件(类似click)—-on-tap
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

头部底部–
这里写图片描述

am—–ionic框架

列表操作—
这里写图片描述
点击按钮出现删除li的功能
加载操作(类似于bootstrap模态框)—
这里写图片描述
这里写图片描述

模态窗—(比bootstrap中的多个动态的效果)
这里写图片描述

浮动框—
对话框—
这里写图片描述 把scope服务传进来
用js做一个alert的效果—
这里写图片描述
滚动条滚动,但内容不动的事件

侧边栏菜单—

pm—–ionic框架

滚动条—


  • 技术交流QQ群:198983438(加群请备注在哪里看到我们的群)在群里面随时会更新一些我们的课程视频

善知教育学习视频大汇总

猜你喜欢

转载自blog.csdn.net/itszt888/article/details/77368925
今日推荐