@kirkzwy 2014-07-22T05:58:02.000000Z 字数 54323 阅读 22994

Framework7中文文档

coding javascript 学习

欢迎开始使用framewor7制作高水平的iOS应用。

在正式开始阅读文档之前，我们十分推荐你从getting started引导开始，从该部分你可以学习到如何下载和配置framework7，并了解framework7的基本布局。

framework7的的学习难度是十分低的，只要你会HTML和CSS，对了解一点点的javascript，你就基本上懂得如何使用framework7去制作iOS应用了。

为了更好地学习framework7，我们推荐你按顺序去阅读本文档。

那我们先从最基本的应用HTML布局-App HTML Layout开始。

应用HTML布局

开发应用的第一步，就是按照应用的框架去写index.html，以下是index.html的最基本布局：

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- Your app title -->
    <title>My App</title>
    <!-- Path to Framework7 Library CSS-->
    <link rel="stylesheet" href="path/to/framework7.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="path/to/my-app.css">
  </head>
  <body>
    <!-- Status bar overlay for full screen mode (PhoneGap) -->
    <div class="statusbar-overlay"></div>
    <!-- Views -->
    <div class="views">
      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
            <div class="center sliding">Awesome App</div>
          </div>
        </div>
        <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
          <!-- Page, "data-page" contains page name -->
          <div data-page="index" class="page">
            <!-- Scrollable page content -->
            <div class="page-content">
              <p>Page content goes here</p>
              <!-- Link to another page -->
              <a href="about.html">About app</a>
            </div>
          </div>
        </div>
        <!-- Bottom Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner">
            <!-- Toolbar links -->
            <a href="#" class="link">Link 1</a>
            <a href="#" class="link">Link 2</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="path/to/framework7.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="path/to/my-app.js"></script>
  </body>
</html>

正如你看到的，布局十分简单，关键是你要在<head>内关联好CSS，和在<body>的尾部配置好JS文件就可以了。

在后面相关的章节中，你可以了解到关于如何去设置statusbar overlay，views，navbar，toolbar，pages，panels和其他组件。

在这个基本的模板的基础上，我们可以需要初始化应用-initialize our app在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
});

下面的表格列出了相关的参数：

