1. 从页面A导航到B，导航后，A的DOM保留；回退后，B的DOM默认移除
2. 页面回调、事件中均可以访问页面数据，这意味着页面已经解析完毕，如果使用Template7模板，此时模板已经转换为目标HTML。因此尝试在页面回调、事件中为Template7模板提供上下文，均是不可取的
3. 在preprocess回调中，不能进行路由，会导致错误

导航到子页面时报错：Uncaught SyntaxError: Unexpected token

原因：F7要求规范化的JSON格式，所有对象属性必须用双引号包围。

The post Framework7知识集锦 appeared first on 绿色记忆.

Template7是一个移动优先（mobile-first）的模板引擎，其使用Handlebars风格的语法。

T7非常轻量，速度很快。F7已经内置T7，无需包含额外的JS文件。T7也可以单独使用。

使用T7时，性能瓶颈会出现在编译阶段——把字符串编译为纯粹的JavaScript函数时，亦即调用

Template7.compile()

1. {{title}}

     输出当前上下文中title变量的值

2. {{../title}}

    输出父上下文中title变量的值

3. {{../../title}}

    输出父父上下文中title变量的值

4. {{this}}

    输出当前上下文对象

5. {{person.name}}

     输出当前上下文中person变量name属性的值

6. {{../person.name}}

    输出父上下文中person变量name属性的值

7. {{@index}}

    访问额外数据变量，这些数据变量可以在助手中访问

