Access denied | framework7.io used Cloudflare to restrict access
Please enable cookies.
What happened?
The owner of this website (framework7.io) has banned your access based on your browser's signature (3800caba-ua98).Access denied | framework7.io used Cloudflare to restrict access
Please enable cookies.
What happened?
The owner of this website (framework7.io) has banned your access based on your browser's signature (3800cacf-ua98).Framework7中文文档
coding javascript 学习
欢迎开始使用framewor7制作高水平的iOS应用。
在正式开始阅读文档之前，我们十分推荐你从引导开始，从该部分你可以学习到如何下载和配置framework7，并了解framework7的基本布局。
framework7的的学习难度是十分低的，只要你会HTML和CSS，对了解一点点的javascript，你就基本上懂得如何使用framework7去制作iOS应用了。
为了更好地学习framework7，我们推荐你按顺序去阅读本文档。
那我们先从最基本的应用开始。
应用HTML布局
开发应用的第一步，就是按照应用的框架去写index.html，以下是index.html的最基本布局：
&!DOCTYPE html&
&!-- Required meta tags--&
charset="utf-8"
name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"
name="apple-mobile-web-app-capable" content="yes"
name="apple-mobile-web-app-status-bar-style" content="black"
&!-- Your app title --&
&!-- Path to Framework7 Library CSS--&
rel="stylesheet" href="path/to/framework7.min.css"
&!-- Path to your custom app styles--&
rel="stylesheet" href="path/to/my-app.css"
&!-- Status bar overlay for full screen mode (PhoneGap) --&
class="statusbar-overlay"
&!-- Views --&
class="views"
&!-- Your main view, should have "view-main" class --&
class="view view-main"
&!-- Top Navbar--&
class="navbar"
class="navbar-inner"
&!-- We need cool sliding animation on title element, so we have additional "sliding" class --&
class="center sliding"Awesome App
&!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes--&
class="pages navbar-through toolbar-through"
&!-- Page, "data-page" contains page name --&
data-page="index" class="page"
&!-- Scrollable page content --&
class="page-content"
Page content goes here
&!-- Link to another page --&
href="about.html"About app
&!-- Bottom Toolbar--&
class="toolbar"
class="toolbar-inner"
&!-- Toolbar links --&
href="#" class="link"Link 1
href="#" class="link"Link 2
&!-- Path to Framework7 Library JS--&
type="text/javascript" src="path/to/framework7.min.js"
&!-- Path to your app js--&
type="text/javascript" src="path/to/my-app.js"
正如你看到的，布局十分简单，关键是你要在&head&内关联好CSS，和在&body&的尾部配置好JS文件就可以了。
在后面相关的章节中，你可以了解到关于如何去设置statusbar overlay，views，navbar，toolbar，pages，panels和其他组件。
在这个基本的模板的基础上，我们可以需要在my-app.js文件上。
初始化应用
在我们设置好HTML文件的布局，关联好必须的CSS和JS文件后，我们就应该着手开始初始化我们应用的参数配置（我们这里建议你在my-app.js的文件中进行）：
var myApp = new Framework7();
为了方便日后的连接，在上面的代码例子中，我们定义了一个叫myapp的变量去保存framework7的实例。变量没有要求必须命名为myapp，可以命名成你喜欢的名字。
这是十分简单的操作，与此同时，可以通过对framework7的对象传人不同的参数，实现更加个性化的配置，例子如下：
var myApp = new Framework7({
pushState: true,
swipePanel: 'left',
// ... other parameters});
下面的表格列出了相关的参数：
Because Framework7 uses Ajax to load HTML content for pages it is useful to use caching, especially if your content in those pages updates not very often.
cacheDuration
Duration in ms (milliseconds) while app will use cache instead of loading page using another Ajax request. By default it is 10 minutes.
cacheIgnore
Array of URLs (string) that should not be cached by Framework7
Fast clicks library
fastClicks
Fast clicks is a built-in library that removes 300ms delay from links and form elements in mobile browser while you click them. You can disable this built-in library if you want to use other third party fast clicks script.
Navigation
By default (when this parameter is not specified) Framework7 will load all links (&a&) using Ajax. You can change this behavior by passing here CSS selector string for links that should be loaded with Ajax, like "a.ajax" - only all links with "ajax" class
If you develop web app (not PhoneGap or Home Screen web app) it is useful to enable hash navigation (browser url will look like "/#/about.html"). Also user will be able to navigate through app's history by using browser's default back and forward buttons.
animateNavBackIcon
This option (when enabled) gives more native look for dynamic navbar left back-link icon animation. Useful only when you use dynamic navbar with default back-link icon on left side set as "sliding".
preloadPreviousPage
Enable/disable preloading of previous page when you go deep in navigation. Should be enabled for correct work of "swipe back page" feature.
Swipe back
swipeBackPage
Enable/disable ability to swipe back from left edge of screen to get to the previous page.
swipeBackPageThreshold
Value in px. Swipe back action will start if "touch distance" will be more than this value.
swipeBackPageActiveArea
Value in px. Width of invisible left edge of the screen that triggers swipe back action
swipeBackPageBoxShadow
Enable/disable box-shadow animation during swipe back action. You can disable it to improve performance
Sortable Lists
If you don't to use sortable lists you can disable it for potentially better performance.
If you will not use swipeouts you can disable this feature for potentially better performance.
swipeoutNoFollow
Fallback option for potentially better performance on old/slow devices. If you enable it, then swipeout item will not follow your finger during touch, it will be automatically opened/closed on swipe left/right.
Side Panels
swipePanel
Disabled by default. If you want to enable ability to open side panels with swipe you can pass here "left" (for left panel) or "right" (for right panel).
swipePanelActiveArea
Value in px. Width of invisible edge from the screen that triggers swipe panel
swipePanelNoFollow
Fallback option for potentially better performance on old/slow devices. If you enable it, then side panel will not follow your finger during touch, it will be automatically opened/closed on swipe left/right.
swipePanelThreshold
Value in px. Panel will not move with swipe if "touch distance" will be less than this value.
panelsCloseByOutside
Enable/disable ability to close panel by clicking outside of panel (on panel's overlay)
panelsVisibleZIndex
CSS z-index property for panel
modalTitle
'Framework7'
Default title for modals (Alert, Confirm, Prompt)
modalButtonOk
Default text for modal's "OK" button
modalButtonCancel
Default text for modal's "Cancel" button
modalPreloaderTitle
'Loading... '
Default text for preloader modal
modalCloseByOutside
Enable/disable ability to close modal (Alert, Confirm, Prompt) by clicking outside of modal (on modal's overlay)
actionsCloseByOutside
The same as previous but for Action Sheet modal
popupCloseByOutside
The same as previous but for Popup modal
modalTemplate
Look below*
Full HTML template for modals (like alert, confirm and prompt)
modalActionsTemplate
'&div class="actions-modal"&{{buttons}}&/div&'
HTML template for Action Sheet. Could be useful if you want to add some custom elements to Action Sheet layout.
Ajax Callbacks
onAjaxStart
function(xhr)
Callback function that will be executed in the beginning of Ajax request. This function accepts xhr data as an argument.
onAjaxComplete
function(xhr)
Callback function that will be executed after Ajax request. This function accepts xhr data as an argument.
preprocess
function(content, url)
This callback function allows you to modify loaded Ajax content right before it will be injected to DOM. As arguments this function receive "content" and "url" of the loaded page. This option will be very useful if you are going to use some client-side template engine like "Handlebars", "Mustache", etc. After you modify content within this function you should return it: return content
Attention! If you change following class names you will also need to change them in CSS!
Class name for your View element
viewMainClass
'view-main'
Class name for your Main View element
viewsClass
Class name for your Views element
By default Framework7 will be initialized automatically when you call new Framework7(). If you want to prevent this behavior you can disable it with this option and then initialize it manually with myApp.init() when you need it.
*模态对话框模板的参数包含了所有设置模态对话框需要的HTML布局（如提醒，确认和弹出对话框等）,下面例子是模态对话框的HTML布局：
'&div class="modal {{noButtons}}"&' +
'&div class="modal-inner"&' +
'{{if title}}&div class="modal-title"&{{title}}&/div&{{/if title}}' +
'&div class="modal-text"&{{text}}&/div&' +
'{{afterText}}' +
'&/div&' +
'&div class="modal-buttons"&{{buttons}}&/div&' +'&/div&'
在my-app.JS文件中要这样配置代码：
var myApp = new Framework7({
// Default title for modals
modalTitle: 'My App',
// If it is webapp, we can enable hash navigation:
pushState: true,
// Hide and show indicator during ajax requests
onAjaxStart: function (xhr) {
myApp.showIndicator();
onAjaxComplete: function (xhr) {
myApp.hideIndicator();
例子："preprocess" 内容配置
framework7可以兼容你喜爱的客户端框架引擎（如Handlebars或者Mustache），接下来，我们看一下如何混合使用Handlebars作为我们的客户端模板引擎（Handlebars的文件需要在framework7的HTML中关联）
在my-app.js中作如下配置：
var myApp = new Framework7({
preprocess: function (content, url) {
if (url === 'people.html') {
var template = Handlebars.compile(content);
var resultContent = template({
title: 'People',
people: ['John', 'Ivan', 'Mary']
return resultContent;
在people.html页面中作以下配置
class="navbar"
class="navbar-inner"
class="center"{{title}}
class="pages"
data-page="people" class="page"
class="page-content"
{{#each people}}
在配置好my-app.js之后，我们就要在HTML上增加和配置
视图view(&div class="view"&)是在应用上的一个独立的视觉区域，它拥有自己的设置，导航和历史。不同的视图可以有不一样布局的导航条和工具条，界面风格也可以不一样。可以把它看作是应用里面的一个应用。因为视图具有这样的功能特性，所以framework7可以很方便的维护应用的每一个部分。
总视图views(div class="views"&)是各个独立可见视图的容器，它永远保持可见（除了在modals模态对话框和panels其他面板中），所以总视图views是你的应用主体的主要容器，views元素在整个应用中只允许有一个。
下面是关于views的HTML结构：
class="panel panel-left panel-cover"
class="view panel-view" ...
&!-- Views --&
class="views"
&!-- Your main view --&
class="view view-main"
&!-- Navbar--&
&!-- Pages --&
&!-- Toolbar--&
&!-- Another view --&
class="view another-view"
&!-- Navbar--&
&!-- Pages --&
&!-- Toolbar--&
class="popup"
class="view popup-view" ...
如以下的代码所示，应用几乎是有不同的view视图组成的，记住一个重要的规则所有可见的视图view都必须包含在总视图views(div class="views"&)里。在你移动整个应用的视图时，会自动增加一些动画效果（如打开设置面板panel）。
主视图Main View
主视图Main View是需要在class上添加main view的。为什么需要主视图，所有预设的链接都会加载到主视图上（除了在初始视图Initialize View上的链接）。
初始视图Initialize View
我们已经设置了必要的视图，和对我们的应用进行了,现在我们需要在javascript文件上对我们的视图做初始化。
注意：不是每一个视图都必须初始化，那些具有导航作用的视图才需要初始化，其他的视图（如弹出对话框）不必初始化，但我需要在HTML上配置好他们，从而保持正确的导航条，页面和工具条的正确布局。
myApp变量是我们在之前的文档上设置的framework7的初始化实例：
var myApp = new Framework7({
该实例针对应用的不同部分有不同的方法，其中有一个方法是用于初始化视图view的。
myApp.addView(selector, parameters)用于初始化视图的方法：
selector--字符串或者HTML元素类型；如果是字符串，可能是CSS的视图元素选择器。
parameters--对象类型；具有视图参数的对象。
该方法返回的是一个带有视图实例的对象。
视图初始化参数View initialization parameters
Description
dynamicNavbar
Set to true to enable Dynamic Navbar in this View
If enabled then all previous pages in navigation chain will not removed from DOM when you navigate deeper and deeper. It could be useful, for example, if you have some Form from 5 steps (5 pages) and when you are on last 5th page you need access to form that was on 1st page.
string / HTMLElement
CSS Selector of another view or HTMLElement of other view. By defaul all links in initialized (only) view will load pages in this view. You can change this logic on the fly by changing this paremeter. This tell links to load pages in other view.
animatePages
Enable/disable animated transitions between pages for the current View. By default, equal to the same App's parameter. Allows to override global App parameter for current View.
Swipe back
swipeBackPage
By default, equal to the same App's parameter. Allows to override global App parameter for current View
swipeBackPageThreshold
By default, equal to the same App's parameter. Allows to override global App parameter for current View
swipeBackPageActiveArea
By default, equal to the same App's parameter. Allows to override global App parameter for current View
swipeBackPageBoxShadow
By default, equal to the same App's parameter. Allows to override global App parameter for current View
通过查阅以上表格我们可以了解到全部用于初始化我们视图的参数，下面是相关的代码实例：
var myApp = new Framework7({
/* Initialize views */var mainView = myApp.addView('.view-main', {
dynamicNavbar: true})var anotherView = myApp.addView('.another-view');
就是如此简单，在上面的例子中，我们没有对设置面板panel和弹出对话框popup进行初始化，因为他们不用于导航，只是具有保持视觉页面正确左右。如果上述的两种视图具有导航作用，你仍然需要对他进行初始化。
视图方法及属性View Methods & Properties
在上面的例子中我们可以看到我们初始化了视图，并用mainView和anotherView两个变量保存了一个视图实例。视图实例是一个对象，所以它也具有相关的方法和参数对视图进行维护，接下来我们看看mainView的属性和方法。
mainView.params
Returns object with intialized parameters. You can access and rewrite some parameters like mainView.params.linksView = '.another-view'
mainView.history
Returns array with View's history. Each array element contains URL of loaded page
mainView.contentCache
Returns object with cached pages. It is available only if you use dynamically generated content
mainView.url
Returns string with url of currently active (loaded) page
mainView.pagesContainer
Returns HTMLElement link to pages element
mainView.main
Returns true if this view is main view
mainView.loadPage(url)
url - string. URL of page to load
This method will load required page to view. In other word will do the same if you click on some link with this URL
mainView.loadContent(content)
content - string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement].
This method allows to load dynamically generated content as a new usual page.
mainView.goBack(url)
url - string. URL of page to get back. URL will be ignored if there are pages in navigation history.
This method will trigger reverse animation to the previous page. In other word will do the same if you click on "back"
mainView.hideNavbar()
Hide navbar in this View
mainView.showNavbar()
Show navbar in this View
mainView.hideToolbar()
Hide toolbar in this View
mainView.showToolbar()
Show toolbar in this View
mainView.destroy()
Destroy initialized View, detach swipe events, and disable navigation
视图URL的默认设置Default View URL
因为某些原因，你发现了framework7上错误设置了视图的URL（视图的URL用于保存视图的历史记录），或者你想设置跟默认设置不一样的URL，你可以通过视图HTML元素中的data-url属性进行设置，例子如下：
class="view" data-url="index2.html"
使用其他方法获取视图实例Access to View's instance with other ways
有些时候，你需要通过HTML元素去获取视图实例，这是很简单的一件事情，当你初始化视图之后，framework7会自动添加属性链接在&div class="view"&中，所以在任何时候都可以很方便地通过javascript去获取，例子如下：
var viewsElement = $$('.view-main')[0];var viewInstance = viewsElement.f7View;
除此之外，视图的实例都被保存在一个很特别的应用属性--views（这是一个包含所有视图的数组）里，如果你想获取主视图，可以写以下代码：
for (var i = 0; i & myApp.views.length; i ++) {
var view = myApp.views[i];
if (view.main) myApp.alert('I found main View!')}
进入章节。
页面pages跟我们平时认识到的网站页面的概念是一样的。
接下来我们看一下页面的HTML结构：
&!-- Views --&
class="views"
&!-- Your main view --&
class="view view-main"
&!-- Pages --&
class="pages"
class="page" data-page="home"
class="page-content"
... page content goes here ...
&!-- Another view --&
class="view another-view"
&!-- Pages --&
class="pages"
class="page" data-page="home-another"
class="page-content"
... page content goes here ...
总页面pages是在独立视图下各个页面的总容器。它是必须存在，不然的话其他页面都不能被识别。
在主要的布局文件中（如index.html），各个页面应该包含在总页面（&div class=pages&）里面；
总页面应该是视图（&div class=view&）的一个子节点。
可以允许只有一个页面在一个视图里面。
data-page属性
你可能已经注意到了，例子中的每个页面都包含了一个data-page属性，并且有独立的页面名称。这不是必须的，但这是推荐的做法。
因为这个属性值对于控制页面事件page events，并针对具体的已加载的页面做操作是十分有帮助的。
页面内容page content
所有可见的内容（如列表，表单等），应该放在&div class="page-content&里面，而&div class="page-content&应该是&div class="page"&的其中一个子节点。这是为了正确的样式，布局和滚动所需。
页面事件Page Event
现在我们来了解一下页面导航中比较重要的部分，页面事件。通过页面事件，我们可以使用javascript来对特定的已加载页面进行操作：
pageBeforeInit
Page Element&div class="page"&
Event will be triggered when Framework7 just inserts new page to DOM
Page Element&div class="page"&
Event will be triggered after Framework7 initialize required page's components and navbar
pageBeforeAnimation
Page Element&div class="page"&
Event will be triggered when everything initialized and page (and navbar) is ready to be animated
pageAfterAnimation
Page Element&div class="page"&
Event will be triggered after page (and navbar) animation
pageBeforeRemove
Page Element&div class="page"&
Event will be triggered right before Page will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory
下面我们来了解一下如何使用这些事件。有两种方法添加页面控制器：
// Option 1. Using one 'pageInit' handler for all pages (recommended way):$$(document).on('pageInit', function (e) {
// Do something here when page loaded and initialized})// Option 2. Using live 'pageInit' event handlers for each page (not recommended)$$(document).on('pageInit', '.page[data-page="about"]', function (e) {
// Do something here when page with data-page="about" attribute loaded and initialized})
就像你看到的那么简单，但是当我们只有一个控制器怎么来控制哪个页面被首先加载呢，这时我们就需要用到page data了
在页面事件中page data为我们的控制提供了很多方便：
// Option 1. Using one 'pageInit' handler for all pages (recommended way):$$(document).on('pageInit', function (e) {
// Page Data contains all required information about loaded and initialized page
var page = e.detail.page;})
在上面的代码例子中，我们定以了一个叫page的page data变量。这是一个具有以下属性的对象：
Page Data Properties
Contains string value of data-page attribute
Contains string URL of just loaded page
page.query
object with URL query parameters. If your page URL is "about.html?id=10&count=20&color=blue" then page.query will contain:
count: '20',
color: 'blue'
object. View instance that contains this page (if this View was initialized)
page.container
Link to Page HTMLElement
string - direction of where Page comes from. It will be "right" if you load new page, and "left" - if page comes after you click on "Back" button
接着我们继续看一下如何通过一个事件控制器，去控制不同的页面：
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// Code for About page
if (page.name === 'about') {
// We need to get count GET parameter from URL (about.html?count=10)
var count = page.query.count;
// Now we can generate some dummy list
var listHTML = '&ul&';
for (var i = 0; i & count; i++) {
listHTML += '&li&' + i + '&/li&';
listHTML += '&/ul&';
// And insert generated list to page content
$$(page.container).find('.page-content').append(listHTML);
// Code for Services page
if (page.name === 'services') {
myApp.alert('Here comes our services!');
下面我们需要了解如何去和。
到目前为止，我们已经为我们的总视图和总页面建立好了应用架构，接下来我们需要进一步了解怎样去创建新的页面和怎样加载到framework7上面去。
下面这一条规则你必须要记住：
framework7中的默认设置，所有的链接都是通过Ajax去进行加载的，除了两种情况：1.链接中加了external class的（&a href="somepage.html" class="external"&）；2.链接中的href属性没有填入正确的链接地址（当href是空或者是“#”）。
上述的设置可以在初始化应用时通过给ajaxLinks传人参数改变。
所以想在页面中创建链接是十分简单的，如下面的例子，想将about.html文件进行链接，就要使用通常的&a&标签就可以了：
href="about.html"Go to About page
这样当我们点击的时候，framework7就会发出一个ajax请求about.html，传人，插入Dom节点，运行动画过渡。
页面的内部文档结构
得益于framework7十分智能的解析器，我们在插入这些内部页面时不需要写完整的HTML结构（HTML HEAD，BODY,VIEWS,和PAGES等可以省略），下面是about.html文件的内部结构代码：
&-- That is all we have in about.html file --& class="page" data-page="about"
... About page content goes here
整个过程的关键时，当进行ajax加载页面时，framework7解析器会寻找&div class="page"&的元素，以至于我们不需要完整的HTML结构。这不是严格规定，完整的HTML结构也是可以的。
多页面的内部文档结构
下面是一个较为复杂的情况，例如，我们有两个或者更多初始视图带有独立的导航，实例代码如下：
&!-- Views --&
class="views"
&!-- Left view --&
class="view view-main left-view"
&!-- Navbar--&
&!-- Pages --&
href="about.html" About
&!-- Toolbar--&
&!-- Right view --&
class="view right-view"
&!-- Navbar--&
&!-- Pages --&
href="about.html" About
&!-- Toolbar--&
在上面的代码中，你看到了两个视图（左视图和右视图），两个视图都有对about.html的链接，同时，在我们点击不同的视图里的这一链接时，会加载不同的内容。
在这样的情况下，about.html要这样写：
&!-- Left view --& class="view view-main left-view"
class="page" data-page="about-right"
... This page will be loaded when you click about.html link from Left view ...
&!-- Right view --& class="view right-view"
class="page" data-page="about-right"
... This page will be loaded when you click about.html link from Right view ...
关键点是，针对特定视图的页面需要被包含在&div class="view"&里面，并像在主布局里面使用相同的class。这会有助于framework7去识别哪个页面加载到哪个视图上面去。
带有动态导航条的页面文件内部结构
就像你在章节里面看到，动态导航条需要through-type布局，但这种类型的导航条并不会被加载紧页面里，所以我们需要写成这样：
class="navbar"
... Navbar content goes here class="page" data-page="about"
... About page content goes here
关键一点的是，我们要将导航条和他的内容放在页面附近。如果你有多个页面带有不同的导航条，就将他们两者都包含在相应的视图，就像上面的哪个例子那样。
到现在，我们已经了解如何去加载页面了，但是我们怎样可以返回到之前的页面呢。
这也是很简单的，只要在链接上加上**back**class，下面就是about.html的文件结构，它将会返回到主页index.html页面：
class="page" data-page="about"
&-- Just add additional "back" class to link --&
href="index.html" class="back" Go back to home page
下面有两条比较重要的规则在我们在返回链接中添加href值时需要紧记：
1.如果页面中是具有导航历史记录的，那么framework7会忽略“href”中的url值的；
2.只有当没有导航历史记录时，（例如，当你在首页页面中有返回链接时），framework7会加载“href”中的url；
这样的设定是不可以被更改的。
“href”值对于返回不是必须的，但加上之后可以保持这个功能。
使用javascript去加载页面
除了使用&a&标签外，我们还可以使用javascript去进行页面加载。在这种情况下，我们需要用到方法.loadPage(url):
// Initialize App
var myApp = new Framework7();// Initialize View
var mainView = myApp.addView('.view-main')
// Load page from about.html file to main View:mainView.loadPage('about.html');
这种办法只有在视图被初始化才能使用。
使用javascript进行返回
你同样可以使用方法.goBack(url)进行返回：
// Initialize App
var myApp = new Framework7();// Initialize View
var mainView = myApp.addView('.view-main')
// Go back on main ViewmainView.goBack();
同样，视图必须被初始化。
你可以看到，在framework7中进行链接和导航是十分简单，以下4点是要记住的：
你可以使用&a&标签和href属性去链接相应的页面文件；
使用ajax进行加载时，不需要完整的HTML结构文件。只需要加上&div class="page"&,如果需要动态导航的话就使用&div class="navbar"&；
如果需要在多个页面加载同一个文件的时候，用相应的&div class="view"&class进行包裹；
使用**back**class(&a href="index.html" class="back"&使得相应的返回链接生效。
接下来我们将学习。
在framework7中联接不同视图Linking between views in Framework7
现在我们来学习一点比较复杂的情况
我们有两个已经初始化的视图（左视图和右视图）都具有分开的导航，在这样的情况下，左视图上的链接都会被加载到左视图上，右视图的也是这样。
但是我们现在需要将左视图上的链接加载到右视图上面，这就是我们需要学习的联接不同视图（lingking between views）。我们已经知道怎样通过javascript去实现，使用.loadPage和.goBack这两个视图方法。
在framework7的框架下，我们可以不必使用到javascript，我们只需要在HTML上添加data-view属性到链接上就可以达到上述目标。'data-view'必须包含特定页面的CSS选择器：
&!-- Views --&
class="views"
&!-- Left view --&
class="view view-main left-view"
&!-- Pages --&
&!-- These links will load pages to this Left view --&
href="about.html" About
href="services.html" Services
&!-- This link will load pages to Right view --&
href="products.html" data-view=".right-view" Products
&!-- Right view --&
class="view right-view"
&!-- Pages --&
&!-- These links will load pages to this Right view --&
href="products.html" Products
href="contacts.html" Contacts
&!-- This link will load pages to Left view --&
href="about.html" data-view=".left-view" About
href="services.html" data-view=".left-view" Services
&!-- This link will trigger Go Back in Left view --&
href="#" class="back" data-view=".left-view" About
这是十分简单的，只要通过CSS选择器添加了data-view属性就可以了。
我们通过这个例子去了解如何通过左视图的底部链接去控制主视图（）
到现在为止，我们已经了解了全部关于应用主结构，联接或加载页面的全部知识，下面就是要填充其他部件了。让我们从最重要的部件开始--。
在给我们的应用添加导航条和工具条之前，要先确定导航条和工具条的布局类型。
framework7框架允许我们可以很灵活地使用导航条和工具条，根据他们放置在视图/页面的不同位置，可以分为以下三类。
静态布局"Static" Layout
静态布局是最少使用地一种布局方式，在这种类型的布局中，导航条和工具条只是滚动页面内容里的其中一个组成部分，每个页面都有各自的导航条和工具条：
class="views"
class="view view-main"
class="pages"
data-page="index" class="page"
class="page-content"
&!-- Top Navbar--&
class="navbar"
class="navbar-inner"
class="center"Awesome App
&!-- /End of Top Navbar--&
Other content goes here
&!-- Bottom Toolbar--&
class="toolbar"
class="toolbar-inner"
&!-- /End of Bottom Toolbar--&
固定布局"Fixed" Layout
在固定布局里，各个页面都有他们自己导航条和工具条，但是他们总是在屏幕中是可见的，他们不会随着页面滚动而滚动：
class="views"
class="view view-main"
class="pages"
&!-- Now we need additional "navbar-fixed" and "toolbar-fixed" classes on Page --&
data-page="index" class="page navbar-fixed toolbar-fixed"
&!-- Top Navbar--&
class="navbar"
class="navbar-inner"
class="center"Awesome App
&!-- /End of Top Navbar--&
class="page-content"
Other content goes here
&!-- Bottom Toolbar--&
class="toolbar"
class="toolbar-inner"
&!-- /End of Bottom Toolbar--&
固定布局和静态布局之间的差异如下：
固定布局的导航条和工具条是Page(&div class="page"&)的节点
每个页面都有额外的"navbar-fixed"class(用于固定导航条)和"toolbar-fixed"class（用于固定工具条）
注意：如果你想在一个单一视图中的每个页面都使用固定的布局，你只要在pages(&div class="pages"&)这一父节点中使用"navbar-fixed"class和"toolbar-fixed"class，就可以了。
全局布局"Through" Layout
这一种布局是最有趣和用得最多的一种布局，在单一页面中，导航条和工具都是固定在总视图的同一位置。在这种布局中，你要设置为动态导航条Dynamic Naybar，（但要在中设置）：
class="views"
class="view view-main"
&!-- Top Navbar--&
class="navbar"
class="navbar-inner"
class="center"Awesome App
&!-- /End of Top Navbar--&
&!-- Now we need additional "navbar-through" and "toolbar-through" classes on Pages --&
class="pages navbar-through toolbar-through"
data-page="index" class="page"
class="page-content"
Other content goes here
&!-- Bottom Toolbar--&
class="toolbar"
class="toolbar-inner"
&!-- /End of Bottom Toolbar--&
全局布局与静态布局、固定布局的差异在于
导航条和工具条是view的子节点(&div class="view"&)
带有全局导航条和工具条的页面，在pages(&div class="pages"&)上有"navbar-through"class（用于全局化导航条）和"toolbar-through"class（用于全局化工具条）
混合布局Mixed Layout
针对不同的视图，使用不同的导航条和工具条布局，如：在单一视图中可以使用固定布局或全局布局。不过你也可以在单一视图里混合使用这些布局。例如：你可以设置成全局导航条和固定工具条：
class="views"
class="view view-main"
&!-- Top Navbar--&
class="navbar"
class="navbar-inner"
class="center"Awesome App
&!-- /End of Top Navbar--&
&!-- Now we need additional "navbar-through" and "toolbar-fixed" classes on Pages --&
class="pages navbar-through fixed-through"
data-page="index" class="page"
class="page-content"
Other content goes here
&!-- Bottom Toolbar--&
class="toolbar"
class="toolbar-inner"
&!-- /End of Bottom Toolbar--&
### 不带导航条/工具条No Navbar/Toolbar
当然在你的应用中可以完全不使用导航条或工具条，甚至两者都不用，只要在page/pages/view上不添加相应的class就可以了（如"navbar-fixed", "navbar-through", "toolbar-fixed", "toolbar-through"）。
### 备忘录Cheat sheet
就如你所见，这些布局都是很容易理解和使用的，他们的不同在相应的父节点和嵌套结构使用不同的class。下面是他们的html结构的备忘录：
静态Static
.page-content
// other page content
.pages.navbar-fixed.navbar-through
.page-content
全局Through
.pages.navbar-through.toolbar-through
.page-content
导航条是包含了页面的题目和导航元素固定（固定布局和全局中）屏幕最上方。
导航条可以分为左、中、右三个部分，每个部分都可以嵌套进任何的Html元素，不过我们建议按照以下的方式使用：
左部是留用于返回链接，图标和单词链接
中间部分用于显示页面标题或者标签链接（tab link）如按钮行或相应的控制器
右部的使用与左部类似
导航条的布局是相当简单的：
class="navbar"
class="navbar-inner"
class="left"Left
class="center"Center
class="right"Right
要注意的是导航条的中间部分，在宽度设置上的权重是最低的，这意味着当窗口调整大小所造成的三个部分在导航条放不下的话，中间部分会被剪裁掉
所以如果你在中间部分使用了过多的文字，当文字被裁减，文字结尾部分会显示成省略号。所以当你在那个部分使用自定义元素时需要十分注意。
如果导航条左部和右部是链接的话，你只需要使用带有linkclass的&a&标签就可以了：
class="navbar"
class="navbar-inner"
class="left"Left
class="center"Center
class="right"Right
使用linkclass不是必须的，但我们推荐这样使用，因为这可以附加上相应的链接样式和透明效果。
多链接的导航条Multiple links
没什么额外的知识，只要在相应的部分多加&a class="link"：
class="navbar"
class="navbar-inner"
class="left"
href="#" class="link"Left 1
href="#" class="link"Left 2
class="center"Center
class="right"
href="#" class="link"Right 1
图标文字型的链接导航条Links with icons + text
这样的导航条与之前的有一些不同，在这种情况下，我们需要将文字嵌套在&span&标签里，因为在动画时需要给图标和文字留出足够的空位：
class="navbar"
class="navbar-inner"
class="left"
href="#" class="link"
class="icon icon-back-blue"
class="center"Center
class="right"
href="#" class="link"
class="icon icon-bars-blue"
只带图标的链接Links with icons only
如果你的链接只需要图标和不需要文字，我们需要添加额外的"icon-only"class到链接上，在这个class的作用下，图标的大小会呈现成44*44px，这可以避免用户忽略了图标：
class="navbar"
class="navbar-inner"
class="left"
href="#" class="link icon-only"
class="icon icon-back-blue"
class="center"Center
class="right"
href="#" class="link icon-only"
class="icon icon-bars-blue"
相关的视图对象方法Related View methods
我们可以使用以下与导航条相关的视图方法去初始化我们的应用：
view.hideNavbar()
Hide navbar in this View
view.showNavbar()
Show navbar in this View
以下是相关的代码示例：
var myApp = new Framework7();var $ = Framework7.$;var mainView = myApp.addView('.view-main');$('.hide-navbar').on('click', function () {
mainView.hideNavbar();});$('.show-navbar').on('click', function () {
mainView.showNavbar();});
当使用Ajax加载某些不需要导航条页面的时候，Framework7框架可以允许你自动隐藏导航条。当你使用全局布局的时候这是十分有用的。
要使用这种效果的时候，需要给已经加载好的页面添加"no-navbar"class，和使用不带内容的导航条：
&!-- Empty Navbar --& class="navbar"
class="navbar-inner"
&!-- Page has additional "no-navbar" class --& data-page="about" class="page no-navbar"
class="page-content"
class="content-block"
href="#" class="back button"Go Back
与导航条相关的应用方法Related App methods
myApp.sizeNavbars(viewContainer)
viewContainer - CSS Selector string or HTMLEelement. URL of page to load
Call this method to recalculate positional styles for Navbar in selected View. For example: myApp.sizeNavbars('.view-main')
It could be useful after you change some of Navbar elements dynamically.
iOS7其中一个精彩的特性就是动态导航条。当离开页面的时候导航条会跟随滑动并淡出，当返回页面的时候导航条会重新出现。
动态导航条只能在导航条是全局布局时有效。
动态导航条需要在页面时转入dynamicNavbar: true参数。
动态导航条的布局跟平常的导航条一样，唯一不同点时，可以添加额外的class在相应的导航条部分（左部、中部或者右部），以此来在相应部分添加上相应的过渡效果。
当不添加任何class时，导航条预设有淡出效果。
如果你添加slidingclass，导航条会有滑动效果。
为了统一用户体验，在导航条的相同部分应该固定一种过渡效果
预设（淡化）过渡
&!-- Navbar on index page --& class="navbar"
class="navbar-inner"
class="left"
href="#" class="link"Home Left
class="center"Home
class="right"
href="#" class="link"Home Right
&!-- Navbar on about page --& class="navbar"
class="navbar-inner"
class="left"
href="#" class="link"About Left
class="center"About
class="right"
href="#" class="link"About Right
滑动过渡Sliding transition
滑动效果应该使用得更加谨慎，因为他反映出了页面间的链接路径。
&!-- Navbar on index page --& class="navbar"
class="navbar-inner"
&!-- Left part doesn't related to other pages, let's fade it out --&
class="left"
href="#" class="link"Home Left
&!-- Center and Right parts reflect page title and page links, let's slide them --&
class="center sliding"Home
class="right sliding"
href="about.html" class="link"About
&!-- Navbar on about page --& class="navbar"
class="navbar-inner"
&!-- Now, Left and Center parts reflect page title and page links, let's slide them --&
class="left sliding"
href="#" class="link back"Home
class="center sliding"About
&!-- Right part doesn't related to other pages --&
class="right"
href="#" class="link icon-only"
class="icon icon-bars-blue"
返回链接图标动态化Animate back-link icon
如果你使用预设的返回链接图标（图标+单词“Back”），你可以在上面添加额外的动画，使得与iOS7更像。要达到这种效果要在时，传入animateNavBackIcon: true参数，在导航条的左部使用backclass,在布局上没有其他区别。
工具条Toolbar
toolbar是固定在页面底部（使用固定和全局布局）作为导航元素的部分，工具条内部没有分部分，只是一个个平面排列的链接。
工具条布局Toolbar layout
工具条布局是十分简单的，如下面的示例代码：
class="toolbar"
class="toolbar-inner"
href="#" class="link"Link 1
href="#" class="link"Link 2
href="#" class="link"Link 3
在默认设置中，包含在工具条里的链接没有区分层级，每个链接的间距都是一样的。
相关的视图方法Related View methods
如果你已经，可以使用以下的方法对工具条进行控制；
view.hideToolbar()
Hide toolbar in this View
view.showToolbar()
Show toolbar in this View
以下是相关的示例代码：
var myApp = new Framework7();var $ = Framework7.$;var mainView = myApp.addView('.view-main');$('.hide-toolbar').on('click', function () {
mainView.hideToolbar();});$('.show-toolbar').on('click', function () {
mainView.showToolbar();});
自动隐藏工具条Hide Toolbar automatically
当你使用全局布局时，Framework7可以让你在通过ajax加载时自动隐藏或显示工具条。
要进行这样的设置，你只需在加载的页面上添加"no-toolbar"class（&div class="page no-toolbar"&），并且不在视图里设置工具条，示例代码如下：
!-- Page has additional "no-toolbar" class --&&div data-page="about" class="page no-toolbar"&
&div class="page-content"&
&div class="content-block"&
&p&&a href="#" class="back button"&Go Back&/a&&/p&
&/div&&/div&
标签条Tab bar
标签条是工具条的一个特殊类型，它包含了图标（有时图标带有标签），而不只是单纯的链接，并使用在类型上。
标签条布局Tab bar layout
标签条布局基本与工具条布局一致，但带有额外的"tabbar"class:
class="toolbar tabbar"
class="toolbar-inner"
href="#tab1" class="tab-link active"
class="icon demo-icon-1"
href="#tab2" class="tab-link"
class="icon demo-icon-2"
href="#tab3" class="tab-link"
class="icon demo-icon-3"
href="#tab4" class="tab-link"
class="icon demo-icon-4"
在默认的设置中，所有的标签条里的内容都是同级的，并且相互间的间距都是一样。但是有以下两点关于链接大小需要注意的事项：
在iPhone上，所有链接的间距都相等，等于[screen width] / [number of links]；
在iPad上，所有链接居中分布，并且最小间距为105px；
在图标上添加提示标签Add badges to icons
如果你需要在标签图标上添加提示标签，就要在&span&元素里嵌套&span class="badge"&，示例代码如下：
class="toolbar tabbar"
class="toolbar-inner"
href="#tab1" class="tab-link active"
class="icon demo-icon-1"
href="#tab2" class="tab-link"
class="icon demo-icon-2"
class="badge badge-red"5
href="#tab3" class="tab-link"
class="icon demo-icon-3"
href="#tab4" class="tab-link"
class="icon demo-icon-4"
class="badge badge-green"15
带有名称的标签条Tab bar with labels
如果需要再加上文字提示需要再添加"tabbar-labels"class,并且需要再链接里嵌套&span class="tabbar-label"&:
class="toolbar tabbar tabbar-labels"
class="toolbar-inner"
href="#tab1" class="tab-link active"
class="icon demo-icon-1"
class="tabbar-label"Label 1
href="#tab2" class="tab-link"
class="icon demo-icon-2"
class="badge badge-red"5
class="tabbar-label"Label 2
href="#tab3" class="tab-link"
class="icon demo-icon-3"
class="tabbar-label"Label 3
href="#tab4" class="tab-link"
class="icon demo-icon-4"
class="tabbar-label"Label 4
注意：如果在标签上加了文字后，标签条的高度会变成55px，而不是原来的44px。
搜索条应该放置在视图（".page"）和视图内容之间（".page-content"）：
class="page"
&!-- Search bar --&
class="searchbar" data-search-list=".list-block-search" data-search-in=".item-title"
class="searchbar-input"
type="search" placeholder="Search"
href="#" class="searchbar-clear"
href="#" class="searchbar-cancel"Cancel
&!-- Search bar overlay--&
class="searchbar-overlay"
&!-- Page content --&
class="page-content"
class="content-block searchbar-not-found"
Nothing found
class="list-block list-block-search searchbar-found"
... list view items ...
相关的class和标签使用如下：
-form class="searchbar" - 意味着这是一个搜索条容器，它不一定要在form元素里使用，但这是推荐的做法；
--div class="searchbar-input" - 搜索区和取消按钮的容器；
---input type="search" - 搜索区；
---a class="searchbar-clear" - 清除输入值或者重置搜索结果按钮，可选项；
--a class="searchbar-cancel" - 搜索条取消按钮，不激活搜索条，重置搜索结果，清除输入内容，可选项；
-data-search-list - 包含搜索列表区的CSS选择符属性，可选项，如果不设置，搜索条会搜索不了结果；
-data-search-in - 包含搜索区域的CSS选择符属性，通常用于搜索元素的标题，可选项，如果不设置，搜索条会搜索不了结果；
-div class="searchbar-overlay" - 在搜索条下面添加这个标签，当搜索条被激活时，页面被覆盖黑色蒙版，可选项；
-"searchbar-found" - 当搜索条根据搜索条件找到相关元素后，在元素上添加该class，可以显示；预设是可见的，可选项；
-"searchbar-not-found" - 当搜索条根据搜索条件找不到相关元素后，在元素上添加该class，可以显示；预设是不可见的，可选项；
data-page="home" class="page"
&!-- Search bar --&
data-search-list=".list-block-search" data-search-in=".item-title" class="searchbar"
class="searchbar-input"
type="search" placeholder="Search" href="#" class="searchbar-clear"
href="#" class="searchbar-cancel"Cancel
&!-- Search bar overlay --&
class="searchbar-overlay"
class="page-content"
&!-- This block will be displayed if nothing found --&
class="content-block searchbar-not-found"
class="content-block-inner"Nothing found
&!-- This block will be displayed if anything found, and this list block is used a searbar target --&
class="list-block list-block-search searchbar-found"
class="item-content"
class="item-inner"
class="item-title"Acura
class="item-content"
class="item-inner"
class="item-title"Audi
List View specified in "data-search-list"&div class="list-block"&
Event will be triggered during search (search field change). Event detail contains search query (e.detail.query) and array of found HTML elements (e.detail.foundItems)
clearSearch
List View specified in "data-search-list"&div class="list-block"&
Event will be triggered when user clicks on Search Bar's "clear" element (a href="#" class="searchbar-clear")
enableSearch
List View specified in "data-search-list"&div class="list-block"&
Event will be triggered when Search Bar becomes active
disableSearch
List View specified in "data-search-list"&div class="list-block"&
Event will be triggered when Search Bar becomes inactive - when user clicks on "Cancel" button (a href="searchbar-cancel") or on "searchbar-overlay" element
相关方法Related App Methods
myApp.destroySearchbar(searchbarContainer) - detach all search bar events and actions
searchbarContainer - HTMLElement or string (with CSS selector)-search bar element （&form class="searchbar"&）
myApp.initSearchbar(pageContainer) - attach all search bar events and actions again after you destroy them
pageContainer - HTMLElement or string (with CSS selector) - page with search bar (&div class="page"&)
状态条覆盖Status bar overlay
iOS7可以让你制作全屏应用，但这又要可能会覆盖掉状态条。
不好的示例：
Framework7可以自动帮你这个问题。它会自动检测你的应用是否全屏应用，如果处于全屏状态，会自动添加"with-statusbar-overlay"class到&html&（当不处于全屏状态时，会移除这个class）。"with-statusbar-overlay"class（当应用是全屏模式时），会在应用头部添加20px的内边距。
如果我们想控制状态条的颜色时，我们要在&body&中添加&div class="statusbar-overlay"&，示例代码如下：
&div class="statusbar-overlay"&&/div&
这个"statusbar-overlay"的div标签会固定在屏幕的顶端，默认设置是隐藏的，只有当应用是全屏模式和&html&带有"with-statusbar-overlay"class时，才是可见的。
我们可以通过css使得状态条变成粉色：
.statusbar-overlay {
background: pink;}
通过这样的逻辑，我们可以十分方便地去控制状态条的背景，还可以动态调节它的背景。例如，当我们设置了深色带覆盖效果的左部panel，当panel打开时我们可以让状态条变成黑色：
/* Default Status bar background */.statusbar-overlay {
background: pink;
/* We can add transition for smooth color animation */
-webkit-transition: 400ms;
transition: 400ms;}/* Change Status bar background when panel opened */body.with-panel-left-cover .statusbar-overlay {
background: #222;}
注意：1.当应用是主屏幕应用时，它的颜色通常是白色的，所以无需调整；2.在phonegap中它的默认颜色是黑色，并且需要使用插件如去修改。
在这章，我们看一下如何添加侧边栏。我们最多可以添加最多两个侧边栏，一个在左边，一个在右边。我们要在body部分一开始就添加侧边栏的html布局:
&!-- First, we need to add Panel's overlay that will overlays app while panel is opened --&
class="panel-overlay"
&!-- Left panel --&
class="panel panel-left"
... panel content goes here ...
&!-- Right panel --&
class="panel panel-right"
... panel content goes here ...
在添加了相关的html标签后，我们要选择侧边栏的打开特效，总共有两个特效可以选择：“Reveal”（侧边栏将整个应用的内容移出），“cover”（侧边栏覆盖在应用内容上）。如果你使用“Reveal”效果，需要添加额外的panel-revealclass到侧边栏上，如果使用“Cover”效果则添加panel-cover：
&!-- First, we need to add Panel's overlay that will overlays app while panel is opened --&
class="panel-overlay"
&!-- Left panel, let it be with reveal effect --&
class="panel panel-left panel-reveal"
... panel content goes here ...
&!-- Right panel, with cover effect --&
class="panel panel-right panel-cover"
... panel content goes here ...
打开或关闭侧边栏Open and Close Panels
HTML上操作
当我们在应用上设置了侧边栏之后，我们需要知道如何打开和关闭。
当我们要打开侧边栏，我们需要添加open-panelclass到任何的html元素（推荐是添加到链接上）；
当我们要关闭侧边栏，我们需要添加close-panelclass到任何的html元素（推荐是添加到链接上）；
如果你设置了两个侧边栏，默认是打开和关闭左边的侧边栏；
当你想控制打/关闭的是哪个侧边栏，可以在控制打开和关闭的元素上添加data-panel="left"属性；
根据上面的规范，相关的示例代码如下：
&!-- Panels Overlay --&
class="panel-overlay"
&!-- Left Panel with Reveal effect --&
class="panel panel-left panel-reveal"
class="content-block"
Left Panel content here
&!-- Click on link with "close-panel" class will close panel --&
href="#" class="close-panel"Close me
&!-- Click on link with "open-panel" and data-panel="right" attribute will open Right panel --&
href="#" data-panel="right" class="open-panel"Open Right Panel
&!-- Right Panel with Cover effect --&
class="panel panel-right panel-cover"
class="content-block"
Right Panel content here
&!-- Click on link with "close-panel" class will close panel --&
href="#" class="close-panel"Close me
&!-- Click on link with "open-panel" and data-panel="left" attribute will open Left panel --&
href="#" data-panel="left" class="open-panel"Open Left Panel
class="page-content"
class="content-block"
&!-- If no data-panel attribute, Left panel will be opened by default --&
href="#" class="open-panel"Open Left Panel
&!-- Click on link with "open-panel" and data-panel="right" attribute will open Right panel --&
href="#" data-panel="right" class="open-panel"Open Right Panel
使用javascript控制
我们也可以使用javascript通过相关的应用方法进行控制。
myApp.openPanel(position) - open Panel.
- position - string - Position of panel to open: "left" or "right". Required.
myApp.closePanel() - close currently opened Panel.
示例代码如下：
class="panel-overlay"
class="panel panel-left panel-reveal"
class="content-block"
Left Panel content here
href="#" class="panel-close"Close me
href="#" class="open-right-panel"Open Right Panel
class="panel panel-right panel-cover"
class="content-block"
Right Panel content here
href="#" class="panel-close"Close me
href="#" class="open-left-panel"Open Left Panel
class="page-content"
class="content-block"
href="#" class="open-left-panel"Open Left Panel
href="#" class="open-right-panel"Open Right Panel
var myApp = new Framework7();
var $$ = Framework7.$;
$$('.open-left-panel').on('click', function (e) {
// 'left' position to open Left panel
myApp.openPanel('left');
$$('.open-right-panel').on('click', function (e) {
// 'right' position to open Right panel
myApp.openPanel('right');
$$('.panel-close').on('click', function (e) {
myApp.closePanel();
侧边栏事件Panel Events
侧边栏事件可以十分有效地用于检测用户是如何跟你的侧边栏进行交互的，或者在侧边栏处于打开或关闭时使用javascript进行控制。
Panel Element&div class="panel"&
Event will be triggered when Panel starts its opening animation
Panel Element&div class="panel"&
Event will be triggered after Panel completes its opening animation
Panel Element&div class="panel"&
Event will be triggered when Panel starts its closing animation
Panel Element&div class="panel"&
Event will be triggered after Panel completes its closing animation
下面是示例代码：
var myApp = new Framework7();var $$ = Framework7.$;$$('.panel-left').on('opened', function () {
myApp.alert('Left panel opened!');});$$('.panel-left').on('close', function () {
myApp.alert('Left panel is closing!');});$$('.panel-right').on('open', function () {
myApp.alert('Right panel is opening!');});$$('.panel-right').on('closed', function () {
myApp.alert('Right panel closed!');});
滑动打开侧边栏
framework7可以让你使用滑动的手势打开侧边栏，限制：只有一个侧边栏可以使用滑动打开（左边或者右边）。
要使用这个特性，我们要在的时候传入参数：
var myApp = new Framework7({
swipePanel: 'left'});
监测侧边栏是否打开Panel is Opened?
有时候监测侧边栏是否已经打开是很有用的。这是很简单的一件事情，当侧边栏处于打开状态，&body&会根据以下的规则生成并添加class：with-panel-[position]-[effect]:
如果你是打开了具有“Cover”特效的左边栏，body会添加"with-panel-left-cover" class（&body class="with-panel-left-cover"&）;
如果你是打开了具有“Reveal”特效的左边栏，body会添加"with-panel-left-revela" class（&body class="with-panel-left-reveal"&）;
如果你是打开了具有“Cover”特效的右边栏，body会添加"with-panel-right-cover" class（&body class="with-panel-right-cover"&）;
如果你是打开了具有“Reveal”特效的右边栏，body会添加"with-panel-right-reveal" class（&body class="with-panel-right-cover"&）;
你可以使用javascript去监测相关特性：
if ($$('body').hasClass('with-panel-left-cover')) {
console.log('Left Panel is opened')}
或者在css上添加额外的样式：
/* Change Status Bar background when panel is opened */
body.with-panel-left-cover .statusbar-overlay{
background-color: #333;}
内容块Content block
内容块是设计（主要）用于添加额外格式和空隔的文本
...&div class="page-content"&
&p&This paragraph is outside of content block. Not cool, but useful for any custom elements with custom styling.&/p&
&!-- Content block --&
&div class="content-block"&
&p&Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. &/p&
&!-- We can wrap content with additional "content-block-inner" element for additional highlighting --&
&div class="content-block"&
&div class="content-block-inner"&Here comes another text block additionaly wrapped with "content-block-inner". Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales. Integer blandit varius nisi quis consectetur. &/div&
&!-- Add ".content-block-title" to add block's title --&
&div class="content-block-title"&Content block title&/div&
&div class="content-block"&
&p&Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. &/p&
&div class="content-block-title"&Another ultra long content block title&/div&
&div class="content-block"&
&div class="content-block-inner"&
&p&Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. &/p&
&/div&&/div&...
注意："content-block-title"只能在"content-block"或"list-block"之前使用。
布局网格Layout Grid
framew7使用柔性布局，使得你可以按照你需要放置你的内容：
&!-- Each "cells" row should be wrapped with div class="row" --& class="row"
&!-- Each "cell" has col-[widht in percents] class --&
class="col-50"50%
class="col-50"50%
class="row"
&!-- Each "cell" has col-[widht in percents] class --&
class="col-33"33%
class="col-33"33%
class="col-33"33%
默认设置的每个“表格”都有15px的间隔，如果你不想带有间隔可以添加使用no-gutterclass到rowclass那：
&!-- Additional "no-gutter" class on row to remove space between cells --& class="row no-gutter"
&!-- Each "cell" has col-[widht in percents] class --&
class="col-50"50%
class="col-50"50%
class="row"
&!-- Each "cell" has col-[widht in percents] class --&
class="col-33"33%
class="col-33"33%
class="col-33"33%
下面的表格列出了所有网格可用的参数：
默认设置中的网格是没有样式，我们可以如此添加样式：
div[class*="col-"] {
background: #
text-align: center;
color: #000;
border: 1px solid #
padding: 5px;}.row {
margin-bottom: 15px;}
观看具体效果.
模态对话框Modal
模态对话框是一个小型的内容窗口，在它弹出的是时候会覆盖住应用页面的主要内容。模态对话框通常用于从用户上取得信息，或者通知警告用户。模态对话框跟其他覆盖窗口都被称为临时窗口。
模态对话框只能使用javascript打开，下面我们就来看一下相关的应用方法。
预定义的模态对话框Predefined Modals
如果你没有对预定义的模态对话框的题目进行修改，它会使用预定义的题目("Framework7")，要自定义题目可以在的时候传入modalTitle参数。
模态对话框的按钮文字（如“ok”和“cancel”）同样是可以修改的，在的时候传入modalButtonOk和modalButtonCancel参数。
首先，让我们了解一下在framework7里最经常使用的预测模态对话框：
提醒对话框Alert
打开一个提醒模态对话框，我们需要使用一下其中之一的应用方法
myApp.alert(text, [title, callbackOk])
myApp.alert(text, [callbackOk])
- text - 字符串. 提醒的语句。
- title - 字符串. 可选参数. 提醒对话框的题目。
- callbackOk - 函数. 可选参数. 当用户点击了对话框上的“ok”
按钮后，回调函数会被触发。
以上方法会返回一个动态创建的模态对话框的html标签。示例如下：
class="page-content"
class="content-block"
href="#" class="alert-text"Alert With Text
href="#" class="alert-text-title"Alert With Text and Title
href="#" class="alert-text-title-callback"Alert With Text and Title and Callback
href="#" class="alert-text-callback"Alert With Text and Callback
var myApp = new Framework7();var $$ = Framework7.$;$$('.alert-text').on('click', function () {
myApp.alert('Here goes alert text');});$$('.alert-text-title').on('click', function () {
myApp.alert('Here goes alert text', 'Custom Title!');});$$('.alert-text-title-callback').on('click', function () {
myApp.alert('Here goes alert text', 'Custom Title!', function () {
myApp.alert('Button clicked!')
});});$$('.alert-text-callback').on('click', function () {
myApp.alert('Here goes alert text', function () {
myApp.alert('Button clicked!')
确认模态对话框Confirm
确认模态对话框用于跟用户确认某些行为。打开确认模态对话框我们需要使用以下相应的应用方法：
myApp.confirm(text, [title, callbackOk, callbackCancel])
myApp.confirm(text, [callbackOk, callbackCancel])
- text - 字符串. 确认文本
- title - 字符串. 可选项. 确认模态对话框题目
- callbackOk - 函数. 可选项. 当用户点击了对话框上的“ok”
按钮后，回调函数会被触发。
- callbackCancel - 函数. 可选项.当用户点击了对话框上的“cancel”按钮后（即用户取消相应的行为时），回调函数会被触发。
以上方法会返回一个动态创建的模态对话框的html标签。示例如下：
class="page-content"
class="content-block"
href="#" class="confirm-ok"Confirm with text and Ok callback
href="#" class="confirm-ok-cancel"Confirm with text, Ok and Cancel callbacks
href="#" class="confirm-title-ok"Confirm with text, title and Ok callback
href="#" class="confirm-title-ok-cancel"Confirm with text, title, Ok and Cancel callback
$$('.confirm-ok').on('click', function () {
myApp.confirm('Are you sure?', function () {
myApp.alert('You clicked Ok button');
});});$$('.confirm-ok-cancel').on('click', function () {
myApp.confirm('Are you sure?',
function () {
myApp.alert('You clicked Ok button');
function () {
myApp.alert('You clicked Cancel button');
);});$$('.confirm-title-ok').on('click', function () {
myApp.confirm('Are you sure?', 'Custom Title', function () {
myApp.alert('You clicked Ok button');
});});$$('.confirm-title-ok-cancel').on('click', function () {
myApp.confirm('Are you sure?', 'Custom Title',
function () {
myApp.alert('You clicked Ok button');
function () {
myApp.alert('You clicked Cancel button');
对话模态对话框Prompt
对话模态对话框用于跟用户获取数据。打开该对话框可以使用以下应用方法：
myApp.prompt(text, [title, callbackOk, callbackCancel])
myApp.prompt(text, [callbackOk, callbackCancel])
- text - 字符串. 提出问题的文本.
- title - 字符串. 可选项. 对话框的题目.
- callbackOk - 函数. 可选项. 当用户点击“ok”按钮时，函数会被触发，并从对话框上取得函数参数.
- callbackCancel - 函数. 可选项. 当用户点击“cancel”按钮时，函数会被触发，并从对话框上取得函数参数.
以上方法会返回一个动态创建的模态对话框的html标签。示例如下：
class="page-content"
class="content-block"
href="#" class="prompt-ok"Prompt with text and Ok callback
href="#" class="prompt-ok-cancel"Prompt with text, Ok and Cancel callbacks
href="#" class="prompt-title-ok"Prompt with text, title and Ok callback
href="#" class="prompt-title-ok-cancel"Prompt with text, title, Ok and Cancel callback
$$('.prompt-ok').on('click', function () {
myApp.prompt('What is your name?', function (value) {
myApp.alert('Your name is "' + value + '". You clicked Ok button');
});});$$('.prompt-ok-cancel').on('click', function () {
myApp.prompt('What is your name?',
function (value) {
myApp.alert('Your name is "' + value + '". You clicked Ok button');
function (value) {
myApp.alert('Your name is "' + value + '". You clicked Cancel button');
);});$$('.prompt-title-ok').on('click', function () {
myApp.prompt('What is your name?', 'Custom Title', function (value) {
myApp.alert('Your name is "' + value + '". You clicked Ok button');
});});$$('.prompt-title-ok-cancel').on('click', function () {
myApp.prompt('What is your name?', 'Custom Title',
function (value) {
myApp.alert('Your name is "' + value + '". You clicked Ok button');
function (value) {
myApp.alert('Your name is "' + value + '". You clicked Cancel button');
登陆和密码Login and Password
有以下两种方法取得用户的授权：
myApp.modalLogin(text, [title, callbackOk, callbackCancel])
myApp.modalLogin(text, [callbackOk, callbackCancel])
- text - 字符串. 对话框文本
- title - 字符串. 可选项. 对话框题目
- callbackOk - 函数. 可选项. 当用户点击“ok”按钮后，函数被触发. 对话框的输入会被当做用户名和密码传入
- callbackCancel - 函数. 可选项. 当用户点击“cancel”按钮后，函数被触发. 对话框的输入会被当做用户名和密码传入
myApp.modalPassword(text, [title, callbackOk, callbackCancel])
myApp.modalPassword(text, [callbackOk, callbackCancel])
- text - 字符串. 对话框文本
- title - 字符串. 可选项. 对话框题目
- callbackOk - 函数. 可选项. 当用户点击“ok”按钮后，函数被触发. 对话框的输入会被当做密码传入
- callbackCancel - 函数. 可选项. 当用户点击“cancel”按钮后，函数被触发. 对话框的输入会被当做密码传入
示例代码：
class="page-content"
class="content-block"
href="#" class="login-modal"Login Modal
href="#" class="password-modal"Password Modal
var myApp = new Framework7();var $$ = Framework7.$;$$('.login-modal').on('click', function () {
myApp.modalLogin('Authentication required', function (username, password) {
myApp.alert('Thank you! Username: ' + username + ', Password: ' + password);
});});$$('.password-modal').on('click', function () {
myApp.modalPassword('You password please:', function (password) {
myApp.alert('Thank you! Your password is: ' + password);
嵌套模态对话框Nesting Modals
可能你已经注意到了，模态对话框可以嵌套在回调函数里：
class="page-content"
class="content-block"
href="#" class="name"What is your name?
$$('.name').on('click', function () {
myApp.prompt('What is your name?', function (value) {
myApp.confirm('Are you sure that your name is ' + value + '?', function () {
myApp.alert('Ok, your name is "' + value + '"!');
预加载模态对话框Preloader Modal
预加载模态对话框用于作为某些后台行为的指示器（如ajax请求），以此来阻断用户与应用的交互，我们可以用相应的应用方法来打开预加载模态对话框：
myApp.showPreloader([title]) - 显示预加载模态对话框
- title - 字符串. 可选项. 预加载模态对话框题目. 如果没有设定该参数，系统默认显示"Loading",你可以在应用初始化的时候，传入modalPreloaderTitle参数来改变默认设定。
以上方法会返回一个动态创建的模态对话框的html标签。示例如下：
class="page-content"
class="content-block"
href="#" class="open-preloader"Open Preloader
href="#" class="open-preloader-title"Open Preloader with custom title
$$('.open-preloader').on('click', function () {
myApp.showPreloader();
setTimeout(function () {
myApp.hidePreloader();
}, 2000);});$$('.open-preloader-title').on('click', function () {
myApp.showPreloader('Custom Title')
setTimeout(function () {
myApp.hidePreloader();
}, 2000);});
指示器Indicator
如果你不需要用到那么大的一个模态对话框如预加载模态对话框来指示活动的进程，你可以使用一个小型简单的指示器：
myApp.showIndicator() - 显示指示器
myApp.hideIndicator() - 关闭隐藏指示器，因为指示器没有按钮，所以它只能通过javascript进行控制
class="page-content"
class="content-block"
href="#" class="open-indicator"Open Indicator
$$('.open-indicator').on('click', function () {
myApp.showIndicator();
setTimeout(function () {
myApp.hideIndicator();
}, 2000);});
自定义模态对话框Custom Modals
所有之前介绍的预设模态对话框只是模态对话框的一个特定部分（就像设置的快捷方式），下面我们来看一下如何去自定义模态对话框：
myApp.modal(parameters) - 显示自定义模态对话框
- parameters - 对象. 模态对话框的参数对象。
下表列出了相关的参数：
Description
Optional. String with Modal title (could be HTML string)
Optional. String with Modal text (could be HTML string)
Optional. String with text (could be HTML string) that will be placed after "text"
Optional. Array of buttons. Each button should be presented as Object with button parameters (look below)
Optional. Callback function that will be executed when user clicks any of Modal's button. As arguments it receives modal (with Modal's HTMLElement) and index (with index number of clicked button)
下表列出了按钮的相关参数：
Description
String with Button's text (could be HTML string)
Optional. Set to true for bold button text
Optional. If "true" then modal will be closed after click on this button
Optional. Callback function that will be executed when user click this button
通过上面的参数配置，我们可以设置一个柔性的模态对话框，下面是相关示例代码：
class="page-content"
class="content-block"
href="#" class="open-3-modal"Modal With 3 Buttons
href="#" class="open-slider-modal"Modal With Slider
href="#" class="open-tabs-modal"Modal With Tabs
$$('.open-3-modal').on('click', function () {
myApp.modal({
'Modal with 3 buttons',
text: 'Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae',
buttons: [
text: 'B1',
onClick: function() {
myApp.alert('You clicked first button!')
text: 'B2',
onClick: function() {
myApp.alert('You clicked second button!')
text: 'B3',
bold: true,
onClick: function() {
myApp.alert('You clicked third button!')
})});$$('.open-slider-modal').on('click', function () {
var modal = myApp.modal({
title: 'Awesome Photos?',
text: 'What do you think about my photos?',
afterText:
'&div class="slider-container" style="width: margin:5px -15px"&'+
'&div class="slider-pagination"&&/div&'+
'&div class="slider-wrapper"&'+
'&div class="slider-slide"&&img src="/270x150/jpg?1" height="150"&&/div&' +
'&div class="slider-slide"&&img src="/270x150/jpg?2"&&/div&'+
buttons: [
text: 'Bad :('
text: 'Awesome!',
bold: true,
onClick: function () {
myApp.alert('Thanks! I know you like it!')
myApp.slider($$(modal).find('.slider-container'), {pagination: '.slider-pagination'});});$$('.open-tabs-modal').on('click', function () {
myApp.modal({
'&div class="buttons-row"&'+
'&a href="#tab1" class="button active tab-link"&Tab 1&/a&'+
'&a href="#tab2" class="button tab-link"&Tab 2&/a&'+
text: '&div class="tabs"&'+
'&div class="tab active" id="tab1"&Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis nunc non dolor euismod feugiat. Sed at sapien nisl. Ut et tincidunt metus. Suspendisse nec risus vel sapien placerat tincidunt. Nunc pulvinar urna tortor.&/div&'+
'&div class="tab" id="tab2"&Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae&/div&'+
buttons: [
text: 'Ok, got it',
bold: true
添加新批注
在作者公开此批注前，只有你和作者可见。
查看更早的 5 条回复