参数	类型	默认设置	描述
Caching
cache	boolean	true	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	number	10006010	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	[]	Array of URLs (string) that should not be cached by Framework7
Fast clicks library
fastClicks	boolean	true	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
ajaxLinks	string	undefined	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
pushState	boolean	false	If you develop web app (not PhoneGap or Home Screen web app) it is useful to enable hash navigation (browser url will look like "http://my-webapp.com/#/about.html"). Also user will be able to navigate through app's history by using browser's default back and forward buttons.
animateNavBackIcon	boolean	false	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	boolean	true	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	boolean	true	Enable/disable ability to swipe back from left edge of screen to get to the previous page.
swipeBackPageThreshold	number	0	Value in px. Swipe back action will start if "touch distance" will be more than this value.
swipeBackPageActiveArea	number	30	Value in px. Width of invisible left edge of the screen that triggers swipe back action
swipeBackPageBoxShadow	boolean	true	Enable/disable box-shadow animation during swipe back action. You can disable it to improve performance
Sortable Lists
sortable	boolean	true	If you don't to use sortable lists you can disable it for potentially better performance.
Swipeout
swipeout	boolean	true	If you will not use swipeouts you can disable this feature for potentially better performance.
swipeoutNoFollow	boolean	false	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	string	false	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	number	false	Value in px. Width of invisible edge from the screen that triggers swipe panel
swipePanelNoFollow	boolean	false	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	number	0	Value in px. Panel will not move with swipe if "touch distance" will be less than this value.
panelsCloseByOutside	boolean	true	Enable/disable ability to close panel by clicking outside of panel (on panel's overlay)
panelsVisibleZIndex	number	6000	CSS z-index property for panel
Modals
modalTitle	string	'Framework7'	Default title for modals (Alert, Confirm, Prompt)
modalButtonOk	string	'OK'	Default text for modal's "OK" button
modalButtonCancel	string	'Cancel'	Default text for modal's "Cancel" button
modalPreloaderTitle	string	'Loading... '	Default text for preloader modal
modalCloseByOutside	boolean	false	Enable/disable ability to close modal (Alert, Confirm, Prompt) by clicking outside of modal (on modal's overlay)
actionsCloseByOutside	boolean	true	The same as previous but for Action Sheet modal
popupCloseByOutside	boolean	true	The same as previous but for Popup modal
modalTemplate	string	Look below*	Full HTML template for modals (like alert, confirm and prompt)
modalActionsTemplate	string	'<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`
Namespace Attention! If you change following class names you will also need to change them in CSS!
viewClass	string	'view'	Class name for your View element
viewMainClass	string	'view-main'	Class name for your Main View element
viewsClass	string	'views'	Class name for your Views element
Init
init	boolean	true	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页面中作以下配置

<div class="navbar">
  <div class="navbar-inner">
    <div class="center">{{title}}</div>
  </div>
</div>
<div class="pages">
  <div data-page="people" class="page">
    <div class="page-content">
      <ul>
        {{#each people}}
        <li>{{this}}</li>
        {{/each}}
      </ul>
    </div>
  </div>
</div>

下一步

在配置好my-app.js之后，我们就要在HTML上增加和配置视图Views

视图

视图view(<div class="view">)是在应用上的一个独立的视觉区域，它拥有自己的设置，导航和历史。不同的视图可以有不一样布局的导航条和工具条，界面风格也可以不一样。可以把它看作是应用里面的一个应用。因为视图具有这样的功能特性，所以framework7可以很方便的维护应用的每一个部分。

总视图views(div class="views">)是各个独立可见视图的容器，它永远保持可见（除了在modals模态对话框和panels其他面板中），所以总视图views是你的应用主体的主要容器，views元素在整个应用中只允许有一个。

下面是关于views的HTML结构：

<body>
  ...
  <div class="panel panel-left panel-cover">
    <div class="view panel-view"> ... </div>
  </div>
  <!-- Views -->
  <div class="views">
    <!-- Your main view -->
    <div class="view view-main">
      <!-- Navbar-->
      <!-- Pages -->
      <!-- Toolbar-->
    </div>
    <!-- Another view -->
    <div class="view another-view">
      <!-- Navbar-->
      <!-- Pages -->
      <!-- Toolbar-->
    </div>          
  </div>
  <div class="popup">
    <div class="view popup-view"> ... </div>
  </div>
  ...
</body>

如以下的代码所示，应用几乎是有不同的view视图组成的，记住一个重要的规则所有可见的视图view都必须包含在总视图views(div class="views">)里。在你移动整个应用的视图时，会自动增加一些动画效果（如打开设置面板panel）。

主视图Main View

主视图Main View是需要在class上添加main view的。为什么需要主视图，所有预设的链接都会加载到主视图上（除了在初始视图Initialize View上的链接）。

初始视图Initialize View

我们已经设置了必要的视图，和对我们的应用进行了初始化initialized,现在我们需要在javascript文件上对我们的视图做初始化。

注意：不是每一个视图都必须初始化，那些具有导航作用的视图才需要初始化，其他的视图（如弹出对话框）不必初始化，但我需要在HTML上配置好他们，从而保持正确的导航条，页面和工具条的正确布局。

myApp变量是我们在之前的文档上设置的framework7的初始化实例：

var myApp = new Framework7({
  // ...
});

该实例针对应用的不同部分有不同的方法，其中有一个方法是用于初始化视图view的。
myApp.addView(selector, parameters)用于初始化视图的方法：
selector--字符串或者HTML元素类型；如果是字符串，可能是CSS的视图元素选择器。
parameters--对象类型；具有视图参数的对象。
该方法返回的是一个带有视图实例的对象。

视图初始化参数View initialization parameters

Parameter	Type	Default	Description
dynamicNavbar	boolean	false	Set to true to enable Dynamic Navbar in this View
domCache	boolean	false	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.
linksView	string / HTMLElement	undefined	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	boolean		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	boolean		By default, equal to the same App's parameter. Allows to override global App parameter for current View
swipeBackPageThreshold	number		By default, equal to the same App's parameter. Allows to override global App parameter for current View
swipeBackPageActiveArea	number		By default, equal to the same App's parameter. Allows to override global App parameter for current View
swipeBackPageBoxShadow	boolean		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
mainView.loadPage(url)	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].
mainView.loadContent(content)	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.
mainView.goBack(url)	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属性进行设置，例子如下：

<div 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章节。

页面Pages

页面pages跟我们平时认识到的网站页面的概念是一样的。

接下来我们看一下页面的HTML结构：

<body>
  ...
  <!-- Views -->
  <div class="views">
    <!-- Your main view -->
    <div class="view view-main">
      <!-- Pages -->
      <div class="pages">
        <div class="page" data-page="home">
          <div class="page-content">
            ... page content goes here ...
          </div>
        </div>
      </div>
    </div>
    <!-- Another view -->
    <div class="view another-view">
      <!-- Pages -->
      <div class="pages">
        <div class="page" data-page="home-another">
          <div class="page-content">
            ... page content goes here ...
          </div>
        </div>
      </div>
    </div>          
  </div>
  ...
</body>

总页面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
pageInit	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

在页面事件中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
page.name	Contains string value of `data-page` attribute
page.url	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: `{ id: '10', count: '20', color: 'blue' }`
page.view	object. View instance that contains this page (if this View was initialized)
page.container	Link to Page HTMLElement
page.from	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>标签就可以了：

<a href="about.html">Go to About page</a>

这样当我们点击的时候，framework7就会发出一个ajax请求about.html，传人，插入Dom节点，运行动画过渡。

页面的内部文档结构

得益于framework7十分智能的解析器，我们在插入这些内部页面时不需要写完整的HTML结构（HTML HEAD，BODY,VIEWS,和PAGES等可以省略），下面是about.html文件的内部结构代码：

<-- That is all we have in about.html file -->
<div class="page" data-page="about">
  ... About page content goes here
</div>

整个过程的关键时，当进行ajax加载页面时，framework7解析器会寻找<div class="page">的元素，以至于我们不需要完整的HTML结构。这不是严格规定，完整的HTML结构也是可以的。

多页面的内部文档结构

下面是一个较为复杂的情况，例如，我们有两个或者更多初始视图带有独立的导航，实例代码如下：

<body>
  ...
  <!-- Views -->
  <div class="views">
    <!-- Left view -->
    <div class="view view-main left-view">
      <!-- Navbar-->
      <!-- Pages -->
        <a href="about.html"> About </a>
      <!-- Toolbar-->
    </div>
    <!-- Right view -->
    <div class="view right-view">
      <!-- Navbar-->
      <!-- Pages -->
        <a href="about.html"> About </a>
      <!-- Toolbar-->
    </div>          
  </div>
  ...
</body>

在上面的代码中，你看到了两个视图（左视图和右视图），两个视图都有对about.html的链接，同时，在我们点击不同的视图里的这一链接时，会加载不同的内容。

在这样的情况下，about.html要这样写：

<!-- Left view -->
<div class="view view-main left-view">
  <div class="page" data-page="about-right">
    ... This page will be loaded when you click about.html link from Left view ...
  </div>          
</div>
<!-- Right view -->
<div class="view right-view">
  <div class="page" data-page="about-right">
    ... This page will be loaded when you click about.html link from Right view ...
  </div>          
</div>

关键点是，针对特定视图的页面需要被包含在<div class="view">里面，并像在主布局里面使用相同的class。这会有助于framework7去识别哪个页面加载到哪个视图上面去。

带有动态导航条的页面文件内部结构

就像你在导航条和工具条布局类型章节里面看到，动态导航条需要through-type布局，但这种类型的导航条并不会被加载紧页面里，所以我们需要写成这样：

<div class="navbar">
  ... Navbar content goes here
</div>
<div class="page" data-page="about">
  ... About page content goes here
</div>

关键一点的是，我们要将导航条和他的内容放在页面附近。如果你有多个页面带有不同的导航条，就将他们两者都包含在相应的视图，就像上面的哪个例子那样。

到现在，我们已经了解如何去加载页面了，但是我们怎样可以返回到之前的页面呢。

这也是很简单的，只要在链接上加上**back**class，下面就是about.html的文件结构，它将会返回到主页index.html页面：

<div class="page" data-page="about">
  <-- Just add additional "back" class to link -->
  <a href="index.html" class="back"> Go back to home page </a>
</div>

下面有两条比较重要的规则在我们在返回链接中添加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 View
mainView.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。

在framework7中联接不同视图Linking between views in Framework7

现在我们来学习一点比较复杂的情况

我们有两个已经初始化的视图（左视图和右视图）都具有分开的导航，在这样的情况下，左视图上的链接都会被加载到左视图上，右视图的也是这样。

但是我们现在需要将左视图上的链接加载到右视图上面，这就是我们需要学习的联接不同视图（lingking between views）。我们已经知道怎样通过javascript去实现，使用.loadPage和.goBack这两个视图方法。

在framework7的框架下，我们可以不必使用到javascript，我们只需要在HTML上添加data-view属性到链接上就可以达到上述目标。'data-view'必须包含特定页面的CSS选择器：

<body>
  ...
  <!-- Views -->
  <div class="views">
    <!-- Left view -->
    <div class="view view-main left-view">
      <!-- Pages -->
        <!-- These links will load pages to this Left view -->
        <a href="about.html"> About </a>
        <a href="services.html"> Services </a>
        <!-- This link will load pages to Right view -->
        <a href="products.html" data-view=".right-view"> Products </a>
    </div>
    <!-- Right view -->
    <div class="view right-view">
      <!-- Pages -->
        <!-- These links will load pages to this Right view -->
        <a href="products.html"> Products </a>
        <a href="contacts.html"> Contacts </a>
        <!-- This link will load pages to Left view -->
        <a href="about.html" data-view=".left-view"> About </a>
        <a href="services.html" data-view=".left-view"> Services </a>
        <!-- This link will trigger Go Back in Left view -->
        <a href="#" class="back" data-view=".left-view"> About </a>
    </div>          
  </div>
  ...
</body>

这是十分简单的，只要通过CSS选择器添加了data-view属性就可以了。

我们通过这个例子去了解如何通过左视图的底部链接去控制主视图（视图分割案例"Split View Application" example）

下一步

到现在为止，我们已经了解了全部关于应用主结构，联接或加载页面的全部知识，下面就是要填充其他部件了。让我们从最重要的部件开始--导航条和工具条Navbars & Toolbars。

导航条及工具条布局类型Navbars & Toolbars Layout

在给我们的应用添加导航条和工具条之前，要先确定导航条和工具条的布局类型。

framework7框架允许我们可以很灵活地使用导航条和工具条，根据他们放置在视图/页面的不同位置，可以分为以下三类。

静态布局"Static" Layout

静态布局是最少使用地一种布局方式，在这种类型的布局中，导航条和工具条只是滚动页面内容里的其中一个组成部分，每个页面都有各自的导航条和工具条：

<body>
  ...
  <div class="views">
    <div class="view view-main">
      <div class="pages">
        <div data-page="index" class="page">
          <div class="page-content">
            <!-- Top Navbar-->
            <div class="navbar">
              <div class="navbar-inner">
                <div class="center">Awesome App</div>
              </div>
            </div>
            <!-- /End of Top Navbar-->
            <p>Other content goes here</p>
            ...
            <!-- Bottom Toolbar-->
            <div class="toolbar">
              <div class="toolbar-inner">
                Hello
              </div>
            </div>          
            <!-- /End of Bottom Toolbar-->
          </div>
        </div>
      </div>
    </div>
  </div>
  ...
</body>

固定布局"Fixed" Layout

在固定布局里，各个页面都有他们自己导航条和工具条，但是他们总是在屏幕中是可见的，他们不会随着页面滚动而滚动：

<body>
  ...
  <div class="views">
    <div class="view view-main">
      <div class="pages">
        <!-- Now we need additional "navbar-fixed" and "toolbar-fixed" classes on Page -->
        <div data-page="index" class="page navbar-fixed toolbar-fixed">
          <!-- Top Navbar-->
          <div class="navbar">
            <div class="navbar-inner">
              <div class="center">Awesome App</div>
            </div>
          </div>
          <!-- /End of Top Navbar-->
          <div class="page-content">
            <p>Other content goes here</p>
            ...
          </div>
          <!-- Bottom Toolbar-->
          <div class="toolbar">
            <div class="toolbar-inner">
              Hello
            </div>
          </div>          
          <!-- /End of Bottom Toolbar-->
        </div>
      </div>
    </div>
  </div>
  ...
</body>

固定布局和静态布局之间的差异如下：

固定布局的导航条和工具条是Page(<div class="page">)的节点
每个页面都有额外的"navbar-fixed"class(用于固定导航条)和"toolbar-fixed"class（用于固定工具条）

注意：如果你想在一个单一视图中的每个页面都使用固定的布局，你只要在pages(<div class="pages">)这一父节点中使用"navbar-fixed"class和"toolbar-fixed"class，就可以了。

全局布局"Through" Layout

这一种布局是最有趣和用得最多的一种布局，在单一页面中，导航条和工具都是固定在总视图的同一位置。在这种布局中，你要设置为动态导航条Dynamic Naybar，（但要在应用初始化中设置）：

<body>
  ...
  <div class="views">
    <div class="view view-main">
      <!-- Top Navbar-->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="center">Awesome App</div>
        </div>
      </div>
      <!-- /End of Top Navbar-->          
      <!-- Now we need additional "navbar-through" and "toolbar-through" classes on Pages -->
      <div class="pages navbar-through toolbar-through">
        <div data-page="index" class="page">
          <div class="page-content">
            <p>Other content goes here</p>
            ...
          </div>
        </div>
      </div>
      <!-- Bottom Toolbar-->
      <div class="toolbar">
        <div class="toolbar-inner">
          Hello
        </div>
      </div>          
      <!-- /End of Bottom Toolbar-->
    </div>
  </div>
  ...
</body>

全局布局与静态布局、固定布局的差异在于

导航条和工具条是view的子节点(<div class="view">)
带有全局导航条和工具条的页面，在pages(<div class="pages">)上有"navbar-through"class（用于全局化导航条）和"toolbar-through"class（用于全局化工具条）

混合布局Mixed Layout

针对不同的视图，使用不同的导航条和工具条布局，如：在单一视图中可以使用固定布局或全局布局。不过你也可以在单一视图里混合使用这些布局。例如：你可以设置成全局导航条和固定工具条：

<body>
  ...
  <div class="views">
    <div class="view view-main">
      <!-- Top Navbar-->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="center">Awesome App</div>
        </div>
      </div>
      <!-- /End of Top Navbar-->          
      <!-- Now we need additional "navbar-through" and "toolbar-fixed" classes on Pages -->
      <div class="pages navbar-through fixed-through">
        <div data-page="index" class="page">
          <div class="page-content">
            <p>Other content goes here</p>
            ...
          </div>
          <!-- Bottom Toolbar-->
          <div class="toolbar">
            <div class="toolbar-inner">
              Hello
            </div>
          </div>          
          <!-- /End of Bottom Toolbar-->
        </div>
      </div>
    </div>
  </div>
  ...
</body>

### 不带导航条/工具条No Navbar/Toolbar

当然在你的应用中可以完全不使用导航条或工具条，甚至两者都不用，只要在page/pages/view上不添加相应的class就可以了（如"navbar-fixed", "navbar-through", "toolbar-fixed", "toolbar-through"）。

### 备忘录Cheat sheet

就如你所见，这些布局都是很容易理解和使用的，他们的不同在相应的父节点和嵌套结构使用不同的class。下面是他们的html结构的备忘录：

静态Static

.view   
  .pages    
    .page   
      .page-content   
        .navbar   
        // other page content
        .toolbar

固定Fixed

.view
  .pages.navbar-fixed.navbar-through
    .page
      .navbar
      .page-content
      .toolbar

全局Through

.view
  .navbar
  .pages.navbar-through.toolbar-through
    .page
      .page-content
  .toolbar

导航条是包含了页面的题目和导航元素固定（固定布局和全局中）屏幕最上方。

导航条可以分为左、中、右三个部分，每个部分都可以嵌套进任何的Html元素，不过我们建议按照以下的方式使用：

左部是留用于返回链接，图标和单词链接
中间部分用于显示页面标题或者标签链接（tab link）如按钮行或相应的控制器
右部的使用与左部类似

导航条的布局是相当简单的：

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">Left</div>
        <div class="center">Center</div>
        <div class="right">Right</div>
    </div>
</div>

要注意的是导航条的中间部分，在宽度设置上的权重是最低的，这意味着当窗口调整大小所造成的三个部分在导航条放不下的话，中间部分会被剪裁掉

所以如果你在中间部分使用了过多的文字，当文字被裁减，文字结尾部分会显示成省略号。所以当你在那个部分使用自定义元素时需要十分注意。

如果导航条左部和右部是链接的话，你只需要使用带有linkclass的<a>标签就可以了：

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">Left</div>
        <div class="center">Center</div>
        <div class="right">Right</div>
    </div>
</div>

使用linkclass不是必须的，但我们推荐这样使用，因为这可以附加上相应的链接样式和透明效果。

多链接的导航条Multiple links

没什么额外的知识，只要在相应的部分多加<a class="link"：

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left 1</a>
            <a href="#" class="link">Left 2</a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link">Right 1</a>
        </div>
    </div>
</div>

图标文字型的链接导航条Links with icons + text

这样的导航条与之前的有一些不同，在这种情况下，我们需要将文字嵌套在<span>标签里，因为在动画时需要给图标和文字留出足够的空位：

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">
                <i class="icon icon-back-blue"></i>
                <span>Back</span>
            </a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link">
                <i class="icon icon-bars-blue"></i>
                <span>Menu</span>
            </a>
        </div>
    </div>
</div>

只带图标的链接Links with icons only

如果你的链接只需要图标和不需要文字，我们需要添加额外的"icon-only"class到链接上，在这个class的作用下，图标的大小会呈现成44*44px，这可以避免用户忽略了图标：

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link icon-only">
                <i class="icon icon-back-blue"></i>
            </a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon icon-bars-blue"></i>
            </a>
        </div>
    </div>
</div>

与导航条相关的应用方法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 -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Home Left</a>
        </div>
        <div class="center">Home</div>
        <div class="right">
            <a href="#" class="link">Home Right</a>
        </div>
    </div>
</div>
<!-- Navbar on about page -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">About Left</a>
        </div>
        <div class="center">About</div>
        <div class="right">
            <a href="#" class="link">About Right</a>
        </div>
    </div>
</div>

滑动过渡Sliding transition

滑动效果应该使用得更加谨慎，因为他反映出了页面间的链接路径。

<!-- Navbar on index page -->
<div class="navbar">
    <div class="navbar-inner">
        <!-- Left part doesn't related to other pages, let's fade it out -->
        <div class="left">
            <a href="#" class="link">Home Left</a>
        </div>
        <!-- Center and Right parts reflect page title and page links, let's slide them -->
        <div class="center sliding">Home</div>
        <div class="right sliding">
            <a href="about.html" class="link">About</a>
        </div>
    </div>
</div>
<!-- Navbar on about page -->
<div class="navbar">
    <div class="navbar-inner">
        <!-- Now, Left and Center parts reflect page title and page links, let's slide them -->
        <div class="left sliding">
            <a href="#" class="link back">Home</a>
        </div>
        <div class="center sliding">About</div>
        <!-- Right part doesn't related to other pages -->
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon icon-bars-blue"></i>
            </a>
        </div>
    </div>
</div>

返回链接图标动态化Animate back-link icon

如果你使用预设的返回链接图标（图标+单词“Back”），你可以在上面添加额外的动画，使得与iOS7更像。要达到这种效果要在应用初始化时，传入animateNavBackIcon: true参数，在导航条的左部使用backclass,在布局上没有其他区别。

工具条Toolbar

toolbar是固定在页面底部（使用固定和全局布局）作为导航元素的部分，工具条内部没有分部分，只是一个个平面排列的链接。

工具条布局Toolbar layout

工具条布局是十分简单的，如下面的示例代码：

<div class="toolbar">
    <div class="toolbar-inner">
        <a href="#" class="link">Link 1</a>
        <a href="#" class="link">Link 2</a>
        <a href="#" class="link">Link 3</a>
    </div>
</div>

在默认设置中，包含在工具条里的链接没有区分层级，每个链接的间距都是一样的。

标签条Tab bar

标签条是工具条的一个特殊类型，它包含了图标（有时图标带有标签），而不只是单纯的链接，并使用在tab布局类型上。

标签条布局Tab bar layout

标签条布局基本与工具条布局一致，但带有额外的"tabbar"class:

<div class="toolbar tabbar">
    <div class="toolbar-inner">
        <a href="#tab1" class="tab-link active">
            <i class="icon demo-icon-1"></i>
        </a>
        <a href="#tab2" class="tab-link">
            <i class="icon demo-icon-2"></i>
        </a>
        <a href="#tab3" class="tab-link">
            <i class="icon demo-icon-3"></i>
        </a>
        <a href="#tab4" class="tab-link">
            <i class="icon demo-icon-4"></i>
        </a>
    </div>
</div>

在默认的设置中，所有的标签条里的内容都是同级的，并且相互间的间距都是一样。但是有以下两点关于链接大小需要注意的事项：

在iPhone上，所有链接的间距都相等，等于[screen width] / [number of links]；

在iPad上，所有链接居中分布，并且最小间距为105px；

在图标上添加提示标签Add badges to icons

如果你需要在标签图标上添加提示标签，就要在<span>元素里嵌套<span class="badge">，示例代码如下：

<div class="toolbar tabbar">
    <div class="toolbar-inner">
        <a href="#tab1" class="tab-link active">
            <i class="icon demo-icon-1"></i>
        </a>
        <a href="#tab2" class="tab-link">
            <i class="icon demo-icon-2">
                <span class="badge badge-red">5</span>
            </i>
        </a>
        <a href="#tab3" class="tab-link">
            <i class="icon demo-icon-3"></i>
        </a>
        <a href="#tab4" class="tab-link">
            <i class="icon demo-icon-4">
                <span class="badge badge-green">15</span>
            </i>
        </a>
    </div>
</div>

带有名称的标签条Tab bar with labels

如果需要再加上文字提示需要再添加"tabbar-labels"class,并且需要再链接里嵌套<span class="tabbar-label">:

<div class="toolbar tabbar tabbar-labels">
    <div class="toolbar-inner">
        <a href="#tab1" class="tab-link active">
            <i class="icon demo-icon-1"></i>
            <span class="tabbar-label">Label 1</span>
        </a>
        <a href="#tab2" class="tab-link">
            <i class="icon demo-icon-2">
                <span class="badge badge-red">5</span>
            </i>
            <span class="tabbar-label">Label 2</span>
        </a>
        <a href="#tab3" class="tab-link">
            <i class="icon demo-icon-3"></i>
            <span class="tabbar-label">Label 3</span>
        </a>
        <a href="#tab4" class="tab-link">
            <i class="icon demo-icon-4"></i>
            <span class="tabbar-label">Label 4</span>
        </a>
    </div>
</div>

注意：如果在标签上加了文字后，标签条的高度会变成55px，而不是原来的44px。

搜索条Search Bar Layout

搜索条应该放置在视图（".page"）和视图内容之间（".page-content"）：

<div class="page">
    <!-- Search bar -->
    <form class="searchbar" data-search-list=".list-block-search" data-search-in=".item-title">
        <div class="searchbar-input">
            <input type="search" placeholder="Search">
            <a href="#" class="searchbar-clear"></a>
        </div>
        <a href="#" class="searchbar-cancel">Cancel</a>
    </form>
    <!-- Search bar overlay-->
    <div class="searchbar-overlay"></div>
    <!-- Page content -->
    <div class="page-content">
        <div class="content-block searchbar-not-found">
                Nothing found
        </div>
        <div class="list-block list-block-search searchbar-found">
            <ul>
                ... list view items ...
            </ul>
        </div>
    </div>
</div>

搜索条例子Search Bar Example

<div data-page="home" class="page">
  <!-- Search bar -->
  <form data-search-list=".list-block-search" data-search-in=".item-title" class="searchbar">
    <div class="searchbar-input">
      <input type="search" placeholder="Search"><a href="#" class="searchbar-clear"></a>
    </div><a href="#" class="searchbar-cancel">Cancel</a>
  </form>
  <!-- Search bar overlay -->
  <div class="searchbar-overlay"></div>
  <div class="page-content">
    <!-- This block will be displayed if nothing found -->
    <div class="content-block searchbar-not-found">
      <div class="content-block-inner">Nothing found</div>
    </div>
    <!-- This block will be displayed if anything found, and this list block is used a searbar target -->
    <div class="list-block list-block-search searchbar-found">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Acura </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Audi</div>
          </div>
        </li>
        ...
      </ul>
    </div>
  </div>
</div>

搜索条javascript事件Search Bar JavaScript Events

事件	目标	描述
search	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

状态条覆盖Status bar overlay

iOS7可以让你制作全屏应用，但这又要可能会覆盖掉状态条。
不好的示例：

好的示例

Framework7可以自动帮你这个问题。它会自动检测你的应用是否全屏应用，如果处于全屏状态，会自动添加"with-statusbar-overlay"class到<html>（当不处于全屏状态时，会移除这个class）。"with-statusbar-overlay"class（当应用是全屏模式时），会在应用头部添加20px的内边距。

如果我们想控制状态条的颜色时，我们要在<body>中添加<div class="statusbar-overlay">，示例代码如下：

...
<body>
  <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中它的默认颜色是黑色，并且需要使用插件如cordova-plugin-statusbar去修改。

侧边栏Side Panels

在这章，我们看一下如何添加侧边栏。我们最多可以添加最多两个侧边栏，一个在左边，一个在右边。我们要在body部分一开始就添加侧边栏的html布局:

<body>
    <!-- First, we need to add Panel's overlay that will overlays app while panel is opened -->
    <div class="panel-overlay"></div>
    <!-- Left panel -->
    <div class="panel panel-left">
        ... panel content goes here ...
    </div>
    <!-- Right panel -->
    <div class="panel panel-right">
        ... panel content goes here ...
    </div>
    ...
</body>

在添加了相关的html标签后，我们要选择侧边栏的打开特效，总共有两个特效可以选择：“Reveal”（侧边栏将整个应用的内容移出），“cover”（侧边栏覆盖在应用内容上）。如果你使用“Reveal”效果，需要添加额外的panel-revealclass到侧边栏上，如果使用“Cover”效果则添加panel-cover：

<body>
    <!-- First, we need to add Panel's overlay that will overlays app while panel is opened -->
    <div class="panel-overlay"></div>
    <!-- Left panel, let it be with reveal effect -->
    <div class="panel panel-left panel-reveal">
        ... panel content goes here ...
    </div>
    <!-- Right panel, with cover effect -->
    <div class="panel panel-right panel-cover">
        ... panel content goes here ...
    </div>
    ...
</body>

打开或关闭侧边栏Open and Close Panels

HTML上操作
当我们在应用上设置了侧边栏之后，我们需要知道如何打开和关闭。

当我们要打开侧边栏，我们需要添加open-panelclass到任何的html元素（推荐是添加到链接上）；

当我们要关闭侧边栏，我们需要添加close-panelclass到任何的html元素（推荐是添加到链接上）；

如果你设置了两个侧边栏，默认是打开和关闭左边的侧边栏；

当你想控制打/关闭的是哪个侧边栏，可以在控制打开和关闭的元素上添加data-panel="left"属性；

根据上面的规范，相关的示例代码如下：

<body>
  <!-- Panels Overlay -->
  <div class="panel-overlay"></div>
  <!-- Left Panel with Reveal effect -->
  <div class="panel panel-left panel-reveal">
    <div class="content-block">
      <p>Left Panel content here</p>
      <!-- Click on link with "close-panel" class will close panel -->
      <p><a href="#" class="close-panel">Close me</a></p>
      <!-- Click on link with "open-panel" and data-panel="right" attribute will open Right panel -->
      <p><a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p>
    </div>
  </div>
  <!-- Right Panel with Cover effect -->
  <div class="panel panel-right panel-cover">
    <div class="content-block">
      <p>Right Panel content here</p>
      <!-- Click on link with "close-panel" class will close panel -->
      <p><a href="#" class="close-panel">Close me</a></p>
      <!-- Click on link with "open-panel" and data-panel="left" attribute will open Left panel -->
      <p><a href="#" data-panel="left" class="open-panel">Open Left Panel</a></p>
    </div>
  </div>
  ...
  <div class="page-content">
    <div class="content-block">
      <!-- If no data-panel attribute, Left panel will be opened by default -->
      <p><a href="#" class="open-panel">Open Left Panel</a></p>
      <!-- Click on link with "open-panel" and data-panel="right" attribute will open Right panel -->
      <p><a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p>
    </div>
  </div>
  ...
</body>

使用javascript控制

我们也可以使用javascript通过相关的应用方法进行控制。

myApp.openPanel(position) - open Panel.
- position - string - Position of panel to open: "left" or "right". Required.
myApp.closePanel() - close currently opened Panel.

示例代码如下：

<body>
  <div class="panel-overlay"></div>
  <div class="panel panel-left panel-reveal">
    <div class="content-block">
      <p>Left Panel content here</p>
      <p><a href="#" class="panel-close">Close me</a></p>
      <p><a href="#" class="open-right-panel">Open Right Panel</a></p>
    </div>
  </div>
  <div class="panel panel-right panel-cover">
    <div class="content-block">
      <p>Right Panel content here</p>
      <p><a href="#" class="panel-close">Close me</a></p>
      <p><a href="#" class="open-left-panel">Open Left Panel</a></p>
    </div>
  </div>
  ...
    <div class="page-content">
      <div class="content-block">
        <p><a href="#" class="open-left-panel">Open Left Panel</a></p>
        <p><a href="#" class="open-right-panel">Open Right Panel</a></p>
      </div>
    </div>
  ...
  <script>
    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();
    });
  </script>
</body>

侧边栏事件Panel Events

侧边栏事件可以十分有效地用于检测用户是如何跟你的侧边栏进行交互的，或者在侧边栏处于打开或关闭时使用javascript进行控制。

事件	目标	描述
open	Panel Element<div class="panel">	Event will be triggered when Panel starts its opening animation
opened	Panel Element<div class="panel">	Event will be triggered after Panel completes its opening animation
close	Panel Element<div class="panel">	Event will be triggered when Panel starts its closing animation
closed	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可以让你使用滑动的手势打开侧边栏，限制：只有一个侧边栏可以使用滑动打开（左边或者右边）。

要使用这个特性，我们要在应用初始App initialization的时候传入参数：

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>
    </div>
    <!-- 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>
    </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>
    <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>
</div>
...

注意："content-block-title"只能在"content-block"或"list-block"之前使用。

布局网格Layout Grid

framew7使用柔性布局，使得你可以按照你需要放置你的内容：

<!-- Each "cells" row should be wrapped with div class="row" -->
<div class="row">
    <!-- Each "cell" has col-[widht in percents] class -->
    <div class="col-50">50%</div>
    <div class="col-50">50%</div>
</div>   
<div class="row">
    <!-- Each "cell" has col-[widht in percents] class -->
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
</div>

默认设置的每个“表格”都有15px的间隔，如果你不想带有间隔可以添加使用no-gutterclass到rowclass那：

<!-- Additional "no-gutter" class on row to remove space between cells -->
<div class="row no-gutter">
    <!-- Each "cell" has col-[widht in percents] class -->
    <div class="col-50">50%</div>
    <div class="col-50">50%</div>
</div>   
<div class="row">
    <!-- Each "cell" has col-[widht in percents] class -->
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
</div>

下面的表格列出了所有网格可用的参数：

Class	Width
col-5	5%
col-10	10%
col-15	15%
col-20	20%
col-25	25%
col-33	33.333333333333336%
col-40	40%
col-50	50%
col-60	60%
col-66	66.66666666666666%
col-75	75%
col-80	80%
col-85	85%
col-90	90%
col-95	95%
col-100	100%

默认设置中的网格是没有样式，我们可以如此添加样式：

div[class*="col-"] {
  background: #fff;
  text-align: center;
  color: #000;
  border: 1px solid #ddd;
  padding: 5px;
}
.row {
  margin-bottom: 15px;
}

点击观看具体效果.

模态对话框Modal

模态对话框是一个小型的内容窗口，在它弹出的是时候会覆盖住应用页面的主要内容。模态对话框通常用于从用户上取得信息，或者通知警告用户。模态对话框跟其他覆盖窗口都被称为临时窗口。

模态对话框只能使用javascript打开，下面我们就来看一下相关的应用方法。

预定义的模态对话框Predefined Modals

如果你没有对预定义的模态对话框的题目进行修改，它会使用预定义的题目("Framework7")，要自定义题目可以在应用初始化的时候传入modalTitle参数。

模态对话框的按钮文字（如“ok”和“cancel”）同样是可以修改的，在应用初始化的时候传入modalButtonOk和modalButtonCancel参数。

首先，让我们了解一下在framework7里最经常使用的预测模态对话框：

提醒对话框Alert

打开一个提醒模态对话框，我们需要使用一下其中之一的应用方法
myApp.alert(text, [title, callbackOk])
or
myApp.alert(text, [callbackOk])
- text - 字符串. 提醒的语句。
- title - 字符串. 可选参数. 提醒对话框的题目。
- callbackOk - 函数. 可选参数. 当用户点击了对话框上的“ok”
按钮后，回调函数会被触发。

以上方法会返回一个动态创建的模态对话框的html标签。示例如下：

<body>
  ...
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="alert-text">Alert With Text</a></p>
      <p><a href="#" class="alert-text-title">Alert With Text and Title</a></p>
      <p><a href="#" class="alert-text-title-callback">Alert With Text and Title and Callback</a></p>
      <p><a href="#" class="alert-text-callback">Alert With Text and Callback</a></p>
    </div>
  </div>
  ...
</body>

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])
or
myApp.confirm(text, [callbackOk, callbackCancel])
- text - 字符串. 确认文本
- title - 字符串. 可选项. 确认模态对话框题目
- callbackOk - 函数. 可选项. 当用户点击了对话框上的“ok”
按钮后，回调函数会被触发。
- callbackCancel - 函数. 可选项.当用户点击了对话框上的“cancel”按钮后（即用户取消相应的行为时），回调函数会被触发。

以上方法会返回一个动态创建的模态对话框的html标签。示例如下：

<body>
  ...
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="confirm-ok">Confirm with text and Ok callback</a></p>
      <p><a href="#" class="confirm-ok-cancel">Confirm with text, Ok and Cancel callbacks</a></p>
      <p><a href="#" class="confirm-title-ok">Confirm with text, title and Ok callback</a></p>
      <p><a href="#" class="confirm-title-ok-cancel">Confirm with text, title, Ok and Cancel callback</a></p>
    </div>
  </div>
  ...
</body>

$$('.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])
or
myApp.prompt(text, [callbackOk, callbackCancel])
- text - 字符串. 提出问题的文本.
- title - 字符串. 可选项. 对话框的题目.
- callbackOk - 函数. 可选项. 当用户点击“ok”按钮时，函数会被触发，并从对话框上取得函数参数.
- callbackCancel - 函数. 可选项. 当用户点击“cancel”按钮时，函数会被触发，并从对话框上取得函数参数.
以上方法会返回一个动态创建的模态对话框的html标签。示例如下：

<body>
  ...
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="prompt-ok">Prompt with text and Ok callback</a></p>
      <p><a href="#" class="prompt-ok-cancel">Prompt with text, Ok and Cancel callbacks</a></p>
      <p><a href="#" class="prompt-title-ok">Prompt with text, title and Ok callback</a></p>
      <p><a href="#" class="prompt-title-ok-cancel">Prompt with text, title, Ok and Cancel callback</a></p>
    </div>
  </div>
  ...
</body>

$$('.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

有以下两种方法取得用户的授权：
1.
myApp.modalLogin(text, [title, callbackOk, callbackCancel])
or
myApp.modalLogin(text, [callbackOk, callbackCancel])
- text - 字符串. 对话框文本
- title - 字符串. 可选项. 对话框题目
- callbackOk - 函数. 可选项. 当用户点击“ok”按钮后，函数被触发. 对话框的输入会被当做用户名和密码传入
- callbackCancel - 函数. 可选项. 当用户点击“cancel”按钮后，函数被触发. 对话框的输入会被当做用户名和密码传入

2.
myApp.modalPassword(text, [title, callbackOk, callbackCancel])
or
myApp.modalPassword(text, [callbackOk, callbackCancel])
- text - 字符串. 对话框文本
- title - 字符串. 可选项. 对话框题目
- callbackOk - 函数. 可选项. 当用户点击“ok”按钮后，函数被触发. 对话框的输入会被当做密码传入
- callbackCancel - 函数. 可选项. 当用户点击“cancel”按钮后，函数被触发. 对话框的输入会被当做密码传入

示例代码：

<div class="page-content">
  <div class="content-block">
    <p><a href="#" class="login-modal">Login Modal</a></p>
    <p><a href="#" class="password-modal">Password Modal</a></p>
  </div>
</div>

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

可能你已经注意到了，模态对话框可以嵌套在回调函数里：

<body>
  ...
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="name">What is your name?</a></p>
    </div>
  </div>
  ...
</body>

$$('.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 + '"!');
        });
    });
});