1. {{#helperName}}

    块表达式开始

2. {{/helperName}}

    块表达式结束

3. {{else}}

    反转块表达式开始

4. {{#helperName name="value"}}

    块表达式开始，提供一个哈希参数（Hash argument），此参数的名/值分别为name/value

举例：

{{join myArray delimiter=", "}} 

用于遍历传入的数组的元素/对象的属性。在此助手内部，可以访问额外变量：

1.  

   @index

    仅在遍历数组时有效，当前迭代的索引

2. @first

    仅在遍历数组时有效，当前是否第一个元素

3. @last

    仅在遍历数组时有效，当前是否最后一个元素

4. @key

    仅在遍历对象时有效，当前属性的名称

遍历数组的例子：

<script type="text/template7" id="example">
    <p>People list: </p>
    <ul>
        {{#each people}}
        <li>{{firstName}} {{lastName}}</li>
        {{else}}
        <li>No people</li>   
        {{/each}} 
    </ul>
</script>

<script type="text/javascript">
    app.templates.example( {
        people : [ {
            firstName : 'Alex',
            lastName : 'Wong'
        }, {
            firstName : 'Meng',
            lastName : 'Lee'
        }, ]
    } );
</script>
<!-- 输出如下： -->
<p>People list: </p>
<ul>
  <li>Alex Wong</li>
  <li>Meng Lee</li>
</ul>   

<script type="text/javascript">
    app.templates.example( {} );
</script>
<!-- 输出如下： -->
<p>People list: </p>
<ul>
  <li>No people</li>
</ul>

遍历对象的例子：

<script type="text/template7" id="example">
    <p>People list: </p>
    <ul>
        {{#each alex}}
        <li>{{@key}}: {{this}}</li>
        {{/each}} 
    </ul>
</script>

<script type="text/javascript">
    app.templates.example( {
        alex : {
            firstName : 'Alex'
            lastName : 'Wong'
        }
    } );
</script>
<!-- 输出如下： -->
<p>People list:</p>
<ul>
    <li>firstName: Alex</li>
    <li>lastName: Wong</li>
</ul>

 用于进行分支判断，只有传入的上下文变量不是false时，才会渲染if分支中的内容。下面是一个例子：

<script type="text/template7" id="example">
    <a href="#" {{#if active}}class="active"{{/if}}>{{title}}</a>
</script>

<script type="text/javascript">
    app.templates.example( {
        active : true,
        title : 'Link'
    } );
</script>
<!-- 输出如下： -->
<a href="#" class="active">Link</a>

与上一个助手类似，但是在传入的上下文变量是false时，渲染unless分支的内容。 

用于修改上下文对象。下面是一个例子：

<script type="text/template7" id="example">
    {{#with a}}
    <a href="#" {{#if active}}class="active"{{/if}}>{{title}}</a>
    {{/with}}
</script>

<script type="text/javascript">
    app.templates.example( {
        a : {
            active : true,
            title : 'Link'
        }
    } );
</script>
<!-- 输出如下： -->
<a href="#" class="active">Link</a>

如果块表达式中的助手名称是上下文中的变量，则效果与

{{#each variableName}}

基于分隔符把数组元素连接为字符串。

返回转移后的HTML字符串，HTML特殊字符被转写为

&**;

立即执行一个JavaScript表达式，并把返回值输出。

要访问当前上下文对象，必须使用

this

T7允许通过下面的方法注册新的助手：

/**
 * @param name 助手的名称
 * @param helper 助手函数，用于处理上下文
 */
Template7.registerHelper(name, helper);
/**
 * 助手函数规格，在此函数中，this指向表达式的执行上下文
 * @param condition 包含传递进来的上下文或条件，例如{{#if true}}中condition为true
 * @param options 包含若干属性和方法：
 *      hash 传递给助手的哈希参数对象
 *      fn 调用此方法，把块表达式的内容传递给编译器处理
 *      inverse 调用此方法，把反转块表达式（{{else}}）的内容传递给编译器处理
 *      data 包含额外的表达式数据，例如@index
 * @return 可选，助手输出的内容
 */
function helper(condition, options) {}

若要解除注册，可以调用：

Template7.unregisterHelper(name)

/* 简单的join助手 */
Template7.registerHelper( 'join', function( arr, options ) {
    if ( typeof arr === 'function' ) arr = arr.call( this );
    //返回值直接输出到助手在模板中的位置
    return arr.join( options.hash.delimiter );
} );

/* ifeq助手：{{#ifeq var1 var2}}..{{else}}..{{/if}} */
Template7.registerHelper( 'ifeq', function( var1, var2, options ) {
    if ( var1 == var2 ) {
        return options.fn( this, options.data );
    }
    else {
        return options.inverse( this, options.data );
    }
} );

全局上下文可以在任何地方访问，使用

Template7.global

Template7.global = {
    os : 'iOS',
    browser : 'Chrome',
    username : 'Alex'
};

访问全局上下文，必须使用前缀

{{@global.}}

某些时候需要访问传递给模板的根上下文对象，此时可以使用

{{@root}}

<script type="text/template7" id="example">
{{#each persons}}
    <h2>{{name}}</h2>
    {{#if @root.showHobby}}
        <h3>Hobby:</h3>
        <ul>
            {{#each hobby}}
                <li>{{this}}</li>
            {{/each}}
        </ul>
    {{/if}}
{{/each}} 
</script>

<script type="text/javascript">
    app.templates.example( {
        persons : [ {
            name : 'Alex',
            hobby : [ 'Clectronics', 'Biology' ]
        }, {
            name : 'Meng',
            hobby : [ 'Accountancy' ]
        },

        ],
        showHobby : true
    } );
</script>

在特殊标签中定义的模板，可以被F7自动编译：

<!-- 
    type="text/template7" 告诉F7这是一个T7模板，可以被自动编译
    id="myTemplate" 指定模板的标识符，后续可以依据此标识符访问
-->
<script type="text/template7" id="iTemplate">
    <p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>

需要在应用初始化参数中启用自动编译功能：

var app = new Framework7( {
    // 在初始化阶段自动编译模板
    precompileTemplates : true,
} );

所有编译好的模板会存放到对象

Template7.templates

app.templates

var iHTML = Template7.templates.iTemplate( {
    name : 'Alex Wong',
    age : 30
} );

片段就是普通模板，只是它们供其它模板调用。通过片段，可以实现模板重用。通过下面的方法可以注册/解除注册片段：

/**
 * 注册片段
 * 
 * @param name 片段的名称
 * @param template 片段的内容，字符串
 */
Template7.registerPartial( name, template );
/**
 * 解除注册片段
 * 
 * @param name 片段的名称
 */
Template7.unregisterPartial( name );

通过特殊的助手：

{{> "partialName"}}

T7片段的一个强大特性是，片段可以调用自身。下面是一个嵌套评论（针对评论的回复）的例子：

/* 此模板只包含一个对片段的调用 */
var template = '{{> "comments"}}';
/* 注册片段  */
Template7.registerPartial(
    'comments', 
    '<ul>' + 
        '{{#each comments}}' +
            '<li>' +
            '<h2>{{author}}</h2>' +
            '<p>{{text}}</p>' +
            '{{#if comments}}{{> "comments"}}{{/if}}' + //如果有针对评论的评论，则递归调用 
            '</li>' +
        '{{/each}}' +
    '</ul>'
);
// 编译模板
var compiledTemplate = Template7.compile( template );

// 渲染模板
var output = compiledTemplate( {
    comments : [ {
        author : 'Meng Lee',
        text : 'Good article!',
        comments : [ {
            author : 'Alex Wong',
            text : 'Thanks!'
        }, {
            author : 'CaiCai Wong',
            text : 'Very funny.'
        } ]
    }, {
        author : 'WenJun Wong',
        text : 'Not good!'
    } ]
} );

输出结果如下： 

<ul class="comments">
    <li>
        <h2>Meng Lee</h2>
        <p>Good article!</p>
        <ul class="comments">
            <li>
                <h2>Alex Wong</h2>
                <p>Thanks!</p>
            </li>
            <li>
                <h2>CaiCai Wong</h2>
                <p>Very funny.</p>
            </li>
        </ul>
    </li>
    <li>
        <h2>WenJun Wong</h2>
        <p>Not good!</p>
    </li>
</ul>

在Framework7学习笔记（一）中我们提到过F7处理页面的4种方式，最后一种Template7页面在这里讲解。

F7允许把新的Ajax页面、Dynamic页面作为Template7模板来解析，要启用此功能，需要提供应用初始化参数：

var myApp = new Framework7({
    template7Pages: true
});

要解析模板，必须提供必要的上下文（数据）对象。可以通过应用初始化参数template7Data设置全局的上下文：

var myApp = new Framework7({
    template7Pages: true,
    //指定上下文对象
    template7Data: {
        // 下面这个上下文专用于URL为about.html的页面（模板）
        'url:about.html': {
            name: 'John Doe',
            age: 38,
            company: 'Apple',
            position: 'Developer'
        },
        // 下面这个上下文专用于名称为contacts（data-page="contacts"）的页面（模板）
        'page:contacts': {
            tel: '(999)-111-22-33',
            email: 'contact@john.doe'
        },
 
        // 简单数据对象（Plain data object）
        'languages': {
            'frontend': [
                { name:'JavaScript', desc: 'Most commonly used as part of web browsers' },
                { name:'CSS' ,desc: 'Style sheet language used for describing the look and formatting of a document'},
            ],
            'backend': [
                { name: 'PHP', desc: 'Server-side scripting language designed for web development' },
                { name: 'Ruby', desc: 'Dynamic, reflective, object-oriented, general-purpose programming language'}
            ]
        }
    }
});

可以看到，上下文对象分为三种：

1. url:*，用于特定URL的页面（模板）的上下文
2. page:*，用于特定名称页面（模板）的上下文
3. 简单数据对象：用于提供可供不同页面（模板）重用的、定制化的上下文

在任何时候你都可以修改模板上下文对象，你可以通过全局对象

Templates.data

app.template7Data

template7Data中提供的简单数据对象，用于提供复杂的、定制化的上下文。利用普通链接和

data-context-name

下面的代码示意了如何使用简单数据对象作为模板上下文：

<!-- 模板languages.html将使用上下文app.template7Data.languages来渲染  -->
<a href="languages.html" class="item-link item-content" data-context-name="languages">
    <div class="item-inner">
        <div class="item-title">Languages</div>
    </div>
</a>

<div class="page" data-page="languages">
  <div class="page-content">
    <div class="content-block-title">Frontend</div>
    <div class="list-block">
      <ul>
        <!-- 遍历app.template7Data.languages.frontend -->
        {{#each this.frontend}}
        <li>
          <!-- 嵌套的模板，支持基于点号导航（languages.frontend.1是合法的）来访问子对象 -->
          <a href="language-details.html" class="item-link item-content" data-context-name="languages.frontend.{{@index}}">
              <div class="item-inner">
                <div class="item-title">{{this.name}}</div>
              </div>
          </a>
        </li>
        {{/each}}
      </ul>
    </div>
  </div>
</div>

<div class="page" data-page="language-details">
  <div class="page-content">
    <div class="content-block-title">{{name}}</div>
    <div class="content-block">
      <p>{{desc}}</p>
    </div>
  </div>
</div>

你也可以通过导航/路由 API来指定上下文对象：

mainView.router.load({
    url: 'language-details.html',
    contextName: 'languages.frontend.0'
})

除了通过template7Data指定的全局上下文以外，你还可以使用即时指定的定制上下文。HTML方式：

<!-- 赋值串行化的JSON对象给data-context属性 -->
<a href='contacts.html' data-context='{"tel": "(999)-111-22-33", "email": "contact@john.doe"}'>Contacts</a>

JavaScript方式：

mainView.router.load( {
    url : 'contacts.html',
    context : {
        tel : '(999)-111-22-33',
        email : 'contact@john.doe'
    }
} );

F7会自动编译

<script id="templateName" type="text/template7">

<a href="#" data-template="templateName"></a>
<a href="#" data-template="templateName" data-context='{"name": "value"}'></a>

或者JavaScript方式：

mainView.router.load( {
    template : Template7.templates.templateName,
    context : {
        name : 'value'
    }
} );

特殊的上下文属性

url_query

<a href="person.html?firstname=Alex&lastname=Wong&age=30">Alex</a>

&nbsp;<div class="page" data-page="person">
    <div class="page-content">
        <p>Hello, my name is {{url_query.firstname}} {{url_query.lastname}}. I am {{url_query.age}} years old.</p>
    </div>
</div>

 Framework7提供了简单易用的插件API，利用这些API你可以扩展自己的F7插件。

只需要为

Framework7.prototype.plugins

/**
 * myPlugin 新插件的名字
 * app 已初始化的F7应用对象
 * params 可选的插件参数
 */
Framework7.prototype.plugins.myPlugin = function( app, params ) {
    //插件代码
};

要引用新插件，只需要将其JS文件包含到HTML中，位于F7主JS文件之后：

<script src="path/to/framework7.js"></script>
<script src="path/to/framework7.myplugin.js"></script>

在F7应用初始化的时候，可以向插件传递参数：

var myApp = new Framework7( {
    pushState : true,
    /*
     * 为myPlugin传递参数
     */
    myPlugin : {
        foo : 'bar'
    }
} );

F7插件系统包含三种扩展机制：

1. hooks：与通常的回调类似，由F7在框架的很多核心部分调用。可以在特定时刻/场景执行插件代码、处理数据
2. prevents：用于阻止F7默认行为，例如阻止默认页面动画而使用自己的
3. processes：类似于预处理器，每个处理方法可以接收被处理数据

插件函数的返回值必须是一个对象，其包括hooks、prevents和processes属性。例如：

return {
    hooks : {
        appInit : function(){}
    }
};

可用的钩子包括：

The post Framework7学习笔记（三）：高级 appeared first on 绿色记忆.

为F7应用添加导航栏和工具栏之前，需要决定使用何种导航/工具栏布局。F7支持三种导航/工具栏布局。

这是最少使用的一种布局，使用该布局时，导航/工具栏随着页面滚动，它们仅仅是页面的一部分，每个页面拥有自己的导航/工具栏：

<!-- 这是一个页面 -->
<div data-page="index" class="page">
    <div class="page-content">
        <!-- 顶部导航栏开始 -->
        <div class="navbar">
            <div class="navbar-inner">
                <div class="center">Awesome App</div>
            </div>
        </div>
        <!-- 导航栏结束-->
        <p>页面主体内容</p>
        <!-- 底部工具栏开始 -->
        <div class="toolbar">
            <div class="toolbar-inner">Hello</div>
        </div>
        <!-- 底部工具栏结束-->
    </div>
</div>

与静态布局类似，每个页面拥有自己的导航/工具栏，但是导航/工具栏不随页面滚动，它们分别固定在顶部/底部，始终可见。启用固定布局很简单，只需要在页面元素上添加样式类：

<div data-page="index" class="page navbar-fixed toolbar-fixed">

这是最常使用的一种方式，一个视图中的所有页面共享导航/工具栏。该布局支持动态导航栏（Dynamic Navbar）：

<div class="view view-main">
    <!-- 视图唯一的导航栏 -->
    <div class="navbar"><div class="navbar-inner"></div></div>
    <!-- 导航栏结束-->
    <!-- 页面容器（pages）元素需要额外的"navbar-through"、"toolbar-through"样式类，分别表示启用贯穿导航栏、工具栏 -->
    <div class="pages navbar-through toolbar-through">
        <!-- 页面 -->
        <div data-page="index" class="page"><div class="page-content"></div></div>
    </div>
    <!-- 视图唯一的工具栏 -->
    <div class="toolbar"></div>
    <!--工具栏结束-->
</div>

F7支持在一个视图内混合使用多种布局方式。例如你可以使用贯穿的导航栏 + 固定的工具栏：

<div class="view view-main">
    <!-- 视图唯一的贯穿导航栏 -->
    <div class="navbar"><div class="navbar-inner"><div class="center"></div></div></div>
    <!-- 为所有页面声明：使用贯穿导航栏、固定工具栏 -->
    <div class="pages navbar-through toolbar-fixed">
        <!-- 一个页面定义  -->
        <div data-page="index" class="page">
            <div class="page-content"></div>
            <!-- 固定工具栏，因此每个页面都需要定义自己的 -->
            <div class="toolbar"><div class="toolbar-inner">Hello</div></div>
        </div>
    </div>
</div>

你也可以不使用导航栏和（或）工具栏，只要不声明它们、同时不在page/pages/view元素上添加冲突的样式类：navbar-fixed、navbar-through、toolbar-fixed、 toolbar-through即可。

所谓导航栏，是位于屏幕顶部的，包含页面标题、导航元素的一个区域。导航栏分为三个部分（左、中、右），这三个部分都可以包含任意HTML，但是F7建议这样使用导航栏： 

1. 左侧部分：用于放置返回链接，可以是图标或者文本
2. 中间部分：显示页面标题
3. 右侧部分：类似于左侧，放置按钮或链接

导航栏内部的结构很简单且自描述：

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">Left</div>
        <!-- 注意，center具有最低的宽度优先级，当空间不够时，center的内容自动被省略，确保左右正常显示 -->
        <!-- 如果center中存放文本，无法显示的内容使用省略号代替，如果放置了自定义元素，则需要小心处理 -->
        <div class="center">Center</div>
        <div class="right">Right</div>
    </div>
</div>

可以在导航栏中添加多种链接：

<div class="navbar">
    <div class="navbar-inner">
        <!-- 要在左右侧添加链接，仅需要为a元素添加link类 -->
        <div class="left"><a href="#" class="link">左侧文本链接</a></div>
        <div class="center">Center</div>
        <div class="right"><a href="#" class="link">右侧文本链接</a></div>
    </div>
</div>

<!-- 每个区域都可以包含多个链接 -->
<div class="left">
    <a href="#" class="link">左侧文本链接1</a>
    <a href="#" class="link">左侧文本链接2</a>
</div>

<div class="left">
    <a href="#" class="link"> 
        <!-- 用样式类icon标注图标，该样式类定义了背景图片 -->
        <i class="icon icon-back"></i> 
        <!-- 使用图标+文本链接时，必须把文本包装在span元素内 -->
        <span>Back</span>
    </a>
</div>

<div class="left">
    <!-- 对于只有图标的链接，需要添加icon-only类，该类确保链接占据44x44像素 -->
    <a href="#" class="link icon-only">
        <i class="icon icon-back"></i>
    </a>
</div>

对于已初始化的视图，我们可以用JavaScript API操控其导航栏：

var app = new Framework7();
var $ = Framework7.$;
var mainView = app.addView('.view-main');
$('.hide-navbar').on('click', function () {
    mainView.hideNavbar();
});
$('.show-navbar').on('click', function () {
    mainView.showNavbar();
});

app.sizeNavbars('.view-main')

使用贯穿布局时，F7允许对某些Ajax页面自动隐藏/显示导航栏：

<!-- 为此页面声明一个空白导航栏 -->
<div class="navbar"><div class="navbar-inner"></div></div>
<!-- 同时为页面添加"no-navbar"样式类 -->
<div data-page="about" class="page no-navbar">
    <div class="page-content"></div>
</div>

注意动态导航栏仅适用于iOS主题 + 贯穿布局。所谓动态导航栏，在页面切换时，其内容具有滑动和淡入淡出效果。

动态导航栏的内部布局和普通导航栏没太大区别，只是你可以为导航栏的左中右三个部分添加额外的样式类。默认的，F7为这三个部分添加淡入淡出效果，如果要启用滑动效果，你可以添加样式类：

<!-- 每个页面可以指定自己的动态导航栏，默认具有淡入淡出切换效果 -->
<!-- 动态导航栏声明在页面外部（从其它html加载为页面、或者创建动态页面时） -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left</a>
        </div>
        <!-- 为中间部分添加滑动效果，注意整个应用的风格应当统一 -->
        <div class="center sliding">Home</div>
        <div class="right">
            <a href="#" class="link">Right</a>
        </div>
    </div>
</div>
<div class="page" data-page="about">页面内容</div>

设置应用初始化参数

animateNavBackIcon: true

F7为动态导航栏添加了几种事件，这些事件的源（Target） 都是

<div class="navbar-inner">

下面的代码演示了该事件的使用：

$$(document).on('navbarInit', function (e) {
    var navbar = e.detail.navbar;
    // 可以访问导航栏对象的以下属性：
    // navbarContainer 链接到导航栏容器元素
    // navbarInnerContainer 链接到导航栏内部容器元素
    var page = e.detail.page
});

当你需要在导航栏添加额外的元素时，可以使用子导航栏。当导航栏隐藏时，子导航栏仍然保持可见。 

在线演示：http://framework7.taobao.org/docs-demos/subnavbar.html

<div class="navbar-inner">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
    <!-- 子导航栏 -->
    <div class="subnavbar">
        <!-- 子导航栏内容，这里存放了三个按钮    -->
        <div class="buttons-row">
            <a href="#tab1" class="button active">Tab 1</a>
            <a href="#tab2" class="button">Tab 2</a>
            <a href="#tab3" class="button">Tab 3</a>
        </div>
    </div>
</div>

工具栏是屏幕上的一个固定区域，可以包含导航元素。不像导航栏，工具栏不包含任何部分，内部可以直接是若干链接。

<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>

默认的，工具栏内的元素均匀的分布在工具栏中。 

以下方法可用于操控已初始化视图中的工具栏：

如果某个Ajax页面不需要显示工具栏，可以在页面上添加样式类：

<!-- no-toolbar表示为该页面隐藏工具栏 -->
<div data-page="about" class="page no-toolbar">

仅用于Material主题，对于iOS主题工具栏默认就在底部。

Material主题常常把工具栏/页签栏置于屏幕上面，导航栏下面。如果要改变此行为，可以为工具栏添加额外的样式类：

<!--  toolbar-bottom导致Material主题的工具栏放置于屏幕底部 -->
<div class="toolbar toolbar-bottom">
    <div class="toolbar-inner"></div>
</div>

页签栏只是工具栏的特例，它包含图标（或者图标+文本），而不仅仅是文本。 

与工具栏类似，只是多一个样式类声明：

<!-- 比工具栏多一个tabbar的样式类 -->
<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>
    </div>
</div>

默认的，页签栏内的元素（链接）均匀的分布在页签栏中。但是要注意以下两点：

1. 在iPhone中，每个元素的大小一致，为屏幕宽度/元素个数
2. 在iPad中，所有元素的被居中显示，元素最小宽度105px

<div class="toolbar tabbar">
    <div class="toolbar-inner">
        <a href="#tab2" class="tab-link">
            <i class="icon demo-icon-2">
                <!-- 只需要图标元素内放置一个span元素，并添加badge样式，即可增加角标 -->
                <span class="badge bg-red">5</span><!-- 红色背景角标，数字5 -->
            </i>
        </a>
        <a href="#tab4" class="tab-link">
            <i class="icon demo-icon-4">
                <span class="badge bg-green">15</span><!-- 绿色背景角标，数字15 -->
            </i>
        </a>
    </div>
</div>

类似的，为图标添加一个兄弟元素，可以显示文本标签：

<a href="#tab1" class="tab-link active">
    <i class="icon demo-icon-1"></i>
    <!-- 文本标签，默认位于图标下方 -->
    <span class="tabbar-label">Label 1</span>
</a>

当页签栏中的元素非常多，屏幕宽度不足以显示时，应该使用可滚动页签栏，当手指划过页签栏时，会自动滚动以显示不可见元素：

<!-- 只需要添加tabbar-scrollable样式类即可 -->
<div class="toolbar tabbar tabbar-scrollable"></div>

如果某个Ajax页面不需要显示页签栏，可以在页面上添加样式类：

<!-- no-tabbar表示为该页面隐藏页签栏 -->
<div data-page="about" class="page no-tabbar">

F7支持当页面向下滚动时，自动隐藏导航/工具栏。

要全局性的启用该功能，可以配置以下应用初始化参数：

1. hideNavbarOnPageScroll：滚动时隐藏导航栏
2. hideToolbarOnPageScroll：滚动时隐藏工具栏
3. hideTabbarOnPageScroll：滚动时隐藏页签栏
4. showBarsOnPageScrollEnd ：滚动到页面底部时显示所有栏

要针对某些特定页面启用该功能，可以在

<div class="page-content">

1. hide-bars-on-scroll
2.  hide-navbar-on-scroll 
3. hide-toolbar-on-scroll 
4. hide-tabbar-on-scroll 

在全局启用时，可以使用下面的样式类，针对特定页面禁用此功能：

1. keep-bars-on-scroll
2. keep-navbar-on-scroll
3. keep-toolbar-on-scroll
4. keep-tabbar-on-scroll 

搜索栏可以对列表视图（List View）执行搜索，或者作为自定义搜索实现的视觉元素。

在线演示：http://framework7.taobao.org/docs-demos/searchbar.html

搜索栏应该放置在

.page

.page-content

<!-- 页面 -->
<div class="page">
    <!-- 搜索栏 -->
    <form class="searchbar"><!-- 搜索栏容器元素，推荐使用form -->
        <div class="searchbar-input">
            <input type="search" placeholder="Search"><!-- 搜索栏 -->
            <a href="#" class="searchbar-clear"></a><!-- 可选元素，用于清空输入值的按钮，可选 -->
        </div>
        <a href="#" class="searchbar-cancel">Cancel</a><!-- 取消搜索，隐藏搜索栏，清空结果过滤，可选 -->
    </form>
    <!-- 搜索栏overlay，深色的、覆盖在页面内容上面的一层内容，可选 -->
    <div class="searchbar-overlay"></div>
    
    <!-- 页面内容部分 -->
    <div class="page-content">
        <!-- searchbar-not-found：如果找不到匹配的元素，显示此div -->
        <div class="content-block searchbar-not-found">Nothing found</div>
        <!-- list-block-search：被搜索的列表块 -->
        <!-- searchbar-found：如果找到匹配的元素，显示此div -->
        <div class="list-block list-block-search searchbar-found"></div>
    </div>
</div>

除了搜索栏布局，我们还需要调用API初始化它：

/**
 * 初始化一个搜索栏
 * @param searchbarContainer 搜索栏容器元素，HTMLElement或者CSS选择器
 * @param parameters 搜索栏初始化参数
 * @return 已初始化的搜索栏实例
 */
app.searchbar(searchbarContainer, parameters);

//示例：
var mySearchbar = app.searchbar( '.searchbar', {
    searchList : '.list-block-search',
    searchIn : '.item-title'
} );

你也可以通过HTML初始化搜索栏：

<div class="page">
    <!-- 为搜索栏添加searchbar-ini属性，则F7自动初始化之 -->
    <!-- data-*属性提供初始化参数，连字符小写风格 -->
    <form class="searchbar searchbar-init" 
        data-search-list=".list-block-search" 
        data-search-in=".item-title" 
        data-found=".searchbar-found" 
        data-not-found=".searchbar-not-found">
        <div class="searchbar-input">
            <input type="search" placeholder="Search">
            <a href="#" class="searchbar-clear"></a>
        </div>
        <a href="#" class="searchbar-cancel">Cancel</a>
    </form>
    <div class="searchbar-overlay"></div>
    <div class="page-content">
        <div class="content-block searchbar-not-found"></div>
        <div class="list-block list-block-search searchbar-found"></div>
    </div>
</div>

通过下面的方式可以获得DOM关联的搜索栏实例：

var searchbar = $$('.searchbar')[0].f7Searchbar; //通过该属性访问
searchbar.search('Hello world');

<div class="list-block">

 状态栏是指设备屏幕顶端的一个窄条，包含信标、电量、时间等信息。F7框架中和状态栏相关的主题是状态栏overlay。

iOS7+系统允许你创建全屏应用程序，但是状态栏可能覆盖应用程序的内容。F7能够处理该问题，当应用程序处于全屏状态时，F7会自动检测到并添加

with-statusbar-overlay

<html>

该样式类自动在应用程序顶端添加20像素的补白，从而防止状态栏覆盖掉用程序内容。

你可以控制全屏应用状态栏的背景色：

<style>
    /*修改状态栏背景色*/
    .statusbar-overlay {
        background: pink;
    }
</style>
<body>
  <div class="statusbar-overlay"></div>
</div>

.statusbar-overlay

<html>

with-statusbar-overlay

注意：

1. Home界面中的Web应用，其状态栏总是白色，无法改变
2. Apache Cordova 应用的状态栏默认总是黑色，F7无法修改。你可以使用Cordova插件

   cordova-plugin-statusbar

    来定制状态栏颜色

侧边栏是从左侧或者右侧滑动进入屏幕，并且覆盖在页面主体内容上方的组件。

<body>
    <!-- 需要增加此元素，以便侧面板能够覆盖在应用主体内容上方（z-index） -->
    <div class="panel-overlay"></div>
    <!-- 左侧面板，打开时特效：移动应用主体内容 -->
    <div class="panel panel-left panel-reveal"></div>
    <!-- 右侧面板，打开时特效：覆盖应用主体内容  -->
    <div class="panel panel-right panel-cover"></div>
</body>

<body>
    <div class="panel-overlay"></div>
    <div class="panel panel-left panel-reveal">
        <div class="content-block">
            <!--  close-panel类用于关闭面板 -->
            <p><a href="#" class="close-panel">关闭当前面板</a></p>
            <!--  open-panel类用于打开面板，data-panel用于指定操作目标 -->
            <p><a href="#" data-panel="right" class="open-panel">打开右侧面板</a></p>
        </div>
    </div>
</body>

/**
 * 打开面板
 * @param position 打开哪一侧面板，"left" 或 "right"
 */
app.openPanel(position);
/**
 * 关闭当前打开的面板
 */
app.closePanel();

<div class="panel">

F7支持通过滑动手势打开面板，但是只有左侧或者右侧面板中的一个可以启用该手势：

var app = new Framework7( {
    swipePanel : 'left' //让左侧面板支持滑动手势
} );

其它与面板相关的应用初始化参数包括：swipePanelCloseOpposite、 swipePanelOnlyClose、swipePanelActiveArea、swipePanelNoFollow、swipePanelThreshold。

当面板处于打开状态时，F7会给

<body>

with-panel-[position]-[effect]

1. position区分左右面板，取值left或right
2. effect表示面板打开效果，取值reveal或cover

下面的代码测试当前是否以覆盖方式打开了左侧面板：

if ($$('body').hasClass('with-panel-left-cover')) {
    console.log('左侧面板处于打开状态')
}

内容块主要用于为文本内容添加额外的格式或边距： 

<div class="page-content">
    <p>页面中普通的，位于内容块之外的文本</p>

    <!-- 内容块 -->
    <div class="content-block">
        <p>内容块中的文本颜色改变，且和四周有额外的边距</p>
    </div>

    <!-- 内容块 + inner容器 -->
    <div class="content-block">
        <div class="content-block-inner">内容块背景颜色改变</div>
    </div>

    <div class="content-block-title">为内容块添加标题</div>
    <div class="content-block"><p></p></div>

    <!-- 带有内凹效果的内容块，在iOS主题中表现为圆角边框、额外的边距-->
    <div class="content-block inset">
        <div class="content-block-inner"><p></p></div>
    </div>
    <!-- 仅在面板电脑中有内凹效果的内容块 -->
    <div class="content-block tablet-inset">
        <div class="content-block-inner"><p></p></div>
    </div>
</div>

使用 F7的布局网格，我们可以灵活的在页面中定位自己的组件。

<!-- 布局表格以行包装列的形式出现 -->
<div class="row"><!-- 包含两列的一行 -->
    <!-- 每个单元格被添加样式类col-*，*表示占据的宽度百分比 -->
    <div class="col-50">50%</div>
    <div class="col-50">50%</div>
</div>
<!-- 默认的，单元格之间有15像素的空隙，添加no-gutter则无空隙 -->
<div class="row no-gutter"><!-- 包含三列的一行 -->
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
</div>

用于指定网格的单元格的宽度的样式类包括：

1. col-*

    ：其中*为5/10/15...90/95.100，数字代表占据的相对宽度。设置样式类为col-auto的单元格，平均分配剩余的宽度

2. tablet-*

    ：与上面类似，用于平板类型（窗口宽度大于768像素时）

默认情况下，F7没有给单元格添加任何样式，可以参考如下的CSS语法统一添加：

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

 这一大类的F7组件都在z-index方向覆盖在应用主体内容之上，它们都属于临时视图（Temporary Views）的一部分。

模态是一系列包含了简短内容的小面板，类似于居中于屏幕的弹出窗口。模态通常用于向用户提问，或者给用户发出通知。

F7预定义了一些常用的模态组件，例如警告框、确认框等。这些模态组件的标题、按钮文本的默认值可以通过modalTitle、modalPreloaderTitle 、modalButtonOk、modalButtonCancel 等应用初始化参数修改。

/**
 * @param text 信息内容
 * @param title 可选的标题
 * @param callbackOk 点击OK按钮后执行的回调函数
 * @return 动态创建的模态HTML元素
 */
app.alert(text, [title, callbackOk]);

/**
 * @param text 提示内容
 * @param title 提示标题
 * @param callbackOk 点击OK按钮时执行的回调
 * @param callbackCancel 点击Cancel按钮时执行的回调
 */
app.confirm(text, [title, callbackOk, callbackCancel]);

/**
 * @param text 提示内容
 * @param title 提示标题
 * @param callbackOk 点击OK按钮时执行的回调
 * @param callbackCancel 点击Cancel按钮时执行的回调
 */
app.prompt(text, [title, callbackOk, callbackCancel]);
/**
 * 上面两个回调函数的签名
 * @param value 用户在文本框输入的值
 */
function callback(value);

/**
 * @param text 登录框内容
 * @param title 登录框标题
 * @param callbackOk 点击OK按钮时执行的回调
 * @param callbackCancel 点击Cancel按钮时执行的回调
 */
app.modalLogin( text, [ title, callbackOk, callbackCancel ] );
/**
 * 上述两个回调函数的签名
 * @param username 用户输入的用户名
 * @param password 用户输入的密码
 */
function callback(username, password);

/**
 * @param text 密码框内容
 * @param title 密码框标题
 * @param callbackOk 点击OK按钮时执行的回调
 * @param callbackCancel 点击Cancel按钮时执行的回调
 */
app.modalPassword( text, [ title, callbackOk, callbackCancel ] );
/**
 * 上述两个回调函数的签名
 * @param password 用户输入的密码
 */
function callback(password);

/**
 * 显示预加载器
 * @param title 预加载标题，默认从应用初始化参数modalPreloaderTitle中获得
 */
app.showPreloader([title]);
/**
 * 隐藏预加载器
 */
app.hidePreloader();

app.showIndicator();// 显示指示器
app.hideIndicator();// 隐藏指示器

上表中所有预定义模态组件，实际上都属于“快捷方式”，它们最终都是调用下面的函数实现功能的： 

/**
 * 新建一个模态组件
 * @param parameters 初始化参数
 * @return 动态创建的代表了模态组件的HTMLElement
 */
app.modal(parameters);

定制的模块组件的内容可以相当丰富，下面是两个例子：

var modal = app.modal( {
    title : '照片墙',
    text : '你觉得我的照片怎么样',
    //文本后的内容被替换为Swiper Slider组件
    afterText : 
        '<div class="swiper-container" style="width: auto; margin:5px -15px -15px">' + 
            '<div class="swiper-pagination"></div>' + 
            '<div class="swiper-wrapper">' + 
                '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>' + 
                '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>' + 
            '</div>' + 
        '</div>',
    buttons : [ {
            text : '一般般'
        }, {
            text : '太好了',
            bold : true,
            onClick : function() {
                app.alert( '谢谢！' );
            }
        }
    ]
} );
app.swiper( $$( modal ).find( '.swiper-container' ), {
    pagination : '.swiper-pagination'
} );

/**
 * 该模态组件显示两个页签
 */
app.modal( {
    //标题被设置为切换页签的按钮
    title : '<div class="buttons-row">' + 
                '<a href="#tab1" class="button active tab-link">页签一</a>' + 
                '<a href="#tab2" class="button tab-link">页签二</a>' +
             '</div>',
    //文本被设置为两个页签
    text : '<div class="tabs">' + 
               '<div class="tab active" id="tab1">页签一的内容</div>' + 
               '<div class="tab" id="tab2">页签二的内容</div>' + 
           '</div>',
    buttons : [ {
        text : '确定',
        bold : true
    } ]
} );

{
    //按钮的文本，可以是HTML
    string text;
    //是否用粗体显示按钮文本
    boolean bold = false;
    //点击该按钮后，模态组件是否自动关闭
    boolean close = true;
    //点击该按钮时执行的回调
    function onClick();
}

/**
 * 关闭一个模态窗口
 * @param modal 代表模态组件的CSS选择器或者HTMLElement
 */
app.closeModal(modal);

<div class="modal">

通过传递应用初始化参数

modalTemplate

<div class="modal {{#unless buttons}}modal-no-buttons{{/unless}}"><!-- 如果定义了按钮 -->
  <div class="modal-inner">
    <!--  如果定义了标题 -->
    {{#if title}}
      <div class="modal-title">{{title}}</div>
    {{/if}}
    <!--  如果定义了文本 -->
    {{#if text}}
       <div class="modal-text">{{text}}</div>
    {{/if}}
    <!--  如果定义了文本后内容 -->
    {{#if afterText}}
      {{afterText}}
    {{/if}}
  </div>
  {{#if buttons}}
    <div class="modal-buttons">
      <!-- 遍历所有按钮 -->
      {{#each buttons}}
        <span class="modal-button {{#if bold}}modal-button-bold{{/if}}">{{text}}</span>
      {{/each}}
    </div>
  {{/if}}
</div>

这类弹窗覆盖F7应用的主体内容上面，默认从屏幕底部滑动进入。在手机上具有全屏效果，在平板上默认630像素宽高。

<body>
  <!-- 额外的样式类tablet-fullscreen让Popup在平板上也全屏 -->
  <div class="popup tablet-fullscreen"></div>
</body>

<body>
    <div class="page-content">
        <div class="content-block">
            <!-- 样式类open-popup用于打开Popup弹窗（可用于任何HTML元素，不仅仅是a），data-popup指定Popup的CSS选择器 -->
            <p><a href="#" data-popup=".popup-about" class="open-popup">Open About Popup </a></p>
        </div>
    </div>
    <!-- 额外的样式类popup-about相当于该弹窗的标识符 -->
    <div class="popup popup-about">
        <div class="content-block">
            <!-- 样式类close-popup用于关闭当前打开的弹窗 -->
            <p><a href="#" class="close-popup">Close popup</a></p>
        </div>
    </div>
</body>

/**
 * 打开Popup弹窗
 * @param popup HTMLElement或者String（CSS选择器）
 */
app.popup(popup);
/**
 * 关闭Popup弹窗
 * @param popup
 *     HTMLElement或者String（CSS选择器）
 *     如果省略该参数，则关闭任何打开的Popup或其它模态组件
 */
app.closeModal(popup);

<div class="popup">

F7提供了一个动态创建、打开Popup弹窗的函数：

/**
 * 动态打开一个Popup弹窗
 * @param popupHTML Popup的HTML内容
 * @param removeOnClose 默认true，是否在关闭时移除Popup的DOM
 */
app.popup(popupHTML, removeOnClose);

下面是一个例子：

$$('.create-popup').on('click', function () {
  var popupHTML = 
     '<div class="popup">'+
       '<div class="content-block">'+
         '<p>Popup created dynamically.</p>'+
         '<p><a href="#" class="close-popup">关闭</a></p>'+
       '</div>'+
     '</div>';
  app.popup(popupHTML);
});

Popover类似于ExtJS的Tips，是一个展示临时信息的较小的弹出窗口。当用户触碰空白处时，Popover自动关闭。Popover默认宽度是320px。

在小屏幕上，不建议使用Popover，最好使用操作列表（Action Sheet）代替。

<body>
    <div class="popover">
        <!-- Popover的小箭头 -->
        <div class="popover-angle"></div>
        <!-- Popover的内容 -->
        <div class="popover-inner">
            <!-- 这里面可以包含任何HTML内容 -->
        </div>
    </div>
</body>

<body>
    <div class="page-content">
        <div class="content-block">
            <!-- open-popover用于打开Popover弹窗 -->
            <p><a href="#" data-popover=".popover-about" class="open-popover">打开</a></p>
        </div>
    </div>
    <div class="popover popover-about">
        <div class="popover-angle"></div>
        <div class="popover-inner">
            <!-- close-popover用于关闭目前打开的Popover弹窗 -->
            <div class="content-block"><a href="#" class="close-popover">关闭</a></div>
        </div>
    </div>
</body>

通过HTML打开的Popover，其显示位置会自动计算（在打开Popover的元素的周围），以确保正确显示。

/**
 * 打开一个Popover弹窗
 * @param popover 目标弹窗的HTMLElement或者CSS选择器
 * @param target 针对的元素，弹窗会在此元素的周围定位
 */
app.popover(popover, target);
/**
 * 关闭一个Popover弹窗
 * @param popover 
 *     目标弹窗的HTMLElement或者CSS选择器
 *     如果忽略此参数，则任何打开的Popover都被关闭
 */
app.closeModal(popover);

和Popover类似，Popover也可以动态创建和展示： 

/**
 * 动态创建并打开一个Popover弹窗
 * 
 * @param popover
 *          Popover的HTML内容
 * @param target
 *          针对的元素，弹窗会在此元素的周围定位
 * @param removeOnClose
 *          默认true，是否在关闭时移除Popover的DOM
 */
app.popover( popoverHTML, target, removeOnClose );

与Popup类似，事件的Target是

<div class="popover">

操作列表通常表现为从屏幕底部滑动进入的、包含若干纵向排列按钮的弹窗。操作列表可以把按钮分成若干组。可以通过操作列表，让用户确认潜在危险的操作。

不建议在大屏幕（平板）上使用操作列表，最好用Popover代替。

操作列表属于动态组件，只能通过JavaScript创建和打开：

/**
 * 创建并打开由若干按钮组构成的操作列表
 * @param groups 相当于button[][]，按钮组的数组，每个按钮组则是button的数组
 * @return 动态创建的、代表操作列表的HTMLElement
 */
app.actions( groups );
/**
 * 创建并打开由若干按钮构成的操作列表（单个组）
 * @param buttons 按钮的数组
 * @return 动态创建的、代表操作列表的HTMLElement
 */
app.actions( buttons );

上述groups、buttons的最内层元素是按钮的配置对象： 

由于屏幕大小的原因，F7不建议：在手机上使用Popover；或者在平板上使用Action Sheet。为了让单份代码能够同时适用手机和平板，F7提供了操作列表到Popover的转换机制：

/**
 * 这两个函数，在手机上创建的是操作列表，而在平板上创建的则是Popover
 * @target HTMLElement或者CSS选择器，当作为Popover时，在哪个元素周围弹出
 * @groups 操作列表/Popover包含的按钮组的数组
 * @buttons 操作列表/Popover包含的按钮的数组
 */
app.actions(target, groups);
app.actions(target, buttons);

默认的，操作列表在以下情况下自动关闭：

1. 当其中某个按钮被点击时
2. 当触碰操作列表外部的屏幕空间时（可通过应用初始化参数modalActionsCloseByOutside定制） 

 如果要手工关闭操作列表，可以调用：

app.closeModal(actionSheet)

与Popup、Popover类似，操作列表具有4个相关事件，这些事件的Target均为

<div class="actions-modal">

通过传递应用初始化参数

modalActionsTemplate

<div class="actions-modal">
  <!-- this表示单个组 -->
  {{#each this}}
    <div class="actions-modal-group">
      <!-- this表示单个按钮 -->
      {{#each this}}
          {{#if label}}
            <span class="actions-modal-label">{{text}}</span><!-- 作为标题 -->
          {{else}}
            <div class="actions-modal-button {{#if color}}color-{{color}}{{/if}} {{#if bold}}actions-modal-button-bold{{/if}}">{{text}}</div>
          {{/if}}
      {{/each}}
    </div>
  {{/each}}
</div>

如果你使用操作列表到Popover的转换，则还可以传递应用初始化参数

modalActionsToPopoverTemplate

<div class="popover actions-popover">
  <div class="popover-inner">
    <!-- 每个按钮组转换为一个列表块 -->
    {{#each this}}
    <div class="list-block">
      <ul>
        <!-- 每个按钮转换为一个列表条目 -->
        {{#each this}}
        {{#if label}}
        <li class="actions-popover-label {{#if color}}color-{{color}}{{/if}} {{#if bold}}actions-popover-bold{{/if}}">{{text}}</li>
        {{else}}
        <li><a href="#" class="item-link list-button {{#if color}}color-{{color}}{{/if}} {{#if bg}}bg-{{bg}}{{/if}} {{#if bold}}actions-popover-bold{{/if}} {{#if disabled}}disabled{{/if}}">{{text}}</a></li>
        {{/if}}
        {{/each}}
      </ul>
    </div>
    {{/each}}
  </div>
</div>

大部分应用程序都有登录功能， 因此F7内置了登录屏幕组件。

<body>
  <!-- 登录屏幕应当是body的直接子元素 -->
  <div class="login-screen">
      <!-- 所有子元素都是可选的 -->
      <!-- 默认的视图-页面布局 -->
      <div class="view">
        <div class="page">
          <!-- 页面内容包含额外的login-screen-content类 -->
          <div class="page-content login-screen-content">
            <div class="login-screen-title">登录屏幕标题</div>
            <!-- 登录表单 -->
            <form>
              <div class="list-block">
                <ul>
                  <li class="item-content">
                    <div class="item-inner">
                      <div class="item-title label">用户名</div>
                      <div class="item-input">
                        <input type="text" name="username" placeholder="用户名">
                      </div>
                    </div>
                  </li>
                  <li class="item-content">
                    <div class="item-inner">
                      <div class="item-title label">密码</div>
                      <div class="item-input">
                        <input type="password" name="password" placeholder="密码">
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="list-block">
                <ul>
                  <li>
                    <a href="#" class="item-link list-button">登录</a>
                  </li>
                </ul>
                <div class="list-block-labe">与登录相关的提示信息</div>
              </div>
            </form>
          </div>
        </div>
      </div>
  </div>
</body>

HTML方式：

<a href="#" class="open-login-screen">打开登录屏幕</a>
<a href="#" class="close-login-screen">关闭登录屏幕</a>

JavaScript方式：

/**
 * 打开登录屏幕
 */
app.loginScreen();
/**
 * 关闭登录屏幕
 * @param loginScreen 登录屏幕的TMLElement或者CSS选择器
 */
app.closeModal(loginScreen);

与Popup、Popover、ActionSheet类似，登录屏幕具有4个相关事件，这些事件的Target均为

<div class="login-screen">

某些应用要求先登录后使用，我们可以为登录屏幕添加

modal-in

<body>
    <div class="login-screen modal-in"></div>
</body>

这是一种特殊的Overlay组件，可以用于实现定制的选取器。其内容不受限制，UI默认表现为从屏幕底部滑入的弹窗，右上侧有一个关闭按钮，类似于手机虚拟键盘。

<body>
    <!-- 模态选取器容器元素 -->
    <div class="picker-modal">
        <!-- 可选的工具栏 -->
        <div class="toolbar">
            <div class="toolbar-inner">
                <div class="left"></div>
                <div class="right">
                    <a href="#" class="link close-picker">完成</a>
                </div>
            </div>
        </div>
        <!-- 选取器内部元素 -->
        <div class="picker-modal-inner">
            <!-- 选取器内容，任意自定义HTML -->
            <div class="content-block">
            </div>
        </div>
    </div>
</body>

HTML方式：

<a href="#" data-picker=".picker-1" class="link open-picker">打开选取器</a>
<a href="#" data-picker=".picker-1" class="close-picker">关闭选取器</a>
<div class="picker-modal picker-1">选取器实例</div>

JavaScript方式： 

/**
 * 打开选取器
 * 
 * @param picker
 *            选取器的HTMLElement或者CSS选择器
 */
app.pickerModal( picker );
/**
 * 关闭选取器
 * 
 * @param picker
 *            选取器的HTMLElement或者CSS选择器
 *            如果不指定则关闭任何打开的模态窗口
 */
app.closeModal( picker );

/**
 * 动态创建并打开选取器
 * @param pickerHTML 选取器的HTML
 * @param removeOnClose 是否在关闭选取器时将其从DOM中移除
 */
app.pickerModal(pickerHTML, removeOnClose);

与Popup、Popover、ActionSheet、登录屏幕类似，模态选取器具有4个相关事件，这些事件的Target均为

<div class="picker-modal">

F7自带了基于SVG和CSS动画的的预加载提示器，可以随意的放大缩小，其UI效果是旋转菊花。预加载指示器具有两个版本，分别用于浅色、深色背景。

以模态方式使用预加载指示器，可以通过上一章提到的“预加载器”、“指示器”。

<!-- 默认预加载器  -->
<span class="preloader"></span>
<!-- 白色版本的预加载器，用于深色背景 -->
<span class="preloader preloader-white"></span>
<!-- 指定大小 -->

除了预加载指示器以外，F7还提供另外一种用于提示“正在处理”活动的组件——进度条。进度条分为确定的（Determinate，显示实际进度）、无限的（Infinite）两种。

<!-- 确定的进度条，20%完成进度 -->
<div class="progressbar" data-progress="20">
    <span></span>
</div>
<!-- 也可以用span元素 -->
<span class="progressbar" data-progress="50">
    <span></span>
</span>

<!-- 无限的进度条 -->
<div class="progressbar-infinite"></div>
<span class="progressbar-infinite"></span>
<!-- 多彩效果 -->
<div class="progressbar-infinite color-multi"></div>

/**
 * 设置确定进度条的进度
 * @param container 进度条的容器的HTMLElement或者CSS选择器，默认body
 * @param progress 目标进度，0-100
 * @param speed 到达目标进度的动画耗时，单位ms
 * @return 返回进度条容器元素
 */
app.setProgressbar(container, progress, speed);
/**
 * 隐藏进度条
 * @param container 进度条的容器的HTMLElement或者CSS选择器，默认body
 */
app.hideProgressbar(container);
/**
 * 创建或显示（如果已经创建）进度条
 * @param container 进度条的容器的HTMLElement或者CSS选择器，默认body
 * @param progress 目标进度，0-100
 * @param color 进度条颜色名称
 * @return 返回进度条容器元素
 */
app.showProgressbar(container, progress, color);

//外加两个快捷方法
//在指定容器内打开（显示）某种颜色的无限进度条
app.showProgressbar(container, color);
//在body内打开（显示）color颜色的进度条，当前进度progress
app.showProgressbar(progress, color);

列表视图是多用途、强大的UI组件，在iOS应用中经常可以看到。列表视图在一个可滚动的区域内显示多行数据，可选的，它讲数据分为若干组/段。我们可以用列表视图来：

1. 在层次型数据结构（树形）内进行导航
2. 展现列表中的数据、选项
3. 显示详细信息

<!-- 列表块（List block）：列表块元素是列表视图的包装（wrapper）元素 -->
<!-- 注意不要把list-block放在content-block内 -->
<div class="list-block">
    <!-- ul内是列表视图的全部元素 -->
    <ul>
        <!-- li代表列表视图的元素（条目），其内容相当复杂而灵活 -->
        <li>
            <!-- item-content为必需，作为item-media、item-inner的包装器-->
            <div class="item-content">
                <!-- item-media为可选，用于图标、图片等媒体元素 -->
                <div class="item-media">
                    <i class="icon my-icon"></i>
                </div>
                <!-- item-inner为必需，作为item-title、item-after的包装器 -->
                <div class="item-inner">
                    <!-- 必需，单行的元素标题 -->
                    <div class="item-title">列表元素的标题</div>
                    <!-- 可选，标题后内容，可以是标记（badge）、开关、按钮等任意HTML，默认右侧对齐 -->
                    <div class="item-after">列表元素的标签</div>
                </div>
            </div>
        </li>
    </ul>
    <!-- 可以在列表块的结尾处，添加一个列表块标签 -->
    <div class="list-block-label">列表块标签</div>
</div>

 如果li元素内没有其它内容，你可以把item-content类标注到li元素上，少写一个div：

<li class="item-content">
    <div class="item-media">
        <i class="icon my-icon"></i>
    </div>
    <div class="item-inner">
        <div class="item-title"></div>
    </div>
</li>

很多时候需要在点击列表条目后，链接到其它页面，这时需要为

<div class="item-content">

<li>
    <!-- 额外的包装元素 -->
    <a href="#" class="item-link"> <!-- 导致列表右侧出现额外的箭头（链接）标记 -->
        <div class="item-content">
            <div class="item-media"></div>
            <div class="item-inner"></div>
        </div>
    </a>
</li>
<li>
    <!-- 如果li下没有其它元素，则可以把a、div合并 -->
    <a href="#" class="item-link item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
    </a>
</li> 

可以插入类似下面的li元素，将列表分为两个部分：

<li class="item-divider">Divider title here</li>

可以将不同的列表元素进行分组：

<div class="list-block">
  <!-- 第一个分组 -->
  <div class="list-group">
    <ul>
      <!--  分组的标题 -->
      <li class="list-group-title"></li>
      <li class="item-content"></li>
    </ul>
  </div>
  <!-- 第二个分组-->
  <div class="list-group">
    <ul>
      <li class="list-group-title"></li>
      <li class="item-content">
      </li>
    </ul>
  </div>
</div>

列表块可以是Inset（非全宽度、圆角矩形边框）的：

<div class="list-block inset">
  <ul></ul>
</div>
<!-- 仅在平板电脑上启用Inset效果 -->
<div class="list-block tablet-inset">
  <ul></ul>
</div>

该组件是分组列表的特例，用于显示联系人的列表，其布局如下：

<!-- page-content元素必须有额外的contacts-content类 -->
<div class="page-content contacts-content">
    <!-- list-block元素必须有额外的contacts-block类 -->
    <div class="list-block contacts-block">
        <div class="list-group">
            <ul>
                <li class="list-group-title">汪</li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title">汪震</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title">汪静好</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="list-group">
            <ul>
                <li class="list-group-title">李</li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title">李晓蒙</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

该组件是列表视图的扩展，用于显示更复杂的数据，其布局如下：

<!-- 媒体列表有额外的media-list元素 -->
<div class="list-block media-list">
    <ul>
        <li>
            <!-- 必需的item-content，和列表视图一样，作为item-media、item-inner的包装器 -->
            <div class="item-content">
                <!-- 可选的item-media -->
                <div class="item-media">
                    <img src="path/to/img.jpg">
                </div>
                <div class="item-inner"><!-- 必须 -->
                    <div class="item-title-row"><!-- 类似与列表视图 -->
                        <div class="item-title">元素标题</div>
                        <div class="item-after">元素标签</div>
                    </div>
                    <!--子标题，单行文本 -->
                    <div class="item-subtitle">子标题</div>
                    <!--占两行的额外文本 -->
                    <div class="item-text">额外文本内容</div>
                </div>
            </div>
        </li>
    </ul>
</div>

该组件是列表视图的扩展，支持滑动手势（例如滑动以删除， swipe-to-delete），滑动后可以显示针对列表元素的隐藏按钮。 可滑动列表的布局如下：

<div class="list-block">
    <ul>
        <!-- li元素上需要额外的swipeout类 -->
        <li class="swipeout">
            <!-- swipeout-content、swipeout-actions-left/right必须是直接子元素 -->
            <!-- 元素内容元素外部通常包裹swipeout-content元素 -->
            <div class="swipeout-content">
                <!-- 如果只有item-content这一个子元素，那么它可以和父元素合并 -->
                <div class="item-content">
                    <div class="item-media"></div>
                    <div class="item-inner"></div>
                </div>
            </div>
            <!-- 左侧操作集，手指向右滑动时的显示 -->
            <div class="swipeout-actions-left">
                <!-- 这里可以是按钮、链接-->
                <a href="#">操作1</a>
                <a href="#">操作2</a>
            </div>
            <!-- 右侧操作集，手指向左滑动时的显示 -->
            <div class="swipeout-actions-right">
                <a href="#">操作3</a>
                <!--  swipeout-close，点击后关闭（隐藏）操作集 -->
                <a class="swipeout-close" href="#">操作4</a>
            </div>
        </li>
    </ul>
</div>

F7对滑动删除这一经常使用的特性内置了支持，你只需要在操作集中增加

<a class="swipeout-delete">

<!-- 添加data-confirm，则在删除前会提示用户确认 -->
<!-- 设置data-close-on-cancel为true，当用户点击确认框的取消按钮时，自动关闭当前列表元素的操作集 -->
<a href="#" 
   class="swipeout-delete" 
   data-confirm="真的要删除吗" 
   data-confirm-title="请确认" 
   data-close-on-cancel="true" >删除</a>

F7支持当滑动距离过长时，自动执行：

1. 向左长滑时，自动执行右侧操作集的最后一个按钮上的动作
2. 向右长滑时，自动执行左侧操作集的第一个按钮上的动作

启用长滑时，F7通过脚本触发相应按钮的click事件。在长滑执行期间，目标按钮会添加额外的

swipeout-overswipe-active

启用长滑的示例代码如下：

<div class="swipeout-actions-left">
    <!-- 左侧的第一个按钮，可以添加swipeout-overswipe以启用长滑 -->
    <a href="#" class="swipeout-overswipe bg-green reply">回复</a>
    <a href="#" class="bg-blue forward">转发</a>
</div>
<div class="swipeout-actions-right">
    <a href="#" class="mark bg-orange">标记</a>
    <!-- 右侧的最后一个按钮，可以添加swipeout-overswipe以启用长滑 -->
    <a href="#" class="swipeout-delete swipeout-overswipe">删除</a>
</div>

/**
 * 打开（滑动动画）并显示目标列表条目的操作集
 * @param el 列表条目的HTMLElement（li）或CSS选择器
 * @param direction 显示左侧还是右侧的操作集，left/right
 * @param callback 滑动动画执行完毕时执行的回调
 */
function swipeoutOpen( el, direction, callback );

/**
 * 关闭（滑动动画）目标列表条目并隐藏操作集
 * @param el 列表条目的HTMLElement（li）或CSS选择器
 * @param callback 滑动动画执行完毕时执行的回调
 */
function swipeoutClose( el, callback );

/**
 * 滑动并删除目标列表条目
 * @param el 列表条目的HTMLElement（li）或CSS选择器
 * @param callback 动画执行完毕，即将把li元素从DOM中移除前执行的回调
 */
function swipeoutDelete( el, callback );

<li class="swipeout">

该组件是列表视图的扩展，支持调整条目的顺序，其布局如下：

<!-- 列表块元素上需要额外的sortable样式类 -->
<div class="list-block sortable">
    <ul>
        <li>
            <div class="item-content">
                <div class="item-media"></div>
                <div class="item-inner"></div>
            </div>
            <!-- 一个可拖拽的小图标，用来调整条目的顺序，默认隐藏 -->
            <div class="sortable-handler"></div>
        </li>
    </ul>
</div>

通过HTML：

<!-- data-sortable指定目标可排序列表的CSS选择器  -->
<a href="#" data-sortable=".sortable" class="open-sortable">启用排序</a>
<a href="#" data-sortable=".sortable" class="close-sortable">禁用排序</a>
<a href="#" data-sortable=".sortable" class="toggle-sortable">切换启禁用状态</a>

通过JavaScript：

/**
 * @param sortableContainer
 *            可排序列表（<div class="list-block sortable">）的HTMLElement或者CSS选择器 
 *            如果不指定，F7尝试寻找第一个可排序列表
 */
app.sortableOpen( sortableContainer ); // 启用
app.sortableClose( sortableContainer ); // 禁用
app.sortableToggle( sortableContainer ); // 切换

<div class="list-block sortable">

<li>

使用虚列表，我们可以在不影响性能的前提下展现具有大量元素的列表。虚列表和搜索栏、无限滚动、下拉刷新、滑动删除等F7组件完全兼容 。

<!-- 额外的virtual-list样式类 -->
<div class="list-block virtual-list">
    <!-- 内部保持空白 -->
</div>

需要调用JavaScript API来初始化虚列表的内容：

/**
 * 初始化一个虚列表
 * @param listBlockContainer 列表块（list-block）的HTMLElement或者CSS选择器
 * @param parameters 虚列表初始化参数
 * @return 已初始化的初始化实例
 */
app.virtualList( listBlockContainer, parameters );

注意列表块元素在此时必须已经存在于DOM中，如果当前不是首页，你应当在pageInit事件内初始化虚列表。 

filter()

 注意，上述添加、删除、改变列表元素的方法，其操作结果会立即反应到视图上。

通用的手风琴布局如下：

<!-- 手风琴条目列表 -->
<div class="accordion-list">
    <!-- 手风琴条目 -->
    <div class="accordion-item">
        <!-- 触碰后展开/折叠条目内容，必需 -->
        <div class="accordion-item-toggle"></div>
        <!-- 默认隐藏的条目内容，必需 -->
        <div class="accordion-item-content"></div>
    </div>
    <!-- 处于展开状态的手风琴条目，只能有一个 -->
    <div class="accordion-item accordion-item-expanded">
        <div class="accordion-item-toggle"></div>
        <div class="accordion-item-content"></div>
    </div>
</div>

手风琴布局实质上是多个联动的可折叠条目的集合 ，可收折叠的手风琴条目可以脱离

accordion-list

<div class="accordion-item">
    <div class="accordion-item-toggle"></div>
    <div class="accordion-item-content"></div>
</div>

可以把手风琴布局和列表视图结合起来使用：

<div class="list-block accordion-list">
    <ul>
        <li class="accordion-item"><!-- 使用li代替通用手风琴布局中的div -->
            <a href="" class="item-link item-content"><!-- 使用item-link代替accordion-item-toggle -->
                <div class="item-inner">
                    <div class="item-title">条目标题</div>
                </div>
            </a>
            <div class="accordion-item-content">条目内容</div>
        </li>
    </ul>
</div>

 可以通过如下方式修改手风琴条目展开、折叠时的样式：

<div class="content-block accordion-list custom-accordion">
    <div class="accordion-item">
        <div class="accordion-item-toggle">
            <!--  折叠时的图标，显示一个+号 -->
            <i class="icon icon-plus">+</i>
            <!-- 展开时的图标，显示一个-号 -->
            <i class="icon icon-minus">-</i>
            <span>条目标题</span>
        </div>
        <div class="accordion-item-content">
            <p>条目内容</p>
        </div>
    </div>
</div>
<style>
/* 设置折叠、展开图标的边框为圆形  */
.custom-accordion .icon-plus, .custom-accordion .icon-minus {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid #000;
    border-radius: 100%;
    line-height: 20px;
    text-align: center;
}
</style>

/**
 * @param item
 *            手风琴条目（accordion-item）的HTMLElement或CSS选择器
 */
app.accordionOpen( item ); // 展开手风琴条目
app.accordionClose( item ); // 折叠手风琴条目
app.accordionToggle( item );// 切换手风琴条目的展开/折叠状态

以下4个事件的Target均为

<div class="accordion-item">

1. open 条目打开动画开始时
2. opened 条目打开动画结束时
3. close 条目关闭动画开始时
4. closed 条目关闭动画结束时

类似于列表视图，卡片也是包含和组织相关信息的常用方式。单张卡片常常包含一些相关的图片、文字、连接信息，作为更详细信息的入口，本站的首页就是卡片布局典型的例子。F7完整的支持卡片布局。

<!-- 卡片容器 -->
<div class="card">
    <!-- 卡片头部，常常显示卡片标题，可选 -->
    <div class="card-header">Header</div>
    <!-- 卡片主体部分，必需 -->
    <div class="card-content">
        <!-- 可选的内部包装元素，添加额外的补白 -->
        <div class="card-content-inner">Card content</div>
    </div>
    <!-- 卡片脚注，包含一些附加信息，链接/动作按钮等，可选 -->
    <div class="card-footer">Footer</div>
</div>

注意，卡片头、脚使用flexbox布局（display:flex），在垂直方向默认居中对齐。如果你需要顶部/底部对齐，可以：

<div class="card-header" valgin="top">
<div class="card-footer" valgin="bottom">

<!-- 需要为列表块添加额外的样式类cards-list -->
<div class="list-block cards-list">
    <ul>
        <li class="card"><!-- 条目元素需要添加card类 -->
            <div class="card-header">Card Header</div>
            <div class="card-content">
                <div class="card-content-inner">Card content</div>
            </div>
            <div class="card-footer">Card footer</div>
        </li>
        <li class="card">
            <div class="card-header">Card Header</div>
            <div class="card-content">
                <div class="card-content-inner">Card content</div>
            </div>
            <div class="card-footer">Card footer</div>
        </li>
    </ul>
</div>

 该组件只适用于Material主题。

Chips在一个很小的内联块中显示复杂的信息，其中可以包含照片、小标题、文本。在视觉效果上，Chip表现为圆角小矩形：

<!-- 容器元素 -->
<div class="chip">
    <!-- 媒体元素，指定一个图片/头像等，可选 -->
    <div class="chip-media">
        <img src="avator/alex.png">
    </div>
    <!-- 文本标签 -->
    <div class="chip-label">Alex Wong</div>
    <!-- 删除按钮，可选 -->
    <a href="#" class="chip-delete"></a>
</div>

F7框架包含了大量开箱即用的按钮组件，只需要把合适的样式类添加到链接/按钮/提交input元素上即可。

F7中的按钮默认均为

display:block

普通按钮，默认具有蓝色边框和蓝色文字样式：

<p><a href="#" class="button">Button</a></p>
<p><a href="#" class="button">Button</a></p>

激活态按钮，默认具有蓝色背景和白色文字样式：

<a href="#" class="button active">Active Button</a>

圆角按钮，具有更加圆润的边框：

<p><a href="#" class="button button-round">Round Button</a></p>

大按钮，比普通按钮更高：

<a href="#" class="button button-big">Big Button </a>

按钮行，其中每个按钮具有相同的宽度，没有边距：

<p class="buttons-row">
    <a href="#" class="button">Button 1</a>
    <a href="#" class="button">Button 2</a>
    <a href="#" class="button">Button 3</a>
</p>

填充按钮，看上去和激活态按钮类似，但是点击/触碰时有额外的样式效果：

<a href="#" class="button button-fill">Fill Button </a>

彩色按钮：

<!-- 彩色按钮，在按钮行上指定主题 -->
<p class="buttons-row theme-pink">
    <a href="#" class="button active">Button 1</a>
    <a href="#" class="button">Button 2</a>
    <a href="#" class="button">Button 3</a>
</p>
<!-- 彩色按钮，指定单个按钮的颜色类 -->
<a href="#" class="button button-fill color-green">Green</a>

由按钮组成的列表视图：

<div class="content-block-title">Inset list block buttons</div>
<div class="list-block inset">
    <ul>
        <li>
            <a href="#" class="item-link list-button">List Button 1</a>
        </li>
        <li>
            <a href="#" class="item-link list-button">List Button 2</a>
        </li>
        <li>
            <a href="#" class="item-link list-button">List Button 3</a>
        </li>
    </ul>
</div>

使用网格布局对按钮进行排版，这样可以让按钮之间有边距： 

<div class="row">
    <div class="col-50">
        <a href="#" class="button button-big button-red">Cancel</a>
    </div>
    <div class="col-50">
        <a href="#" class="button button-big button-green">Submit</a>
    </div>
</div>

普通按钮，与iOS主题类似，但是没有边框：

<p><a href="#" class="button">Button</a></p>

按钮行，与iOS主题类似，但是没有边框：

<p class="buttons-row">
  <a href="#" class="button">Button</a>
  <a href="#" class="button">Button</a>
</p>

浮雕效果按钮（Raised Buttons） ，具有阴影效果：

<a href="#" class="button button-raised">Button</a>

填充按钮，默认具有蓝色背景和白色文字：

<a href="#" class="button button-fill button-raised">Button</a>

为Material波纹效果（从触碰点向周围扩散的动画）指定颜色：

<a href="#" class="button color-green ripple-pink">Button</a>

大按钮、列表块按钮、彩色按钮与iOS主题类似。 

浮动动作按钮（FAB）仅适用于Material主题，在视觉效果上，它表现为浮动的（不随页面滚动，通常位于屏幕右下角）、圆形的的按钮 。触碰后，FAB可能会：

1. 变形：转换为一个Popover 
2. 快速拨号：弹出一组相关的按钮

<!-- 当前页面 -->
<div class="page navbar-fixed">
    <!-- 导航栏-->
    <div class="navbar">
        <div class="navbar-inner">
            <div class="center"></div>
        </div>
    </div>
    <!-- 浮动动作按钮 -->
    <a href="#" class="floating-button color-pink">
        <i class="icon icon-plus"></i><!-- 按钮图标 -->
    </a>
    <!-- 可滚动的页面内容 -->
    <div class="page-content">
        <div class="content-block"></div>
    </div>
</div>

如果你需要在触碰FAB后显示一个Popover，可以：

<div class="page navbar-fixed">
    <!-- open-popover 用于打开一个Popover -->
    <!-- floating-button-to-popover 在打开Popover时显示变形动画 -->
    <!-- data-popover指定目标Popover的CSS选择器 -->
    <a href="#" data-popover=".demo-popver" class="floating-button floating-button-to-popover open-popover color-purple">
        <i class="icon icon-plus"></i>
    </a>
</div>
<!-- Popover -->
<div class="popover demo-popover">
    <div class="popover-inner">
        <div class="list-block">
            <ul>
                <li>
                    <a href="#" class="item-content item-link">
                        <div class="item-inner">
                            <div class="item-title">Link</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

可以在触碰FAB后，向上动画弹出一组按钮。再次触碰FAB，则按相反的动画隐藏这些按钮。你应当保证按钮组元素的数量在3-6之间：

<div class="page navbar-fixed">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="center"></div>
        </div>
    </div>
    <!-- 快速拨号包装元素 -->
    <div class="speed-dial">
        <a href="#" class="floating-button">
            <!-- 第一个按钮：快速拨号按钮组处于关闭状态时显示 -->
            <i class="icon icon-plus"></i>
            <!-- 第二个按钮：快速拨号按钮组处于打开状态时显示 -->
            <i class="icon icon-close"></i>
        </a>
        <!-- 快速拨号按钮组 -->
        <div class="speed-dial-buttons">
            <!-- 第一个按钮（最下面） -->
            <a href="#">
                <i class="icon demo-icon-email"></i>
            </a>
            <!-- 第二个按钮 -->
            <a href="#">
                <i class="icon demo-icon-calendar"></i>
            </a>
            <!-- 第三个按钮 -->
            <a href="#">
                <i class="icon demo-icon-upload"></i>
            </a>
        </div>
    </div>
    <div class="page-content"></div>
</div>

F7支持大量的表单元素类型，表单元素通常在列表视图中组织。

<!-- 表单中的元素（字段）往往放置到一个列表视图中 -->
<form id="formx" class="list-block"> <!-- 有时也使用div元素 -->
    <ul>
        <li>
            <div class="item-content">
                <!-- 图标为可选元素 -->
                <div class="item-media">字段图标</div>
                <div class="item-inner">
                    <!-- 标签为可选元素 -->
                    <div class="item-title label">字段标签</div>
                    <!-- 表单元素的包装元素 -->
                    <div class="item-input">
                        <!-- 各类型字段的HTML标记存放在这里 -->
                    </div>
                </div>
            </div>
        </li>
    </ul>
</form>

可以放在

<div class="item-input">

<div class="item-input">
    <input type="text">
</div>

<div class="item-input">
    <select></select>
</div>

<div class="item-input">
    <textarea></textarea>
</div>

<li class="align-top"><!-- 必须顶部对齐 -->
    <div class="item-content">
        <div class="item-inner">
            <div class="item-title label"></div>
            <div class="item-input">
                <textarea></textarea>
            </div>
        </div>
    </div>
</li>

<div class="item-input">
    <textarea class="resizable"></textarea>
</div>

<div class="item-input">
    <label class="label-switch"><!-- 额外的包装 -->
        <input type="checkbox">
        <div class="checkbox"></div>
    </label>
</div>

<div class="item-input">
    <div class="range-slider"><!-- 额外的包装 -->
        <input type="range" min="0" max="100" step="0.1">
    </div>
</div>

<form id="formx" class="list-block">
    <ul>
        <!-- 文本输入 -->
        <li>
            <div class="item-content">
                <div class="item-media">
                    <i class="icon icon-form-name"></i>
                </div>
                <div class="item-inner">
                    <div class="item-title label">Name</div>
                    <!-- 普通文本框 -->
                    <div class="item-input">
                        <input type="text" placeholder="Your name">
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="item-content">
                <div class="item-media">
                    <i class="icon icon-form-email"></i>
                </div>
                <div class="item-inner">
                    <div class="item-title label">E-mail</div>
                    <div class="item-input">
                        <!-- 电子邮件 -->
                        <input type="email" placeholder="E-mail">
                    </div>
                </div>
            </div>
        </li>
        <!-- 下拉选择菜单 -->
        <li>
            <div class="item-content">
                <div class="item-media">
                    <i class="icon icon-form-gender"></i>
                </div>
                <div class="item-inner">
                    <div class="item-title label">Gender</div>
                    <div class="item-input">
                        <select>
                            <option>Male</option>
                            <option>Female</option>
                        </select>
                    </div>
                </div>
            </div>
        </li>
        <!-- 日期控件 -->
        <li>
            <div class="item-content">
                <div class="item-media">
                    <i class="icon icon-form-calendar"></i>
                </div>
                <div class="item-inner">
                    <div class="item-title label">Birth date</div>
                    <div class="item-input">
                        <input type="date" placeholder="Birth day" value="2014-04-30">
                    </div>
                </div>
            </div>
        </li>
        <!-- 开关 -->
        <li>
            <div class="item-content">
                <div class="item-media">
                    <i class="icon icon-form-toggle"></i>
                </div>
                <div class="item-inner">
                    <div class="item-title label">Switch</div>
                    <div class="item-input">
                        <label class="label-switch">
                            <input type="checkbox">
                            <div class="checkbox"></div>
                        </label>
                    </div>
                </div>
            </div>
        </li>
        <!-- 滑块 -->
        <li>
            <div class="item-content">
                <div class="item-media">
                    <i class="icon icon-form-settings"></i>
                </div>
                <div class="item-inner">
                    <div class="item-title label">Slider</div>
                    <div class="item-input">
                        <div class="range-slider">
                            <input type="range" min="0" max="100" value="50" step="0.1">
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <!-- 多行文本 -->
        <li class="align-top">
            <div class="item-content">
                <div class="item-media">
                    <i class="icon icon-form-comment"></i>
                </div>
                <div class="item-inner">
                    <div class="item-title label">Textarea</div>
                    <div class="item-input">
                        <textarea></textarea>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</form>

这是一个列表视图的扩展，可用于创建复选框/单选框的分组。

<div class="list-block">
    <ul>
        <!-- 第一个复选框 -->
        <li>
            <!-- 列表条目的内容必须是label元素，且添加样式类label-checkbox -->
            <label class="label-checkbox item-content">
                <!-- input必须是第一个元素 -->
                <input type="checkbox" name="my-checkbox" value="Books" checked="checked"><!-- 默认选中 -->
                <!-- 图标 -->
                <div class="item-media">
                    <i class="icon icon-form-checkbox"></i>
                </div>
                <!-- 文本 -->
                <div class="item-inner">
                    <div class="item-title">Books</div>
                </div>
            </label>
        </li>
        <!-- 第二个复选框 -->
        <li>
            <label class="label-checkbox item-content">
                <input type="checkbox" name="my-checkbox" value="Movies">
                <div class="item-media">
                    <i class="icon icon-form-checkbox"></i>
                </div>
                <div class="item-inner">
                    <div class="item-title">Movies</div>
                </div>
            </label>
        </li>
    </ul>
</div>

Material主题支持额外的图标，iOS主题则不支持图标：

<div class="list-block">
    <ul>
        <!-- 第一个单选框 -->
        <li>
            <!-- 列表条目的内容必须是label元素，且添加样式类label-radio -->
            <label class="label-radio item-content">
                <!-- input必须是第一个元素 -->
                <input type="radio" name="my-radio" value="Books" checked="checked"><!-- 默认选中 -->
                <!-- 图标，仅Material主题支持 -->
                <div class="item-media">
                    <i class="icon icon-form-radio"></i>
                </div>
                <div class="item-inner">
                    <div class="item-title">Books</div>
                </div>
            </label>
        </li>
        <!-- 第二个单选框 -->
        <li>
            <label class="label-radio item-content">
                <input type="radio" name="my-radio" value="Movies">
                <div class="item-inner">
                    <div class="item-title">Movies</div>
                </div>
            </label>
        </li>
    </ul>
</div>

复选框组、单选框组可以和媒体列表视图一起工作，展现更丰富的内容。下面是一个示例：

<div class="content-block-title">你最喜爱的歌曲是？</div>
<div class="list-block media-list">
    <ul>
        <li>
            <label class="label-radio item-content">
                <input type="radio" name="my-radio" checked>
                <div class="item-media">
                    <img src="..." width="80">
                </div>
                <div class="item-inner">
                    <div class="item-title-row">
                        <div class="item-title">黄色潜水艇</div>
                        <div class="item-after">$15</div>
                    </div>
                    <div class="item-subtitle">披头士</div>
                    <div class="item-text">披头士乐队60年代的一首著名歌曲</div>
                </div>
            </label>
        </li>
    </ul>
</div>

使用智能选择，并结合复选框组/单选框组，你可以轻易的把常规的下拉菜单（select） 转换为动态页面。在Native的iOS应用中，经常可以看到类似的UI特性。

<form class="list-block">
    <ul>
        <!-- 第一个智能选择组件 -->
        <li>
            <!-- 需要额外的 "smart-select" 样式类 -->
            <a href="#" class="item-link smart-select">
                <select name="fruits">
                    <option value="apple" selected>苹果</option>
                    <option value="pineapple">橘子</option>
                </select>
                <!-- 在列表视图中显示的内容 -->
                <div class="item-content">
                    <div class="item-inner">
                        <!-- 文本 -->
                        <div class="item-title">水果</div>
                        <!-- 哪个菜单选项处于选中状态 -->
                        <div class="item-after">苹果</div>
                    </div>
                </div>
            </a>
        </li>
        <!-- 第二个智能选择组件 -->
    </ul>
</form>

注意智能选择只能在已初始化的视图中使用。 

<div class="list-block">
    <ul>
        <!-- 
            带搜索栏的智能选择条目 
            data-searchbar 为此智能选择启用搜索栏
            data-searchbar-placeholder 搜索框的占位符文本
            data-searchbar-cancel 取消按钮的文本
        -->
        <li>
            <a href="#" class="item-link smart-select" data-searchbar="true" data-searchbar-placeholder="Search fruits">
            </a>
        </li>
    </ul>
</div>

默认的，智能选择子页面的标题与父页面一致，返回按钮的文本默认则由应用初始化参数

smartSelectBackText

<div class="list-block">
    <ul>
        <!--
            data-page-title 子页面标题
            data-back-text 子页面返回按钮文本
        -->
        <li>
            <a href="#" class="item-link smart-select" data-page-title="美味的水果" data-back-text="返回"></a>
        </li>
    </ul>
</div>

F7支持以Popup的方式打开智能选择组件，设置应用初始化参数

smartSelectOpenIn:'popup'

<div class="list-block">
    <ul>
        <li>
            <!-- data-open-in设置为popup，则以弹窗方式打开智能选择 -->
            <a href="#" class="item-link smart-select" data-open-in="popup"> </a>
        </li>
    </ul>
</div>

F7还支持在选取器模态窗口，而不是页面中打开智能选择组件，设置应用初始化参数

smartSelectOpenIn:'picker'

<div class="list-block">
    <ul>
        <li>
            <!-- 
                data-open-in设置为picker，则以选取器方式打开智能选择 
                data-picker-height 指定选取器的高度
            -->
            <a href="#" class="item-link smart-select" data-open-in="picker" data-picker-height="200px"></a>
        </li>
    </ul>
</div>

<a href="#" class="item-link smart-select">
    <!-- 在select元素上添加data-option-image、data-option-icon，为所有选项指定默认图标 -->
    <select name="fruits" data-option-image="">
        <!-- data-option-image 指定图标 -->
        <option value="apple" selected data-option-image="">苹果</option>
        <option value="pineapple" data-option-image="">菠萝</option>
        <!-- data-option-color 指定文本颜色 -->
        <option value="pear" data-option-color="orange" data-option-image>梨</option>
    </select>
    <div class="item-content">
        <div class="item-inner">
            <div class="item-title">水果</div>
        </div>
    </div>
</a>

<div class="list-block">
    <ul>
        <li>
            <a href="#" class="item-link smart-select">
                <!-- multiple ：表示支持多选 -->
                <!-- maxlength：指定最多选中的选项个数 -->
                <select name="car" multiple maxlength="3">
                    <!-- 使用optgroup，可以将选项分组，组名由label指定 -->
                    <optgroup label="日产">
                        <option value="honda" selected>本田</option>
                        <option value="lexus">雷克萨斯</option>
                        <option value="mazda">马自达</option>
                        <option value="nissan">尼桑</option>
                        <option value="toyota">丰田</option>
                    </optgroup>
                    <optgroup label="德产">
                        <option value="audi">奥迪</option>
                        <option value="bmw">宝马</option>
                        <option value="mercedes">奔驰</option>
                        <option value="volvo">沃尔沃</option>
                    </optgroup>
                </select>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title">汽车品牌</div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>

<div class="list-block">
    <ul>
        <li>
        <!-- 设置data-back-on-select="true" 则智能选择可以自动关闭 -->
            <a href="#" class="item-link smart-select" data-back-on-select="true">
                <select></select>
                <div class="item-content"></div>
            </a>
        </li>
    </ul>
</div>

如果选项特别多（例如1000个），则可以使用虚列表：

<div class="list-block">
    <ul>
        <li>
            <!--
                data-virtual-list="true" 使用虚列表
                data-virtual-list-height="55"设置虚列表单条目的高度为55px
            -->
            <a href="#" class="item-link smart-select" data-virtual-list="true" data-virtual-list-height="55">
                <select name="numbers">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    ...
                    <option value="100000">100000</option>
                </select>
                <div class="item-content"></div>
            </a>
        </li>
    </ul>
</div>

可以为智能选择页面、Popup设置主题：

<div class="list-block">
    <ul>
        <li>
            <!-- data-navbar-theme="red" 设置导航栏为红色主题 -->
            <!-- data-form-theme="green" 设置表单为绿色主题 -->
            <a href="#" class="item-link smart-select" data-navbar-theme="red" data-form-theme="green">
                <select name="car"></select>
                <div class="item-content"></div>
            </a>
        </li>
    </ul>
</div>

<div class="list-block">
    <ul>
        <li>
            <a href="#" class="item-link smart-select">
                <select name="fruits">
                    <option value="apple">Apple</option><!-- 被选中 -->
                    <option value="pineapple">Pineapple</option>
                </select>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title">Fruit</div>
                        <!-- 在item-after元素上设置smart-select-value，则其文本对应的选项自动选中 -->
                        <div class="item-after smart-select-value">Apple</div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>

/**
 * 打开一个智能选择页面/弹窗/选取器
 * @param smartSelect 目标.smart-select元素对应的HTMLElement或者CSS选择器
 */
function smartSelectOpen(smartSelect);

/**
 * 动态的为智能选择添加选项
 * @param select HTML或者CSS选择器，对应select或者optgroup元素
 * @param optionHTML 被插入的选项的完整HTML
 * @param index 新选项插入的索引，如果不指定则插入到最后
 */
function smartSelectAddOption(select, optionHTML, index)

F7支持为任何元素添加“禁用”样式：

1. disabled样式类：可以为任何元素添加禁用样式
2. disabled属性：可以为表单元素添加禁用样式

被禁用的元素具有较低的不透明度，而且不接受任何touch/click事件。

<div class="list-block">
    <ul>
        <!-- 此列表条目被禁用 -->
        <li class="item-content disabled">
            <div class="item-inner">
                <div class="item-title"></div>
            </div>
        </li>
        <!-- 此条目的表单元素被禁用 -->
        <li class="item-content">
            <div class="item-inner">
                <div class="item-input">
                    <!-- 禁用的元素 -->
                    <input type="text" name="name" disabled>
                </div>
            </div>
        </li>
    </ul>
</div>

F7提供了一些便利的方法，用来收集表单数据为JSON，或者读取JSON并设置表单元素的值。

/**
 * 收集表单字段的值，并组成一个JSON对象
 * @param form 表单元素的HTMLElement或者CSS选择器
 * @returns 返回JSON对象
 */
function formToJSON( form );

/**
 * 使用JSON填充表单
 * @param form 目标表单的HTMLElement或者CSS选择器
 * @param formData 用来填充的JSON
 */
function formFromJSON(form, formData);

F7支持自动存储/加载表单数据，即使是Ajax页面也支持。要启用本地存储，只需要：

1. 为表单添加额外的样式类：store-data
2. 为表单设置id属性
3. 为所有表单字段设置name属性，不设置的字段将被忽略

 JavaScript API不需要直接调用。下面是一个样例：

<!-- 设置表单的id，添加store-data样式类 -->
<form id="my-form" class="list-block store-data">
    <ul>
        <li>
            <div class="item-content">
                <div class="item-inner">
                    <div class="item-title label">姓名</div>
                    <div class="item-input">
                        <!-- 确保表单元素具有name属性 -->
                        <input type="text" name="name" placeholder="请输入你的姓名">
                    </div>
                </div>
            </div>
        </li>
        <li>
    </ul>
</form>

1. 在监听到

   pageInit

    事件后，F7会调用

   formFromJSON

    函数，从HTML5的本地存储（Local Storage）中加载数据
2. 在监听到表单元素的

   change

    事件后，F7会调用

   formToJSON()

    函数，存储最新的表单元素值到本地存储中

任何一个表单都具有自己的本地存储键，键命名规则为

localStorage.f7form-[formID]

F7提供了一些API，可以用来管理表单的本地存储：

F7支持基于Ajax的自动表单提交，自动提交有两种方式

1. 当用户点击submit按钮时，或者表单的submit事件被手工触发时
2. 当用户修改表单字段值时，或者表单/表单元素的change事件被手工触发时

<!--
添加ajax-submit样式类，则表单支持submit事件时自动提交
action 存放接受请求的地址
method 使用的HTTP方法
enctype HTML的内容类型（Content type）
-->
<form action="/save" method="GET" class="ajax-submit" enctype="application/x-www-form-urlencoded"></form>

与上面类似：

<form action="/save" method="GET" class="ajax-submit-onchange"></form>

<form class="ajax-submit">

$$( 'form.ajax-submit' ).on( 'submitted', function( e ) {
    var xhr = e.detail.xhr; // 浏览器的XMLHttpRequest对象
    var data = e.detail.data; // Ajax响应的内容
} );

 使用页签，可以方便的在不同内容直接切换。

<!-- 页签包装元素 -->
<div class="tabs">
    <!-- 页签，必须具有tab类，唯一的id，激活的（可见）页签添加active类 -->
    <div class="tab active" id="tab1">页签一的内容</div>
    <div class="tab" id="tab2">页签二的内容</div>
    <div class="tab" id="tab3">页签三的内容</div>
</div>

<!-- 为链接添加tab-link类，则它可以用来打开页签  -->
<!-- href指定页签的id -->
<!-- active指定此链接的样式为激活的 -->
<a href="#tab1" class="tab-link active">页签一</a>
<a href="#tab2" class="tab-link">页签二</a>
<a href="#tab3" class="tab-link">页签三</a>

<div class="page-content">
    <div class="content-block">
        <!-- 按钮组，用于控制页签 -->
        <div class="buttons-row">
            <a href="#tab1" class="tab-link active button">Tab1</a>
            <a href="#tab2" class="tab-link button">Tab2</a>
            <a href="#tab3" class="tab-link button">Tab3</a>
        </div>
    </div>
    <!-- 页签-->
    <div class="tabs">
        <div id="tab1" class="tab active">
            <div class="content-block"></div>
        </div>
        <div id="tab2" class="tab">
            <div class="content-block"></div>
        </div>
        <div id="tab3" class="tab">
            <div class="content-block"></div>
        </div>
    </div>
</div>

有时需要在点击链接时，打开（属于不同页签的）多个标签页，这时可以使用data-tab属性而不是href：

<!-- 顶部页签 -->
<div class="tabs tabs-top">
    <div class="tab tab1 active">...</div>
    <div class="tab tab2">...</div>
</div>
<!-- 底部页签 -->
<div class="tabs tabs-bottom">
    <div class="tab tab1 active">...</div>
    <div class="tab tab2">...</div>
</div>
<div class="tab-links">
    <!-- data-tab指定需要显示的标签页的选择器，.tab1导致顶部、底部页签的第一个标签页同时显示 -->
    <a href="#" class="tab-link" data-tab=".tab1">Tab 1</a>
    <a href="#" class="tab-link" data-tab=".tab2">Tab 2</a>
</div>

需要额外的包装元素：

<div class="tabs-animated-wrap">
    <div class="tabs"></div>
</div>

<div class="pages navbar-fixed">
    <div data-page="home" class="page with-subnavbar">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="subnavbar">
                    <!-- 该例子把按钮组放在子导航栏中 -->
                    <div class="buttons-row">
                        <a href="#tab1" class="button active tab-link">Tab1</a>
                        <a href="#tab2" class="button tab-link">Tab2</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- tabs-swipeable-wrap包装用于启用滑动手势 -->
        <div class="tabs-swipeable-wrap">
            <div class="tabs">
                <!-- 使用 page-content类，以便保持每个标签页的滚动位置 -->
                <div id="tab1" class="page-content tab active">
                    <div class="content-block"></div>
                </div>
                <div id="tab2" class="page-content tab">
                    <div class="content-block"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tab">

$$('#tab1').on('show', function () {
    app.alert('页签一已激活');
});

F7的幻灯片组件Swiper非常强大，支持灵活的配置。该组件已经发展为独立组件，可以不依赖于F7框架使用，并且用在桌面浏览器上也非常合适。

Swiper支持多种特性：

1. 分页：默认显示一组小圆点，类似于iOS主屏幕下部的bullet，指示当前是第几张幻灯片
2. 水平或者垂直方向切换，分页也相应的显示在底部/右侧
3. 嵌套的幻灯片
4. 同时显示多列幻灯片
5. 同时显示多行幻灯片
6. 显示左右侧的导航按钮
7. 循环显示幻灯片
8. 各种切换效果：淡入淡出、3D立方体、3D封面流、3D翻转效果
9. 显示幻灯缩略图
10. 键盘导航、鼠标中键导航
11. 动态增减幻灯片数量
12. 视差效果
13. 以分数（1/10）、进度条等方式显示分页信息
14. 支持图片延迟加载

<!-- 主容器，包含幻灯片、分页 -->
<div class="swiper-container">
    <!-- 幻灯片条目的额外包装元素 -->
    <div class="swiper-wrapper">
        <!-- 幻灯片条目，可以包含任意HTML -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 包含自动创建的分页小圆点，可选元素 -->
    <div class="swiper-pagination"></div>
</div>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 通过data-hash设置幻灯片的哈希值 -->
        <div class="swiper-slide" data-hash="slide1">Slide 1</div>
        <div class="swiper-slide" data-hash="slide2">Slide 2</div>
    </div>
</div>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
    hashnav: true
})
</script>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 延迟加载的图片 -->
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <!-- 延迟加载的图片，可以使用data-srcset属性（视网膜屏，4x表示4个物理像素组成1个显示像素） -->
        <div class="swiper-slide">
            <img data-src="path/to/logo-small.png" data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <!-- 延迟加载的背景图片 -->
        <div class="swiper-slide">
            <div data-background="path/to/picture-2.jpg" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
        </div>
        <!-- 延迟加载的背景图片，设置在幻灯片元素上 -->
        <div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
    preloadImages: false,
    lazyLoading: true
});  
</script>

<!-- 
    只需为容器添加swiper-init类，即可通过HTML初始化幻灯片
    data-***用于指定初始化参数，必须把驼峰式大小写改为短横线小写风格
    亦可通过data-swiper，传递一个JSON字符串，以指定所有初始化参数
-->
<div class="swiper-container swiper-init" data-speed="400" data-space-between="40" data-pagination=".swiper-pagination">
    <div class="swiper-wrapper"></div>
</div>

下面的代码获得通过HTML初始化的幻灯片组件实例：

var swiper = $$('.swiper-container')[0].swiper;
swiper.slideNext(); //调用方法

初始化幻灯片，需要容器元素的DOM已经存在，因此需要在pageInit事件/回调中调用初始化函数：

/**
 * @param swiperContainer swiper-container元素的HTMLElement或者CSS选择器
 * @param parameters 幻灯片初始化参数
 * @return 已经初始化的幻灯片对象实例
 */
app.swiper(swiperContainer, parameters);
//另外一种方式
var swiper = new Swiper(swiperContainer, parameters);
//应用举例：
var mySwiper = app.swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
});

{
    crossFade: false
}

{
  slideShadows: true,
  shadow: true,
  shadowOffset: 20,
  shadowScale: 0.94
}

{
  rotate: 50,
  stretch: 0,
  depth: 100,
  modifier: 1,
  slideShadows : true
}

{
  slideShadows : true
  limitRotation: true
}

function( index, className ) {
    return '<span class="' + className + '">' + 
               ( index + 1 ) + 
           '</span>';
}

function ( swiper, currentClassName, totalClassName ) {
    return 
    '<span class="' + currentClassName + '"></span>' + 
    ' of ' + '<span class="' + totalClassName + '"></span>';
};

function (swiper, progressbarClass) {
    return '<span class="' + progressbarClass + '"></span>';
}

function (swiper, current, total) {
    return current + ' of ' + total;
}

swiper.appendSlide('<div class="swiper-slide">Slide 10"</div>')
swiper.appendSlide([
   '<div class="swiper-slide">Slide 10"</div>', 
   '<div class="swiper-slide">Slide 11"</div>'
]);

swiper.on('slideChangeStart', function () {
    console.log('slide change start');
});

该组件模拟iOS系统照片浏览器的行为，用于展示图片/照片，支持缩放和平移操作。 

 仅支持通过JavaScript API创建：

/**
 * @param parameters 照片浏览器初始化参数
 * @reutrn 已初始化的照片浏览器实例
 */
app.photoBrowser( parameters );

照片浏览器组件允许通过模板定制其UI

其它模板都会嵌入到该模板中。

<div class="photo-browser photo-browser-{{theme}}">
    <div class="view navbar-fixed toolbar-fixed">
        {{#unless material}}{{#if navbar}}
        navbarTemplate
        {{/if}}{{/unless}}
        <div class="page no-toolbar {{#unless navbar}}no-navbar{{/unless}} toolbar-fixed navbar-fixed" data-page="photo-browser-slides">
            {{#if material}}{{#if navbar}}
            navbarTemplate
            {{/if}}{{/if}}
            {{#if toolbar}}
            toolbarTemplate
            {{/if}}
            <div class="photo-browser-captions photo-browser-captions-{{js "this.captionsTheme || this.theme"}}">
                {{#each photos}}{{#if caption}}
                captionTemplate
                {{/if}}{{/each}}
            </div>
            <div class="photo-browser-swiper-container swiper-container">
                <div class="photo-browser-swiper-wrapper swiper-wrapper">
                    {{#each photos}}
                    {{#js_compare "this.html || ((typeof this === \'string\' || this instanceof String) && (this.indexOf(\'<\') >= 0 || this.indexOf(\'>\') >= 0))"}}
                        objectTemplate
                    {{else}}
                        {{#if @root.lazyLoading}}
                        photoLazyTemplate
                        {{else}}
                        photoTemplate
                        {{/if}}
                    {{/js_compare}}
                    {{/each}}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="navbar">
    <div class="navbar-inner">
        <div class="left sliding">
            <!-- photo-browser-close-link 点击后会关闭照片浏览器，并且解除事件监听器 -->
            <a href="#" class="link close-popup photo-browser-close-link {{#unless backLinkText}}icon-only{{/unless}} {{js "this.type === \'page\' ? \'back\' : \'\'"}}">
                <i class="icon icon-back {{iconsColorClass}}"></i>
                {{#if backLinkText}}<span>{{backLinkText}}</span>{{/if}}
            </a>
        </div>
        <div class="center sliding">
            <!-- photo-browser-current 当前照片的索引 -->
            <span class="photo-browser-current"></span> 
            <span class="photo-browser-of">{{ofText}}</span>   
            <!-- photo-browser-current 照片总数 -->
            <span class="photo-browser-total"></span>
        </div>
        <div class="right"></div>
    </div>
</div>

<div class="toolbar tabbar">
    <div class="toolbar-inner">
        <!-- 切换到前一张照片的按钮 -->
        <a href="#" class="link photo-browser-prev">
            <i class="icon icon-prev {{iconsColorClass}}"></i>
        </a>
        <!-- 切换到后一张照片的按钮 -->
        <a href="#" class="link photo-browser-next">
            <i class="icon icon-next {{iconsColorClass}}"></i>
        </a>
    </div>
</div>

<div class="photo-browser-slide swiper-slide">
    <span class="photo-browser-zoom-container">
        <img src="{{js "this.url || this"}}">
    </span>
</div>

<div class="photo-browser-slide photo-browser-slide-lazy swiper-slide">
    <div class="preloader {{@root.preloaderColorClass}}">{{#if @root.material}}{{@root.materialPreloaderSvg}}{{/if}}</div>
    <span class="photo-browser-zoom-container">
        <img data-src="{{js " this.url || this"}}" class="swiper-lazy">
    </span>
</div>

<div class="photo-browser-slide photo-browser-object-slide swiper-slide">{{js "this.html || this"}}</div>

<div class="photo-browser-caption" data-caption-index="{{@index}}">
    {{caption}}
</div>

 F7提供了一个移动设备友好、为触碰操作优化的自动完成组件。

只能通过JavaScript API创建：

/**
 * @param parameters 初始化参数
 * @return 已初始化的自动完成组件的实例
 */
app.autocomplete(parameters);

var allItems = [];
function source( autocomplete, query, render ) {
    var results = [];
    if ( query.length === 0 ) {
        // 无查询条件
        render( results );
        return;
    }
    //根据查询条件过滤数据
    for ( var i = 0; i < fruits.length; i++ ) {
        if ( allItems.indexOf( query ) >= 0 ) {
            results.push( fruits[i] );
        }
    }
    //调用渲染函数
    render( results );
}

本节列出F7为自动完成组件提供的缺省模板，定制这些模板可以改变组件的外观。

导航栏模板：该模板用于Standalone模式。

<div class="navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}"><!-- 设置主题 -->
    <div class="navbar-inner">
        <div class="left sliding"><!-- 左侧，依据iOS/Material设置不同的按钮 -->
            {{#if material}}
            <a href="#" class="link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
              <i class="icon icon-back"></i>
            </a>
            {{else}}
            <a href="#" class="link {{#if inPopup}}close-popup{{else}}back{{/if}}">
                <i class="icon icon-back"></i>
                {{#if inPopup}}
                <span>{{popupCloseText}}</span>
                {{else}}
                <span>{{backText}}</span>
                {{/if}}
            </a>
            {{/if}}
        </div>
        <div class="center sliding">{{pageTitle}}</div><!-- 中间，显示页面标题 -->
        {{#if preloader}}
        <div class="right"><!-- 右侧，显示预加载提示符 -->
            <div class="autocomplete-preloader preloader {{#if preloaderColor}}preloader-{{preloaderColor}}{{/if}}"></div>
        </div>
        {{/if}}
    </div>
</div>

列表条目模板：每个备选条目（列表视图的元素）使用的模板。

<li>
    <label class="label-{{inputType}} item-content">
        <!-- 单/复选框，隐藏 -->
        <input type="{{inputType}}" name="{{inputName}}" value="{{value}}" {{#if selected}}checked{{/if}}>
        <!-- 图标和文本的布局，依主题而不同 -->
        {{#if material}}
            <div class="item-media">
                <i class="icon icon-form-{{inputType}}"></i>
            </div>
            <div class="item-inner">
                <div class="item-title">{{text}}</div>
            </div>
        {{else}}
            {{#if checkbox}}
            <div class="item-media">
                <i class="icon icon-form-checkbox"></i>
            </div>
            {{/if}}
            <div class="item-inner">
                <div class="item-title">{{text}}</div>
            </div>
        {{/if}}
    </label>
</li>

下拉菜单外框使用的模板。

<div class="autocomplete-dropdown">
    <div class="autocomplete-dropdown-inner">
        <!-- 列表视图放在这里 -->
        <div class="list-block">
            <ul></ul>
        </div>
    </div>
    <!-- 预加载指示器 -->
    {{#if preloader}}
    <div class="autocomplete-preloader preloader {{#if preloaderColor}}preloader-{{preloaderColor}}{{/if}}">
      {{#if material}}{{materialPreloaderHtml}}{{/if}}
    </div>
    {{/if}}
</div>

下拉菜单模式下，每个备选条目使用的模板。

<li>
    <label class="{{#unless placeholder}}label-radio{{/unless}} item-content" data-value="{{value}}">
        <div class="item-inner">
            <div class="item-title">{{text}}</div>
        </div>
    </label>
</li>

下拉菜单模式下，占位符文本使用的模板。

<li class="autocomplete-dropdown-placeholder">
    <div class="item-content">
        <div class="item-inner">
            <div class="item-title">{{text}}</div>
        </div>
    </label>
</li>

<div class="list-block">
    <ul>
        <li class="item-content">
            <div class="item-title label">显示语言</div>
            <div class="item-input">
                <input type="text" placeholder="Language" id="autocomplete-dropdown-ajax">
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript">
var autocompleteDropdownAjax = app.autocomplete( {
    input : '#autocomplete-dropdown-ajax',
    openIn : 'dropdown',
    preloader : true, // 异步获取数据，一般都显示预加载指示器
    valueProperty : 'id', // 对象的值属性
    textProperty : 'name', // 对象的显示值属性
    limit : 20, // 最多显示20条数据于下拉列表
    dropdownPlaceholderText : '请输入语言名称',
    expandInput : true, // 扩展输入框为100%宽度，Label隐藏 
    source : function( autocomplete, query, render ) {
        var results = [];
        if ( query.length === 0 ) {
            render( results );
            return;
        }
        // 加载数据前，显示指示器
        autocomplete.showPreloader();
        // 执行异步请求
        $$.ajax( {
            url : 'autocomplete-languages.json',
            method : 'GET',
            dataType : 'json',
            data : {
                query : query
            },
            //获取服务器数据后的回调 
            success : function( data ) {
                for ( var i = 0; i < data.length; i++ ) {
                    if ( data[i].name.toLowerCase().indexOf( query.toLowerCase() ) >= 0 ) results.push( data[i] );
                }
                // 隐藏指示器
                autocomplete.hidePreloader();
                // 异步的执行渲染函数 
                render( results );
            }
        } );
    }
} );
</script>

Picker提供了一些基础功能，利用这些功能，你可以很方便的定制UI风格与iOS类似的选取器。

Picker可以用作内联组件（ inline component），也可以用作Overlay。在平板电脑上，Overlay的选取器自动被转换为Popover。

只能通过JavaScript API创建：

/**
 * @param parameters 选取器初始化参数
 * @return 已实例化的选取器实例
 */
app.picker(parameters);

对于通过内联（inline）方式创建的选取器，可以通过其HTML容器的属性获得选取器实例：

var picker = $$('.picker-inline')[0].f7Picker;

<div class="toolbar">
  <div class="toolbar-inner">
    <div class="left"></div>
    <div class="right">
      <a href="#" class="link close-picker">
        {{closeText}}
      </a>
    </div>
  </div>
</div>

// 获取第一个列对象
var col = picker.cols[0];

所谓联动，是指第一列的值改变后，第二列的值列表自动被替换： 

<div class="content-block-title">联动示例</div>
<div class="list-block">
    <ul>
        <li>
            <div class="item-content">
                <div class="item-inner">
                    <div class="item-input">
                        <input type="text" placeholder="你的车型" readonly id="picker-dependent">
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var carVendors = {
        '日产' : [ '本田', '雷克萨斯', '，马自达', '尼桑', '丰田' ],
        '德产' : [ '奥迪', '宝马', '梅赛德斯', '沃尔沃' ],
        '美产' : [ '林肯', '富特', '别克', '凯迪拉克' ]
    };
    var pickerDependent = app.picker( {
        input : '#picker-dependent', // 关联的输入元素
        rotateEffect : true, // 3D转轮效果
        formatValue : function( picker, values ) {
            return values[1]; // 第二列的值，即汽车品牌为输出到input的值
        },
        cols : [ {
            // 第一列，汽车按生产国分类
            textAlign : 'left',
            values : [ '日产', '德产', '美产' ],
            // 在第一列值改变时，自动设置第二列的值列表，这是联动的关键
            onChange : function( picker, country ) {
                if ( picker.cols[1].replaceValues ) {
                    // 替换值列表
                    picker.cols[1].replaceValues( carVendors[country] );
                }
            }
        }, {
            values : carVendors['日产'],
            width : 160,
        }, ]
    } );
</script>

这是一个多列、内联的选取器实例：

<div class="content-block-title">内联选取器：日期-时间</div>
<div class="content-block">
 <div style="padding:0; margin-right:-15px; width:auto" class="content-block-inner">
   <div style="margin:0" class="list-block">
     <ul style="border-top:none">
       <li>
         <div class="item-content">
           <div class="item-inner">
             <div class="item-input">
               <input type="text" placeholder="选取日期/时间" readonly id="picker-date">
             </div>
           </div>
         </div>
       </li>
     </ul>
   </div>
   <div id="picker-date-container"></div>
 </div>
</div>
<script type="text/javascript">
    var today = new Date();
    var pickerInline = app.picker( {
        input : '#picker-date', //管理的input元素
        container : '#picker-date-container', //内联选取器的容器元素
        toolbar : false,
        rotateEffect : true,
        //默认值设置为今天
        value : [ today.getMonth(), today.getDate(), today.getFullYear(), today.getHours(), ( today.getMinutes() < 10 ? '0' + today.getMinutes() : today.getMinutes() ) ],
        onChange : function( picker, values, displayValues ) {
            //第二列，日期，需要依据月份的不同设置值列表
            var daysInMonth = new Date( picker.value[2], picker.value[0] * 1 + 1, 0 ).getDate();
            if ( values[1] > daysInMonth ) {
                picker.cols[1].setValue( daysInMonth );
            }
        },
        //格式化
        formatValue : function( p, values, displayValues ) {
            return displayValues[0] + ' ' + values[1] + ', ' + values[2] + ' ' + values[3] + ':' + values[4];
        },
    
        cols : [
        // 月份
        {
            values : ( '0 1 2 3 4 5 6 7 8 9 10 11' ).split( ' ' ),
            displayValues : ( 'January February March April May June July August September October November December' ).split( ' ' ),
            textAlign : 'left'
        },
        // 日期
        { values : [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ] },
        // 年度
        {
            values : ( function() {
                var arr = [];
                for ( var i = 1950; i <= 2030; i++ ) { arr.push( i ); }
                return arr;
            } )(),
        },
        // 日期 时间的分隔符列，空格
        { divider : true,  content : '  ' },
        // 小时
        {
            values : ( function() {
                var arr = [];
                for ( var i = 0; i <= 23; i++ ) { arr.push( i ); }
                return arr;
            } )(),
        },
        // 小时:分钟的分隔符列，冒号
        { divider : true, content : ':' },
        // 分钟
        {
            values : ( function() {
                var arr = [];
                for ( var i = 0; i <= 59; i++ ) { arr.push( i < 10 ? '0' + i : i ); }
                return arr;
            } )(),
        } ]
    } );
</script>

F7提供的日历（Calendar）组件为触碰操作优化，可以方便的处理日期字段。与一般的选取类似，日历支持内联、overlay展示方式。

只能通过JavaScript API创建日历实例：

/**
 * @param parameters 日历初始化参数
 * @return 已初始化的日历对象实例
 */
app.calendar(parameters);

// 访问内联日历组件的实例
var calendar = $$('.calenadr-inline')[0].f7Calendar;

<div class="toolbar">
  <div class="toolbar-inner">
    {{monthPicker}}
    {{yearPicker}}
  </div>
</div>

//数组方式，指定起止日期
var range = [ 
    new Date(2015, 10, 10), 
    new Date(2015, 10, 11)
];

//函数方式，对任意日期返回true/false
//true则包含在Range内
function range( date ) {
    if ( date.getFullYear() === 2015 
         && date.getMonth() === 10 ) {
        return true;
    }
    else {
        return false;
    }
}

//对象方式
range = {
    from: new Date(2015, 9, 1),
    to: new Date(2015, 11, 31)
}

{cssClass:string, range: DateRange}

//举例：
var calendar = app.calendar( {
    rangesClasses : [ {
        cssClass : 'day-holiday',
        range : {
            from : new Date( 2016, 0, 1 ),
            to : new Date( 2016, 0, 10 )
        }
    } ]
} );

<div class="picker-calendar-month-picker">
    <a href="#" class="link icon-only picker-calendar-prev-month">
        <i class="icon icon-prev"></i>
    </a>
    <span class="current-month-value"></span>
    <a href="#" class="link icon-only picker-calendar-next-month">
        <i class="icon icon-next"></i>
    </a>
</div>

<div class="picker-calendar-year-picker">
    <a href="#" class="link icon-only picker-calendar-prev-year">
        <i class="icon icon-prev"></i>
    </a>
    <span class="current-year-value"></span>
    <a href="#" class="link icon-only picker-calendar-next-year">
        <i class="icon icon-next"></i>
    </a>
</div>

下拉刷新是很多移动应用使用的组件， 用于触发页面内容更新。

可以集成下拉刷新功能到页面中：

<div class="page">
    <!-- page-content元素需要添加额外的pull-to-refresh-content类 -->
    <!-- data-ptr-distance为触发刷新动作的下拉距离，单位像素，默认44 -->
    <div class="page-content pull-to-refresh-content" data-ptr-distance="55">
        <!-- 隐藏的下拉刷新层，包含一个预加载提示符和一个箭头图标 -->
        <div class="pull-to-refresh-layer">
            <div class="preloader"></div>
            <div class="pull-to-refresh-arrow"></div>
        </div>
        <!-- 常规页面内容 -->
        <div class="list-block"></div>
    </div>
</div>

1. 当用户下拉pull-to-refresh-content元素时，该元素获得额外样式类：pull-down
2. 当用户下拉pull-to-refresh-content元素超过data-ptr-distance后，该元素获得额外样式类：pull-up。默认的，箭头图标的方向将反转，提示用户可以释放并刷新
3. 当处于pull-up状态时，用户释放下拉手势，pull-to-refresh-layer元素获得额外样式类：refreshing。默认的箭头图标隐藏，预加载提示符显示

<div class="pull-to-refresh-content">

 当页面滚动到接近底部时，利用无限滚动组件可以加载额外的内容或者触发特定的动作。

可以在任何可滚动容器上添加额外样式类，来启用无限滚动组件。例如：

<div class="page">
    <!-- 
        infinite-scroll 启用无限滚动功能的样式类
        data-distance 离底部多远时，触发无限滚动事件，单位像素，默认50px
    -->
    <div class="page-content infinite-scroll" data-distance="100"></div>
</div>

默认的，页面滚动到底部时触发无限滚动，如果要在滚动到顶部时触发无限滚动，可以：

<div class="page">
    <!-- 添加额外的样式类infinite-scroll-top -->
    <div class="page-content infinite-scroll infinite-scroll-top"></div>
</div>

<div class="page-content infinite-scroll">

使用通知组件，可以实现类似于iOS消息推送（Push）的效果。

通知仅仅是媒体列表视图的特例，通常不需要手工处理其布局（JavaScript API会自动创建）。当你创建了通知组件后，F7会自动添加notifications元素到body中：

<body>
    <!-- 随通知组件自动添加的新元素，为一个媒体列表视图 -->
    <div class="notifications list-block media-list">
        <ul>
            <!-- 每一行对应一个通知条目 -->
            <li class="notification-item">
                <div class="item-content">
                    <div class="item-media">
                        <!-- 通知媒体内容 -->
                    </div>
                    <div class="item-inner">
                        <div class="item-title-row">
                            <div class="item-title">
                                <!-- 通知标题 -->
                            </div>
                            <div class="item-after">
                                <!-- 通知关闭图标 -->
                                <a href="#" class="close-notification"></a>
                            </div>
                        </div>
                        <div class="item-subtitle">
                            <!-- 通知子标题 -->
                        </div>
                        <div class="item-text">
                            <!-- 通知消息文本 -->
                        </div>
                    </div>
                </div>
            </li>

        </ul>
    </div>
</body>

该组件用于推迟页面中图片的加载，仅当页面滚动到图片所在位置时，才触发加载动作。该功能可以提升页面加载速度、滚动性能，并降低流量消耗。

要延迟加载的图片必须位于可滚动的页面（

<div class="page-content">

<div class="page-content">
    <!-- 使用data-src代替src，并且添加lazy样式类 -->
    <img data-src="path/to/image.jpg" class="lazy">
</div>

<div class="page-content">
    <!-- data-background使用指定背景图片 -->
    <div data-background="path/to/image.jpg" class="lazy"></div>
</div>

 当延迟加载的图片成功加载后，可以淡入的显示：

<div class="page-content">
    <img data-src="path/to/image.jpg" class="lazy lazy-fadein">
    <div data-background="path/to/image.jpg" class="lazy lazy-fadein"></div>
</div>

手工触发lazy事件，即可立即加载目标图片：

$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');

The post Framework7学习笔记（二）：组件 appeared first on 绿色记忆.

Framework7（以下简称F7）是用于开发具有iOS/Android原生外观的混合移动应用/Web应用的开源框架，同时它也可以作为快速原型工具使用。F7完全基于Web技术——HTML、CSS、JavaScript。

F7简单易用，我们可以仅仅编写常规的HTML，不需要开发定制的标签（Angular那样），或者通过JavaScript来描述我们的页面（ExtJS那样）。

F7原先专注于iOS平台，现在也支持Google的Material design specification——Android平台的UI设计规范。

F7内置了大量的组件，例如模态窗口、侧面板、表格、表单、列表等等，使用这些组件时，几乎不需要编写JavaScript。

F7的外观易于定制，所有样式被分离在较小的

.less

F7还包括更多的特性：

1. 原生的滚动效果（Native Scrolling）
2. 不依赖任何第三方框架
3. 高性能的，基于CSS的动画
4. 支持缓存、历史、预加载（Preloading）
5. 支持无限制的多视图，不需要任何JavaScript代码即可控制视图
6. 简洁的JavaScript API
7. DOM7：内置的DOM操控库，风格类似于jQuery

该页面声明了应用程序基本的布局：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <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">
    <title>第一个F7应用</title>
    <!-- 主题样式表 -->
    <link rel="stylesheet" href="css/framework7.ios.css">
    <!-- 配色样式表 -->
    <link rel="stylesheet" href="css/framework7.ios.colors.css">
    <!-- Path to your custom app styles-->
  </head>
  <body>
    <!-- PhoneGap应用全屏模式下，用于状态栏overlay -->
    <div class="statusbar-overlay"></div>
    <!-- 面板overlay-->
    <div class="panel-overlay"></div>
    <!-- 带reveal特效的左侧面板 -->
    <div class="panel panel-left panel-reveal">
      <div class="content-block">
        <p>这里存放左侧面板的内容</p>
      </div>
    </div>
    <!-- 所有视图 -->
    <div class="views">
      <!-- 主视图，应当包含"view-main"样式类 -->
      <div class="view view-main">
        <!-- 顶部导航栏-->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- 在应用标题上添加sliding效果 -->
            <div class="center sliding">第一个F7应用</div>
            <div class="right">
              <!-- 
                右侧内容仅仅是一个图标，因此添加icon-only类
                open-panel类提示F7，点击链接时打开面板
              -->
              <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
            </div>
          </div>
        </div>
        <!-- 页面容器，由于使用了fixed-through的导航栏、工具栏，需要添加合适的样式类-->
        <div class="pages navbar-through toolbar-through">
          <!-- 页面，"data-page" 属性包含页面的名称 -->
          <div data-page="index" class="page">
            <!-- 可滚动的页面内容 -->
            <div class="page-content">
              <p>页面内容</p>
              <a href="about.html">关于</a>
            </div>
          </div>
        </div>
        <!-- 底部的工具栏 -->
        <div class="toolbar">
          <div class="toolbar-inner">
            <!-- 工具栏链接-->
            <a href="#" class="link">链接1</a>
            <a href="#" class="link">链接2</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Cordova的JavaScript占位符-->
    <script type="text/javascript" src="cordova.js"></script> 
    <!-- Framework7的JavaScript文件 -->
    <script type="text/javascript" src="js/framework7.js"></script>
    <!-- 当前应用的JavaScript文件 -->
    <script type="text/javascript" src="js/index.js"></script>
  </body>
</html>

<!-- 我们不需要在此页面中定义完整的布局，该页面是通过Ajax解析并纳入DOM的。这种做法和AngularJS的ngInclude类似 -->

<!-- 顶部导航栏 -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="back link"> <i class="icon icon-back"></i> <span>返回</span>
            </a>
        </div>
        <div class="center sliding">关于</div>
        <div class="right">
            <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
        </div>
    </div>
</div>
<!-- 声明页面 -->
<div class="pages">
    <!-- about页面 -->
    <div data-page="about" class="page">
        <div class="page-content">
            <div class="content-block">
                <p>关于本应用</p>
            </div>
        </div>
    </div>
</div>

初始化应用和视图：

// 初始化F7应用程序
var app = new Framework7();

// 快捷方式，用于操控DOM
var $$ = Dom7;

// 添加布局中声明的主视图
var mainView = app.addView( '.view-main', {
    // 启用动态导航栏
    dynamicNavbar : true
} );

如果要针对某个页面的添加脚本，可以：

// 推荐的方式：使用onPageInit回调
app.onPageInit( 'about', function( page ) {
    // 在这里操控about页面
} );

// 另外一种方式，针对所有页面的pageInit事件处理器
$$( document ).on( 'pageInit', function( e ) {
    // 从事件中获得页面信息
    var page = e.detail.page;

    if ( page.name === 'about' ) {
        // 在这里操控about页面
    }
    ;
} );

// 或者，使用活动的pageInit事件处理器
$$( document ).on( 'pageInit', '.page[data-page="about"]', function( e ) {
    // 在这里操控about页面
} );

在DOM操控方面，F7没有使用第三方库，而是自己实现了一个称为DOM7的组件。该组件的接口风格类似于jQuery：

var $$ = Dom7;
$$( '.something' ).on( 'click', function( e ) {
    $$( this ).addClass( 'hello' ).attr( 'title', 'world' ).insertAfter( '.something-else' );
} );

下面的方法均属于元素集——即

Dom7()

//为所有p元素添加intro类
$$('p').addClass('intro');

//从所有具有big样式类的a元素上移除big样式类
$$('a.big').removeClass('big');

$$('p').hasClass('intro');

$$('h1, h2').toggleClass('small');

var isChecked = $$('input').prop('checked'); //读取
//设置所有checkbox为选中
$$('input[type="checkbox"]').prop('checked', true);
//设置多个属性
$$('input').prop({
  checked: false,
  disabled: true
});

var link = $$( 'a' ).attr( 'href' );
$$( 'a' ).attr( 'href', 'http://google.com' );
$$( 'a' ).attr( {
    id : 'new-id',
    title : 'Link to Google',
    href : 'http://google.com'
} );
$$( 'img' ).removeAttr( 'src' );

//<input id="myInput" type="text" value="Lorem ipsum"/>
var inputVal = $$('#myInput').val(); 
$$('input#myInput').val('New value here');

$$( 'a' ).data( 'user', {
    id : '123',
    name : 'John',
    email : 'john@doe.com'
} );
var user = $$( 'a' ).data( 'user' );
// {id: '123', name: 'John', email: 'john@doe.com'}
$$( 'a' ).removeData( 'user' );

<div id="my-div" data-loop="true" data-animate-pages="false" data-index="0" data-hello="world"></div>
<script type="text/javascript">
var dataset = $$('#my-div').dataset();
/**
{
    loop: true,
    animatePages: false,
    index: 0,
    hello: 'world'
}
 */
</script>

$$('a').transform('rotate(90deg)')

$$('p').transition(300)

// 函数签名：
function on(eventName, handler, useCapture);
// delegatedTarget被代理事件源
function on(eventName, delegatedTarget, handler, useCapture);
//用法示例：
$$('a').on('click', function (e) { 
    console.log('clicked'); 
});
//同时监听多种事件
$$('input[type="text"]').on('keyup keydown change', function (e) { 
    console.log('input value changed'); 
});
//代理事件处理器
$$(document).on('click', 'a', function (e) { 
    console.log('link clicked'); 
});

//函数签名
function off(eventName, handler, useCapture);
function off(eventName, delegatedTarget, handler, useCapture);

//移除一个事件处理器，clickHandler必须已经注册为处理器
$$('a').off('click', clickHandler);

//函数签名
function trigger(eventName, eventData);

$$('a').transitionEnd(function(){  })

$$('a').animationEnd(function(){  })

var coords = $$('.content').offset(); 
// {top: 100, left: 200}

display:none

display:block

//得到left属性
$$('.content').css('left'); 
//设置left属性
$$('.content').css('left', '100px');
//设置多个CSS属性
$$('a').css({
    left: '100px',
    top: '200px',
    color: 'red',
    width: '300px',
    marginLeft: '17px', //驼峰式转写
    'padding-right': '20px' //原始样式名称，非法标识符需要引号
});

var links = $$('a');
links.add('p').addClass('blue');
links.add($$('div')).addClass('red');

$$('div').is(CSSSelector);
$$('div').is(HTMLElement);

var redLinks = $$('a').filter(function(index, el) {
    return $$(this).hasClass('red');
})

下表是一系列事件处理的快捷方式，它们都属于元素集对象。调用

event()

event(handleFunc)

下列函数都直接定义在Dom7上：

Dom7.each(object/array, callback);

var fruits = ['Apple', 'Orange', 'Pineapple', 'Bannana'];
$$.each(fruits, function (index, value) {});  
var person = {
    firstName: 'Alex',
    lastName: 'Wong',
    age: 25,
};
$$.each(person, function (key, value) {});

var query = $$.parseUrlQuery('http://google.com/?id=5&foo=bar');
console.log(query); //-> {id: 5, foo: 'bar'}

我们可以调用

$$.ajax(parameters)

_nocache={timestamp}

function (xhr)

function (xhr, status)

function (data, status, xhr)

function (xhr, status)

$$.ajax({
  url: 'somepage.html',
  statusCode: {
    404: function (xhr) {
      alert('page not found');
    }
  }
});

为了简化常用类型的XHR请求的发送，Dom7提供以下快捷函数：

下表列出Dom7扩展的，全局的Ajax监听事件。这些事件都从

document

使用上述事件的例子如下：

$$(document).on('ajaxComplete', function (e) {
  var xhr = e.detail.xhr;
  console.log('request performed');
});

F7框架的文档中多次提到布局（Layout）这一个词，在这里布局是指应用程序或者F7组件的HTML结构。

开发F7应用的第一步，就是创建包含应用程序骨架的index.html文件，此文件包含了应用程序的基本布局。

iOS的基础布局样例可以参考前面的章节，Android Material风格的布局，与iOS稍微不同：

<div data-page="index" class="page">

    <!-- 顶部导航栏需要置于页的内部 -->
    <div class="navbar">
        <div class="navbar-inner">
            <div class="center">Awesome App</div>
        </div>
    </div>

    <!-- 底部工具栏需要置于页的内部 -->
    <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>

可以调用下面的函数初始化F7应用，变量app代表了F7应用的实例：

var app = new Framework7( { /* 唯一的入参是包含所有初始化参数的对象 */
    // 模态窗口的默认标题
    modalTitle : '消息',

    // 启用哈希（#）导航
    pushState : true,

    // 在XHR请求前后，分别显示，隐藏指示器
    onAjaxStart : function( xhr ) {
        myApp.showIndicator();
    },
    onAjaxComplete : function( xhr ) {
        myApp.hideIndicator();
    }
} );

F7提供了大量可用的构造参数，如下表：

.ripple
a.link
a.item-link
.button
.modal-button
.tab-link
.label-radio
.label-checkbox
.actions-modal-button
a.searchbar-clear
.floating-button

<span class="preloader-inner">
    <span class="preloader-inner-gap"></span>
    <span class="preloader-inner-left">
        <span class="preloader-inner-half-circle"></span>
    </span>
    <span class="preloader-inner-right">
        <span class="preloader-inner-half-circle"></span>
    </span>
</span>

<a>

{{index}}

{{name}}

data-page

http://gmem.cc/#!/hello.html

<div class="left sliding">
  <a href="#" class="back link">
    <i class="icon icon-back"></i>
    <span>{{backText}}</span>
  </a>
</div>

<div class="left">
  <a href="#" class="link close-popup">
    <i class="icon icon-back"></i>
    <span>{{closeText}}</span>
  </a>
</div>

init()

通过设置preprocess，我们可以使用任何客户端模板引擎来解析模板、生成DOM。例如：

var app = new Framework7( {
    preprocess : function( content, url, next ) {
        if ( url === 'user.html' ) {
            // 编译模板
            var template = Template7.compile( content );
            // 链接模板为DOM
            var resultContent = template( {
                title : 'User',
                user : [ 'Alex', 'Meng', 'Cai' ]
            } );
            return resultContent;
        }
    }
} );

可以解析Template7模板：

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

 为preprocess指定第四个参数next，可以异步的返回链接后的DOM：

var app = new Framework7( {
    preprocess : function( content, url, next ) {
        if ( url === 'user.html' ) {
            // 通过XHR加载用户的JSON数据，用以填充模板
            $$.get( 'user.json', function( data ) {
                // 编译
                var template = Template7.compile( content );
                // 链接
                var resultContent = template( data );
                // 把结果传递给next
                next( resultContent );
            } );
            // 使用next，则不需要返回任何值
        }
    }
} );

使用该参数可以阻止F7路由机制的默认行为， 从而加载其他页面、重定向或者执行其他动作。例如当未登录用户请求某个页面时，自动切换到登录页面：

var app = new Framework7( {
    preroute : function( view, options ) {
        if ( !userLoggedIn ) {
            //加载其它页面
            view.router.loadPage( 'auth.html' ); 
            return false; // 返回false则阻止默认路由行为
        }
    }
} );

在F7中，元素

<div class="views">

app.views

元素

<div class="view">

下面是视图的HTML结构示例：

<body>
    <!-- 面板视图不包括在views内 -->
    <div class="panel panel-left panel-cover">
        <div class="view panel-view">...</div>
    </div>
    <!-- 所有可视化视图，必须作为子元素，这便于我们整个的移动应用——例如打开侧面板时 -->
    <div class="views">
        <!-- view-main为主视图 -->
        <div class="view view-main">
            <!-- 每个视图可以具有自己的导航栏页面、工具栏 -->
            <!-- Navbar-->
            <!-- Pages -->
            <!-- Toolbar-->
        </div>
        <!-- 另外一个视图 -->
        <div class="view another-view">
            <!-- Navbar-->
            <!-- Pages -->
            <!-- Toolbar-->
        </div>
    </div>
    <!-- 弹窗、模态窗口不包括在views内 -->
    <div class="popup">
        <div class="view popup-view">...</div>
    </div>
</body>

主视图由样式类

view-main

1. 默认的，所有链接均在主视图中加载页面
2. PushState哈希导航仅支持主视图

可以使用如下方法添加新的视图：

/**
 * @param container  HTML元素或者CSS选择器，视图的容器元素
 * @param parameters 视图的初始化参数
 */
app.addView(container, parameters); //返回一个视图对象

mainView.params.linksView = '.another-view'

除了使用初始化参数url，你还可以在视图元素上设置data-url属性，来指定默认URL：

<div class="view" data-url="index2.html">

除了主视图外，我们还可能在popup、popover、面板、Tab中定义视图。某些情况下我们需要得到“当前的”视图——即位于界面最顶层的视图，这是可以调用：

app.getCurrentView(index)

如果当前有多个活动视图 ，例如使用拆分视图布局（Split View layout）时，可以传入index来指明需要返回哪个视图。该函数返回视图实例，或者视图的数组。

F7为

<div class="view">

f7View

var viewsElement = $$('.view-main')[0];
var viewInstance = viewsElement.f7View;

使用app.views属性，可以遍历所有视图：

for (var i = 0; i < app.views.length; i ++) {
    var view = app.views[i];
    if (view.main) app.alert('I found main View!')
}

在F7中，页面的概念和传统的Web page类似。下面的代码示意了页面在F7布局里面的位置：

<div class="views">
    <div class="view view-main">
        <!-- 所有页面的容器元素 -->
        <div class="pages">
            <div class="page" data-page="home"><!-- 页面唯一名称 -->
                <div class="page-content">页面内容，包括所有F7组件，必须声明在这里</div>
            </div>
        </div>
    </div>
</div>

页面必然属于某个视图，页面可以静态的编写在主布局文件（内联）中，也可以动态的从模板中加载进来，甚至通过API动态创建。

和视图类似，在主布局文件（index.html）中，所有页面必须在容器

<div class="pages">

data-page

所有F7视觉组件——例如列表、表单——必须存放在

<div class="page-content">

页面导航的关键部分是页面事件，通过页面事件我们可以操控刚刚加载的页面，例如执行JS代码。页面事件的Target（事件源）均为

<div class="page">

下面是注册页面事件处理函数的例子：

// 针对所有页面，推荐方式
$$( document ).on( 'pageInit', function( e ) {

} );
// 针对特定页面
$$( document ).on( 'pageInit', '.page[data-page="about"]', function( e ) {
} );

除了通过应用初始化参数指定全局性页面回调以外，还可以调用Framework7对象的相应方法，来针对特定页面回调：

function(pageName, callback(page));

如果要针对特定页面执行逻辑，页面回调是非常好的选择。页面回调比起页面事件有如下优势：

1. 回调不是事件，意味着更少的内存使用、更低几率的内存泄漏。同样，你不需要考虑何时解除注册
2. 代码结构角度来看，更加便利

有时我们需要对初始页面——即内联在index.html中的页面——进行回调，这些页面已经随着应用的初始化而初始化，后续注册的回调无法拦截。这时，我们可以手工初始化应用， 并在之前注册回调：

var app = new Framework7({
  init: false // 禁止自动初始化
});          
 
// 注册回调
myApp.onPageInit('home', function (page) {
});
 
myApp.init(); //手工初始化应用

 在页面回调（包括应用初始化参数）、页面事件中，可以访问所谓“页面数据（Page data）”对象，该对象包含页面的相关信息：

//从回调中访问页面数据
app.onPageInit('about', function (page) {
});
 
// 从事件处理函数中访问页面数据
$$(document).on('pageInit', function (e) {
  var page = e.detail.page;
});

页面数据对象包含以下属性：

index.html?id=10&count=20&color=blue

{
    id: '10',
    count: '20',
    color: 'blue'
}

F7的页面导航（Navigation ）功能相当灵活，你可以通过多种方式处理页面：

1. Ajax页面（Ajax Pages）：从其它文件中加载页面，这是默认行为
2. 动态页面（Dynamic Pages）：可以使用JavaScript API动态的创建并加载页面
3. 内联页面（Inline Pages）：页面的内容可以直接编写在当前HTML里面，不需要额外的加载行为
4. Template7页面：可以通过Template7模板加载页面。注意这并不是一种独立的页面类型，只是基于T7模板来解析Ajax页面和动态页面
5. 以上方式可以混合使用

前面我们提到，F7中的视图是应用中独立的可视化部分，可以具有自己的导航和历史。导航路由器（Navigation router）连接到特定视图，作为视图的一部分，负责页面路由、导航工作。

F7主要提供了两个方法，用于执行路由：

上面两个方法的options参数是一个配置对象，支持以下配置参数：

除了load/back以外，F7还提供了一系列的快捷方法：

<a>

默认的，Framework7会使用XHR加载所有链接，除非链接元素上标记样式类：

<a class="external">

1. 发送XHR请求到目标页面
2. 解析目标页面
3. 插入到目标页面到当前DOM中
4. 执行动画以切换（transition）到新页面

F7的页面解析器很智能，因此供内部使用的页面不需要是完整的HTML（可以不包含html、head、body）、也不需要包含完整的F7布局（不需要views、pages等）。考虑下面的页面：

<div class="page" data-page="about">
    Content
</div>

F7的页面解析器仅仅尝试找到XHR加载得到的HTML中的

<div class="page">

F7允许多个视图加载同一个URL，却显示不同的内容。考虑下面的布局：

<div class="views">
    <!-- 左视图 -->
    <div class="view view-main left-view">
        <a href="about.html"> About </a>
    </div>
    <!-- 右视图 -->
    <div class="view right-view">
        <a href="about.html"> About </a>
    </div>
</div>

 左右两个视图都包含执行about.html链接。about.html则可以针对不同视图提供差异化内容：

<div class="view view-main left-view">
    <div class="page" data-page="about-right">左视图显示的内容</div>
</div>
<div class="view right-view">
    <div class="page" data-page="about-right">右视图显示的内容</div>
</div>

这里的关键之处是，你需要使用view元素包裹page元素。view元素的CSS样式类必须和页面对应的视图一致。 

本节内容仅适用于iOS主题。

动态导航栏元素是独立在页面元素之外的，如果你需要在新页面中指定导航栏内容，可以：

<div class="navbar">导航栏内容</div>
<div class="page" data-page="about">页面内容</div>

在使用多页面时，可以把上面两者包装到同一个view元素中。

可以在链接上特殊样式类back，这样链接被点击后，自动返回上一个页面：

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

如果导航历史中存在其他页面，那么href属性被忽略。否则F7通过href载入“前一个”页面。

我们可以为特定页面禁用Swipe back：

<div class="page no-swipeback"></div>

应用程序初始化参数noAnimate可以在全局范围禁用页面切换动画。

我们也可以针对页面启/禁动画：

<div class="page" data-page="about">
    <!-- 禁用动画 -->
    <a href="about.html" class="no-animation"> Load About page immediately </a>
    <!-- 对返回链接禁用动画 -->
    <a href="index.html" class="back no-animation"> Go back immediately </a>
    <!-- 启用动画 -->
    <a href="about.html" class="with-animation"> Load About page with animation </a>
    <!-- 对返回链接启用动画 -->
    <a href="index.html" class="back with-animation"> Go back with animation </a>
</div>

把驼峰式大小写的导航参数改为连字符+小写格式，附加

data-

<a>

<!-- reload=true,ignoreCache=true -->
<a href="about.html" data-reload="true" data-ignore-cache="true"></a>
<!-- force=true -->
<a href="about.html" class="back" data-force="true"></a>
<!-- animatePages=true -->
<a href="about.html" data-animate-pages="false"></a>
<!-- 导航到已有T7模板 -->
<a href="#" data-template="contactsTemplate">Contacts</a>

与HTML链接元素等价的JS加载/返回页面方式是：

view.router.loadPage('about.html');
view.router.back();

F7允许即使的创建并加载动态页面，而不进行额外的XHR请求。动态页面无法通过 

<a>

关于Ajax页面结构的说明，完全适用于动态页面。

var mainView = new Framework7().addView('.view-main');
// 动态页面的内容，结构必须符合F7规范
var newPageContent = '<div class="page" data-page="my-page">' +
                        '<div class="page-content">' +
                          '<p>Here comes new page</p>' +
                        '</div>' +
                      '</div>';
 
//加载页面
mainView.router.loadContent(newPageContent);
//另一种方式
mainView.router.load({
  content: newPageContent,
  animatePages: false
});

在JavaScript中编写HTML很麻烦，我们可以在主布局文件中声明：

<script type="text/template" id="myPage">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="center">My Page</div>
        </div>
    </div>
    <div class="page" data-page="my-page">
        <div class="page-content">
            <p>Here comes page content</p>
        </div>
    </div>
</script>

然后通过路由API加载： 

view.router.loadContent($('#myPage').html());

默认情况下动态页面的URL属于哈希导航，遵循

#content-{{index}}

内联页面指直接声明在主布局文件（index.html）中的页面。这种页面不需要额外的Ajax加载动作/动态创建动作，会随着应用的初始化自动加载。

默认情况下，内联页面是禁用的，要为某个视图启用内联页面功能，你需要：

var mainView = myApp.addView('.view-main', {
    domCache: true //启用内联页面功能
});

如果不启用domCache参数，则无法通过

#pageName

必须为非当前活动页面添加额外的cached样式类。最后一个没有标注cached的内联页面会自动显示：

<div class="views">
    <div class="view view-main">
        <div class="pages">
            <!-- 内联页面，当前活动页面 -->
            <div class="page" data-page="index">
                <div class="page-content">
                    <p>Home page</p>
                </div>
            </div>

            <!-- 已缓存的内联页面 -->
            <div class="page cached" data-page="about">
                <div class="page-content">
                    <p>About page</p>
                </div>
            </div>

            <!-- 已缓存的内联页面 -->
            <div class="page cached" data-page="services">
                <div class="page-content">
                    <p>Services page</p>
                </div>
            </div>
        </div>
    </div>
</div>

本节内容仅适用于iOS主题。

动态导航栏元素是独立在页面元素之外的，要为每个内联页面定制动态导航栏，需要额外的HTML标签：

<div class="views">
    <div class="view view-main">
        <!-- 所有内联页面的导航栏设置 -->
        <div class="navbar">
            <!-- 页面1的导航栏，注意data-page属性和对应的页面保持一致 -->
            <div class="navbar-inner" data-page="index"><div class="center">Home</div></div>
            <!-- 页面2的导航栏，注意已缓存的页面的导航栏会加上cached标签 -->
            <div class="navbar-inner cached" data-page="about"><div class="center">About</div></div>
            <!-- 页面3的导航栏 -->
            <div class="navbar-inner cached" data-page="services"><div class="center">Services</div></div>
        </div>
        <!-- 所有内联页面 -->
        <div class="pages navbar-through">
            <!-- 页面1（当前） -->
            <div class="page" data-page="index"><div class="page-content"><p>Home page</p></div></div>
            <!-- 页面2 （已缓存）-->
            <div class="page cached" data-page="about"><div class="page-content"><p>About page</p></div></div>
            <!-- 页面3（已缓存） -->
            <div class="page cached" data-page="services"><div class="page-content"><p>Services page</p></div>
            </div>
        </div>
    </div>
</div>

内联页面的URL属于哈希导航，遵循

#{{pageName}}

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

view.router.load({pageName: 'about'});

使用JavaScript API，可以很方便的使用view实例加载任何页面。此外，F7还允许点击视图1中的某个链接，而把目标页面加载到视图2中，这就是所谓跨视图链接：

<!-- 只需要通过data-view属性指定目标视图的CSS选择器，就可以进行跨视图链接 -->
<a href="products.html" data-view=".right-view"> Products </a>
<!-- 右视图 -->
<div class="view right-view">...</div>

对于“back”链接，同样可以使用data-view属性。

F7为iOS主题、Material主题预置了多套色彩方案。并分别提供深/浅两套布局主题（Layout Theme）。

要启用色彩方案的支持，必须在F7主样式表文件后附加样式表文件：

<!-- iOS主题色彩方案样式表 -->
<link rel="stylesheet" href="path/to/framework7.ios.colors.min.css">
<!-- Material主题色彩方案样式表 -->
<link rel="stylesheet" href="path/to/framework7.material.colors.min.css">

可以在多个元素上应用色彩方案，只需要添加相应的

theme-*

<body class="theme-red"></body> <!-- 全局 -->
<div class="page theme-green"></div> <!-- 页面 -->
<div class="list-block theme-pink"></div> <!-- 列表 -->
<div class="navbar theme-orange"></div> <!-- 导航栏 -->
<div class="buttons-row theme-yellow"></div> <!-- 按钮 -->

可以指定应用是深色风格还是浅色风格：

<body class="layout-dark"></body>
<div class="page layout-white"></div>
<div class="list-block layout-dark"></div>

F7提供了若干与色彩方案相关的辅助样式类：

1. color-*：指定元素的文本颜色
2. bg-*：指定元素的背景颜色
3. border-*：指定元素的边框颜色 

注意，不支持在指定色彩方案的容器内指定辅助样式类：

<div class="theme-red">
    <a href="#" class="color-blue">链接将是红色的，而不是蓝色</a>
</div>

 从F7的1.x版本开始，支持使用

:after

:before

伪元素使用规则很简单：

1. :after对应bottom、right细线
2. :before对应left、top细线

/* 修改导航栏底部细线为红色 */
.navbar:after {
  background-color: red;
}
/* 移除导航栏、工具栏的细线 */
.navbar:after {
  display:none;
}
.toolbar:before {
  display:none;
}

该样式类也可以用于移除细线，但是目前不支持导航栏、工具栏、卡片（包括头/尾）。

本章介绍的功能是F7内置的快速点击库的一部分，必须在应用初始化参数中启用快速点击才可以使用。

F7使用所谓活动状态（active state） 来高亮显示被触碰的按钮与链接。

类似于CSS选择器

:active

active-state

/* 一般状态 */
.my-button {
    color: red;
}
/* 活动状态（触碰） */
.my-button.active-state {
    color: blue;
}

 F7支持触碰并保持（Tap Hold）事件，亦即长按（Long Tap）事件。此功能默认禁用，可以设置应用初始化参数tapHold、tapHoldDelay、tapHoldPreventClicks以启用并定制。

你可能需要禁用移动浏览器默认的长按动作，向目标元素添加额外样式规则：

-moz-user-select: none;        
-webkit-user-select: none;        
user-select: none;

 你可以监听

taphold

仅用于Material主题，可以在触碰点生成一个扩散的涟漪效果。 此效果默认全局范围内启用，设置应用初始化参数

materialRipple:false

materialRippleElements

要为某个元素启用波纹效果，可以：

<a href="#" class="my-link ripple">Link With Ripple Effect</a>

要为某个元素禁用波纹效果，可以：

<a href="#" class="button no-ripple">Button Without Ripple Effect</a>

可以使用内置的

ripple-*

.button .ripple-wave {
    background-color: #ff0000;
}

F7内置了一个设备检测库，在应用初始化后，你可以访问

app.device

要在应用初始化之前使用设备API，可以：

var device = Framework7.prototype.device;
if (device.iphone) {
    console.log('this is iPhone')
}

设备API会自动为html元素添加额外的样式类，便于开发者针对不同设备定制UI： 

<!-- 为iOS 7.1设备添加的额外样式类 -->
<html class="ios ios-7 ios-7-1 ios-gt-6 pixel-ratio-1">
<!-- 为iOS 7.1视网膜屏、运行全屏应用程序时添加的样式类 -->
<html class="ios ios-7 ios-7-1 ios-gt-6 retina pixel-ratio-2 with-statusbar-overlay">
<!-- 为iOS 8.0的iPhone 6 Plus添加的样式类 -->
<html class="ios ios-8 ios-8-0 ios-gt-6 ios-gt-7 retina pixel-ratio-3 with-statusbar-overlay">
<!-- 为 Android 4.4 设备添加的额外样式类 -->
<html class="android android-4 android-4-4">

The post Framework7学习笔记（一）：基础 appeared first on 绿色记忆.