zaixianshouce
- 浏览: 259111 次
-
最新评论
文章列表
Framework7 有一些方法可以让读取和填写表单数据变得非常方便：
Form 转化成 JSON
使用 app 对应的方法可以非常方便把所有的表单元素转化成一个 JSON 对象:
myApp.formToJSON(form) - 把表单转换成JSON对象
form - HTML元素 or 字符串 (CSS选择器)
返回一个JSON对象
<form id="my-form" class
Smart Select 可以自动帮你把原生的select变成一个由 分组单选按钮 构成的动态页面。在很多iOs native应用中你可以看到这种特性。
Smart Select 布局
Smart Select 布局非常简单，只需要在 列表 中插入 <select>，并且给 item-link 加上 "smart-select" class即可。
<div class="list-block">
<ul>
这是一个 列表 拓展，可以用来创建单选和复选按钮组。
复选按钮组
<div class="list-block">
<ul>
<!-- Single chekbox item -->
<li>
<label class
使用表单布局创建响应式的精美的表单布局。表单布局就是 列表，但是会有一些拓展。
简单的表单布局
让我们看一种最简单的表单布局：
<div class="list-block">
<ul>
...
<li>
<div class
可排序列表是列表的扩展，可以对列表进行排序.
让我们来看一下可排序列表元素的布局结构：
<!-- 加在列表区上额外的“sortable”类 -->
<div class="list-block sortable">
<li>
<div class="item-content">
<div
滑动操作列表是列表的扩展，它提供滑动操作的功能，滑动列表元素可以展现隐藏的功能菜单，就像滑动删除一样。
让我们来看一下滑动列表元素的布局结构：
<div class="list-block">
<ul>
<!-- li上额外的“swipeout”类 -->
<li class="swipeout">
多媒体列表是列表（list view）的扩展，它是为了展示更复杂的数据比如产品，服务，用户等等。
当然，它的布局更为复杂：
<!-- 多媒体列表有额外的“media-list”类 -->
<div class="list-block media-list">
<ul>
<li>
<div class="item-content"
常在iOS应用中看到的列表，是种多功能且强大的交互组件。列表将数据展现在一个可滚动的多行的列表中，可以将数据划分成不同的片段/组（sections/groups）。
列表有以下用途：
让用户可以浏览结构化的多级数据
展现一个索引列表
在可视化的不同分组中，显示详细信息和控件
展现一个可以选择的列表
列表布局
现在让我们看一下常见的列表布局
列表区（List block）
列表区（List block）是你的列表元素的容器，基本和内容区(Content Block)一样，只不过面向列表元素。
首先, 所有的列表元素都要被包裹在含有“list-block”类的元素中：
...
Framework7支持登陆屏布局，它可以用在页面内部，或者用在弹出框中（嵌入），或者用作单独的遮罩。
登陆屏布局
首先，我们看一下单独的登录屏布局，它和弹出框很像：
<body>
...
<!-- Should be a direct child of BODY -->
<div class="login-screen">
<!-- Default view-page layout -->
Picker Modal is a special overlay type which is similar to Picker/Calendar's overlay. Such modal allows to create custom picker overlays with custom content
Picker Modal HTML Layout
Picker Modal layout is pretty simple, just add it somewhere in the end of the <body>
<body>
...
...
操作表是一个上滑面板，用来向用户展示进行一个任务所需的选项。
你也可以使用它来提示用户，确认潜在的危险操作。
操作表包含一个可选的标题和至少一个按钮，每个按钮都对应一个操作。
注意，不建议在大屏幕（iPad）上使用操作表。在大屏幕上，你应该使用弹出框。
创建并弹出操作表
操作表是动态元素，只能使用Javascript来创建并弹出它。让我们看一下创建操作表相关的App方法：
myApp.actions(groups) - 创建并弹出操作表，其包含指定数量群组的按钮或者myApp.actions(buttons) - 创建并弹出操作表，其包含一个群组，群组包含指定数量的按钮 ...
Popover 组件是用来管理popover里的内容展示。你可以用 popovers 临时显示一些信息. popover 保持可见直到用户点击popover窗口外面或者你明确地移除它。
注意，不推荐在小屏幕(iPhone)上使用 Popover 。 在小屏幕上你应该使用 操作表 来代替。或者使用 操作表转换为Popover。
Popover 布局
首先让我们来看看 Popover 布局, 它非常简单, 只需要添加在 <body>的结尾处:
<body>
...
<div
Popup 是一种可以包含任何Html内容的弹出窗口，从App的主内容区域上弹出。 Popup 和其他所有的遮罩图层一样，是所谓的“临时视图”的一部分。
Popup 布局
Popup 布局相当简单. 你所需要做的就是将 <div class="popup"> 任何需要展示的内容 </div> 放到 body 里正确的位置上:
<body>
...
<div class="popup">
Modal 是从App的主要内容区域上弹出的一小块内容块. Modals经常被用来向用户询问信息，或通知或警告用户。 Modal和其他所有的遮罩图层一样，是所谓的“临时视图”的一部分。
Modals 可以只用JavaScript打开。所以让我们来看看使用modals的相关APP方法
预定义的 Modals
注意，如果你没有指定预定义的modal标题，它讲使用默认的标题("Framework7")，这个可以在App 初始化时，通过传递modalTitle 参数改变。
预定义modals的按钮文本(如 "Ok" 和 " ...
iOS7的好评特性之一是动态导航栏。当页面过渡时，导航栏元素会滑动渐变。
它只对穿透类型的布局有效
它应该在视图初始化时通过传递dynamicNavbar: true参数来启用
动态导航栏布局
动态导航栏和一般的导航栏是一样的，区别只在于，你可以对导航栏的组成部分（左、中、右）加入额外的类，来说明使用哪个过渡特效。
默认情况下（如果没有额外的类），每个导航栏部分都具有"渐变"过渡特效