预加载模态对话框用于作为某些后台行为的指示器（如ajax请求），以此来阻断用户与应用的交互，我们可以用相应的应用方法来打开预加载模态对话框：
myApp.showPreloader([title]) - 显示预加载模态对话框
- title - 字符串. 可选项. 预加载模态对话框题目. 如果没有设定该参数，系统默认显示"Loading",你可以在应用初始化的时候，传入modalPreloaderTitle参数来改变默认设定。

以上方法会返回一个动态创建的模态对话框的html标签。示例如下：

<body>
  ...
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="open-preloader">Open Preloader</a></p>
      <p><a href="#" class="open-preloader-title">Open Preloader with custom title</a></p>
    </div>
  </div>
  ...
</body>

$$('.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进行控制

<body>
  ...
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="open-indicator">Open Indicator</a></p>
    </div>
  </div>
  ...
</body>

$$('.open-indicator').on('click', function () {
    myApp.showIndicator();
    setTimeout(function () {
        myApp.hideIndicator();
    }, 2000);
});

自定义模态对话框Custom Modals

所有之前介绍的预设模态对话框只是模态对话框的一个特定部分（就像设置的快捷方式），下面我们来看一下如何去自定义模态对话框：
myApp.modal(parameters) - 显示自定义模态对话框
- parameters - 对象. 模态对话框的参数对象。

下表列出了相关的参数：

Parameter	Type	Description
title	string	Optional. String with Modal title (could be HTML string)
text	string	Optional. String with Modal text (could be HTML string)
afterText	string	Optional. String with text (could be HTML string) that will be placed after "text"
buttons	array	Optional. Array of buttons. Each button should be presented as Object with button parameters (look below)
onClick	function	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)

