李洋学习笔记-SUI Mobile实战笔记

阅读数:3359 发布时间:2016-06-09 00:13:20

作者:w1ly 标签: 李洋 委培班 w1 SUI 框架

SUI Mobile学习笔记

页面布局

page-group 为 page集合的容器,里面放多个平行的.page,其他.page作为内联页面由路由控制展示

单个page ,第一个.page默认被展示

rem

rem 是相对于 html 元素的 font-size 的一个单位。如果 html 上定义了 font-size: 20px;,则无论在任何地方都是 1rem = 20px 这个大小不会受到父元素的影响。

rem的优势在于实现强大的屏幕适配

路由

Router默认开启,会自动拦截所有链接的Touch行为,如果希望一个链接走浏览器原生跳转而不使用router,可以在链接上增加 class="external" 或者自定义属性,如 xxx.

如果需要禁用路由功能,那么可以在 zepto 之后, msui 之前使用 script $.config = {router: false} 来禁用.

路由功能的前提

在任意链接上增加一个 .back 类,点击就会自动返回到上一页(调用 history.back)

  1. 内联页面

可以在同一个HTML文件中内联编写多个页面。每一个页面都是一个 .page 容器,如果有多个页面,则需要用 .page-current 标记出第一次进入的时候应该显示的页面。

每一个 .page 容器都应该有一个全局唯一的id,路由器会使用这个id作为唯一标示,如果没有设置id,可能会导致路由出错

  1. AJAX加载新页面

注意: ajax 和 pushState 限制了 ajax 加载的页面只能是同域.

通过ajax加载新页面和普通的链接写法没有区别,路由器会自动拦截链接的点击事件,并通过ajax请求加载新的页面。

内容区

如果希望页面内容所有两边有间距,可以把内容放在 .content-padded 容器中

页面元素

标签页

对话框 Modal

Modal 是从App的主要内容区域上弹出的一小块内容块,是“临时视图”的一部分
多个Modal类组件(包括toast)同时被呼起时,会按先后顺序被缓存在队列中,前一个modal关闭后,下一个modal才会打开
Modals 可以只用JavaScript打开

卡片

popup

通过HTML 可以通过在链接上使用特定的类和data属性打开和关闭所需的popups:

相关文章推荐: