zaixianshouce
- 浏览: 254865 次
-
最新评论
文章列表
在向应用添加导航栏和工具栏之前，我们需要决定使用哪种布局。
Framework7在这方面很自由，有3种不同类型的导航栏/工具栏布局，它们对应着在页面/视图中的不同位置。
静态布局
静态布局可能是最少使用的布局。在这种情况下，导航栏和工具栏只是可以滚动的页面内容的一部分，每个页面都有它自己的导航栏和工具栏：
<body>
...
<div class="views">
<div
Lazy Load delays loading of images on page while they are outside of viewport until user scrolls to them.
It will make the page load faster, improve scrolling performance and also save traffic.
Note, that lazy images and elements should be inside of scrollable <div class="page-content& ...
Calendar is a touch optimized component that provides an easy way to handle dates.
Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to Popover on tablets (iPad).
Create Calendar Instance
Calendar can be created and initialized only using ...
Picker is a powerful component that allows you to create custom overlay pickers which looks like iOS native picker.
Picker could be used as inline component or as overlay. Overlay Picker will be automatically converted to Popover on tablets (iPad).
Create Picker Instance
Picker can be created ...
Framework7 comes with powerful and most modern touch slider ever - Swiper Slider with super flexible configuration and lot, lot of features.
Swiper Slider HTML Layout
Swiper HTML layout is pretty simple:
<!-- Slider container -->
<div class="swiper-container">
&l ...
手风琴布局Accordion Layout
通常，手风琴布局可以这样实现:
<div class="accordion-list">
<div class="accordion-item">
<div class="accordion-item-toggle">...
标签用于控制不同内容区的切换显示。
Tabs标签布局
我们来看一下标签页的布局
<!-- Tabs容器, 需要带有"tabs"类。必需元素 -->
<div class="tabs">
<!-- 第一个tab, 需要带有"tab"类和唯一的id -->
<!-- 第一个tab默认是激活显示状态，通过添加"active"类实现 -->
<div
图片浏览器是一个像iOS图片浏览器一样用来展示图片的组件。图片可以被缩放或者平移 (可选)。
图片浏览器使用 幻灯片组件来展现图片。
创建一个图片浏览器实例
图片浏览器只需通过javaScript就可以被创建和初始化。我们需要使用App封装好的方法：
myApp.photoBrowser(parameters) - 带参初始化图片浏览器
parameters - object - 图片浏览器参数对象（必选）。
该方法返回图片浏览器实例引用
示例：
var myPhotoBrowser = app.
Framework7 comes with a bunch of ready to use buttons. All you need is to just add appropriate classes to your links or submit/button inputs:
iOS Theme Buttons
Usual Buttons
Just add button class to any link or button input:
<p><a href="#" class="button">Usual B ...
In addition to Preloader Framework7 also comes with fancy animated determinate and infinite/indeterminate progress bars to indicate activity.
By default, Preloader available in two colors: the default is for a light background and another one for dark background. The HTML is pretty easy, just cre ...
消息组件为你的App提供了可视评论和消息系统。
消息组件布局
...
<div class="page">
<div class="page-content messages-content">
<div class=
使用通知组件，你可以让消息看起来像iOS的推送通知一样。
通知组件JavaScript API
要想创建/关闭通知，我们需要调用相关的App方法
myApp.addNotification(parameters) - 通过指定的参数来创建/显示通知
parameters - 包含通知相关的参数的对象。必选。
方法返回一个动态创建的通知体的HTML元素
myApp.closeNotification(notificationElement) - 关闭指定的通知
notificationElement - 通知元素的HTML元素或CSS选择器。必选。
无限滚动用来在页面滚动到接近底部时加载新内容或进行其他操作。
无限滚动HTML结构
你只需在可滚动的容器上添加“infinite-scroll”类，一般是页面滚动区域 - <div class="page-content">:
<div class="page">
<div class="page-content infinite-scroll" data-distance
下拉刷新是一个特别的组件，可以用来初始化页面内容的刷新。
下拉刷新的HTML布局结构
让我们来看一下如何把下拉刷新组件集成到页面中：
<div class="page">
<!-- Page content应该拥有"pull-to-refresh-content"类 -->
<div class="page-content pull-to-refresh-content" data-ptr-distance=
让我们看看如何添加侧栏。我们的APP可能包含两种侧栏,一个在左边,另一个在右边。我们应该在body的开始处添加侧栏的htmlbody:
<body>
<!-- First, we need to add Panel's overlay that will overlays app while panel is opened -->
<div class="panel-overlay"></div>