下表列出了按钮的相关参数：

Parameter	Type	Default	Description
text	string		String with Button's text (could be HTML string)
bold	boolean	false	Optional. Set to true for bold button text
close	boolean	true	Optional. If "true" then modal will be closed after click on this button
onClick	function		Optional. Callback function that will be executed when user click this button

通过上面的参数配置，我们可以设置一个柔性的模态对话框，下面是相关示例代码：

<body>
  ...
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="open-3-modal">Modal With 3 Buttons</a></p>
      <p><a href="#" class="open-slider-modal">Modal With Slider</a></p>
      <p><a href="#" class="open-tabs-modal">Modal With Tabs</a></p>
    </div>
  </div>
  ...
</body>

$$('.open-3-modal').on('click', function () {
  myApp.modal({
    title:  '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: auto; margin:5px -15px">'+
                  '<div class="slider-pagination"></div>'+
                  '<div class="slider-wrapper">'+
                    '<div class="slider-slide"><img src="http://hhhhold.com/270x150/jpg?1" height="150"></div>' +
                    '<div class="slider-slide"><img src="http://hhhhold.com/270x150/jpg?2"></div>'+
                  '</div>'+
                '</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({
    title:  '<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>'+
            '</div>',
    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>'+
          '</div>',
    buttons: [
      {
        text: 'Ok, got it',
        bold: true
      },
    ]
  })
});

view.hideNavbar()	Hide navbar in this View
view.showNavbar()	Show navbar in this View

view.hideToolbar()	Hide toolbar in this View
view.showToolbar()	Show toolbar in this View

Framework7中文文档

应用HTML布局

初始化应用

例子："preprocess" 内容配置

下一步

视图

主视图Main View

初始视图Initialize View

视图初始化参数View initialization parameters

视图方法及属性View Methods & Properties

视图URL的默认设置Default View URL

使用其他方法获取视图实例Access to View's instance with other ways

下一步

页面Pages

data-page属性

页面内容page content

页面事件Page Event

Page Data

下一步

导航与在framework7中联接不同页面Navigation and linking between pages in Framework7

页面的内部文档结构

多页面的内部文档结构

带有动态导航条的页面文件内部结构

导航中返回Going back in navigation

使用javascript去加载页面

使用javascript进行返回

结论

下一步

在framework7中联接不同视图Linking between views in Framework7

下一步

导航条及工具条布局类型Navbars & Toolbars Layout

静态布局"Static" Layout

固定布局"Fixed" Layout

全局布局"Through" Layout

混合布局Mixed Layout

静态Static

固定Fixed

全局Through

导航条Navbar

导航条的布局Navbar Layout

带有链接的导航条Navbar with links

多链接的导航条Multiple links

图标文字型的链接导航条Links with icons + text

只带图标的链接Links with icons only

相关的视图对象方法Related View methods

自动隐藏导航条Hide Navbar automatically

与导航条相关的应用方法Related App methods

动态导航条Dynamic Navbar

动态导航条布局Dynamic Navbar Layout

预设（淡化）过渡

滑动过渡Sliding transition

返回链接图标动态化Animate back-link icon

工具条Toolbar

工具条布局Toolbar layout

相关的视图方法Related View methods

自动隐藏工具条Hide Toolbar automatically

标签条Tab bar

标签条布局Tab bar layout

在图标上添加提示标签Add badges to icons

带有名称的标签条Tab bar with labels

搜索条Search Bar Layout

搜索条例子Search Bar Example

搜索条javascript事件Search Bar JavaScript Events

相关方法Related App Methods

状态条覆盖Status bar overlay

侧边栏Side Panels

打开或关闭侧边栏Open and Close Panels

侧边栏事件Panel Events

滑动打开侧边栏

监测侧边栏是否打开Panel is Opened?

内容块Content block

布局网格Layout Grid

模态对话框Modal

预定义的模态对话框Predefined Modals

提醒对话框Alert

确认模态对话框Confirm

对话模态对话框Prompt

登陆和密码Login and Password

嵌套模态对话框Nesting Modals

预加载模态对话框Preloader Modal