安防类项目中通常都有视频监控方面的需求。视频监控客户端主要是Native应用的形式，在Web端需要利用NPAPI、ActiveX之类的插件技术实现。

但是，IE式微，Chrome也放弃了NPAPI，另一方面，监控设备硬件厂商的视频输出格式则逐渐标准化。这让基于开放、标准化接口的Web视频监控成为可能。

本文讨论以HTML5及其衍生技术为基础的B/S架构实时视频监控解决方案。主要包括两方面的内容：

1. 视频编码、流媒体基础知识，以及相关的库、框架的介绍
2. 介绍可以用于视频监控的HTML5特性，例如媒体标签、MSE、WebRTC，以及相关的库、框架

本文仅仅简介若干种备选的解决方案，本站其它文章进行了更加深入的探讨：

1. H.264学习笔记
2. 实时通信协议族
3. 基于Kurento搭建WebRTC服务器
4. 基于Broadway的HTML5视频监控

音频、视频的编码（Codec，压缩）算法有很多，不同浏览器对音视频的编码算法的支持有差异。H264这样的监控设备常用的视频编码格式，主流浏览器都有某种程度的支持。

常见的音频编码算法包括： MP3, Vorbis, AAC；常见的视频编码算法包括： H.264, HEVC, VP8, VP9。

编码后的音频、视频通常被封装在一个比特流容器格式（container）中，这些格式中常见的有： MP4, FLV, WebM,  ASF, ISMA等。

视频解码工作通常由浏览器本身负责，配合video实现视频播放。

现代浏览器的JS引擎性能较好，因此出现了纯粹由JS实现的解码器JSMpeg，它能够解码视频格式MPEG1、音频格式MP2。支持通过Ajax加载静态视频文件，支持低延迟（小于50ms）的流式播放（通过WebSocket）。JSMpeg包括以下组件：

1. MPEG-TS分流器（demuxer）。muxer负责把视频、音频、字幕打包成一种容器格式，demuxer则作相反的工作
2. MPEG1视频解码器
3. MP2音频解码器
4. WebGL渲染器、Canvas2D渲染器
5. WebAudio音频输出组件

JSMpeg的优势在于兼容性好，几乎所有现代浏览器都能运行JSMpeg。

JSMpeg不能使用硬件加速。在iPhone 5S这样的设备上，JSMpeg能够处理720p@30fps视频。

比起现代解码器，MPEG1压缩率较低，因而需要更大的带宽。720p的视频大概占用250KB/s的带宽。

下面我们尝试利用ffmpeg编码本地摄像头视频，并通过JSMpeg播放。

创建一个NPM项目，安装依赖：

npm install jsmpeg --save
npm install ws --save

JSMpeg提供了一个中继器，能够把基于HTTP的MPEG-TS流转换后通过WebSocket发送给客户端。此脚本需要到Github下载。 下面的命令启动一个中继器：

node ./app/websocket-relay.js 12345 8800 8801
# Listening for incomming MPEG-TS Stream on http://127.0.0.1:8800/<secret>
# Awaiting WebSocket connections on ws://127.0.0.1:8801/
# 实际上在所有网络接口上监听，并非仅仅loopback

下面的命令捕获本地摄像头（Linux），并编码为MPEG1格式，然后发送到中继器：

# 从摄像头/dev/video0以480的分辨率捕获原始视频流
ffmpeg -s 640x480 -f video4linux2 -i /dev/video0 \
       # 输出为原始MPEG-1视频（JSMpeg可用），帧率30fps，比特率800kbps
       -f mpegts -codec:v mpeg1video -b 800k -r 30 http://127.0.0.1:8800/12345
# 在我的机器上，上述ffmpeg私有内存占用18MB

上述命令执行后，中继器控制台上打印：

Stream Connected: ::ffff:127.0.0.1:42399

客户端代码：

var player = new JSMpeg.Player( 'ws://127.0.0.1:8801/', {
    canvas: document.getElementById( 'canvas' ),
    autoplay: true
} ); 

Broadway是一个基于JavaScript的H.264解码器，其源码来自于Android的H.264解码器，利用Emscripten转译成了JavaScript，之后利用Google的Closure编译器优化，并针对WebGL进一步优化。

注意：Broadway仅仅支持Baseline这个H.264 Profile。

h264-live-player是基于Broadway实现的播放器，允许通过WebSocket来传输NAL单元（原始H.264帧），并在画布上渲染。我们运行一下它的示例应用：

git clone https://github.com/131/h264-live-player.git
cd h264-live-player
npm install

因为我的机器是Linux，所以修改h264-live-player/lib/ffmpeg.js， 把ffpmeg的参数改为：

var args = [
    "-f", "video4linux2",
    "-i",  "/dev/video0" ,
    "-framerate", this.options.fps,
    "-video_size", this.options.width + 'x' + this.options.height,
    '-pix_fmt',  'yuv420p',
    '-c:v',  'libx264',
    '-b:v', '600k',
    '-bufsize', '600k',
    '-vprofile', 'baseline',
    '-tune', 'zerolatency',
    '-f' ,'rawvideo',
    '-'
];

然后运行

node server-ffmpeg

老牌的编解码库，支持很多的音频、视频格式的编解码，支持多种容器格式，支持多种流协议。关于ffpmeg的详细介绍参见Linux命令知识集锦。

ffpmeg除了提供开发套件之外，还有一个同名的命令行工具，直接使用它就可以完成很多编解码、流转换的工作。

类似的库是libav，ffpmeg和它的功能非常相似，特性更多一些。

官网自称是最好的H.264编码器。特性包括：

1. 提供一流的性能、压缩比。特别是性能方面，可以在普通PC上并行编码4路或者更多的1080P流
2. 提供最好的视频质量，具有最高级的心理视觉优化
3. 支持多种不同应用程序所需要的特性，例如电视广播、蓝光低延迟视频应用、Web视频

有了上面介绍的HTML5标签、合理编码的视频格式，就可以实现简单的监控录像回放了。但是，要进行实时监控画面预览则没有这么简单，必须依赖流媒体技术实现。

所谓多媒体（Multimedia）是指多种内容形式 —— 文本、音频、视频、图片、动画等的组合。

所谓流媒体，就是指源源不断的由提供者产生，并持续的被终端用户接收、展示的多媒体，就像水流一样。现实世界中的媒体，有些天生就是流式的，例如电视、广播，另外一些则不是，例如书籍、CD。

流媒体技术（从传递媒体角度来看）可以作为文件下载的替代品。

流媒体技术关注的是如何传递媒体，而不是如何编码媒体，具体的实现就是各种流媒体协议。封装后的媒体比特流（容器格式）由流媒体服务器递送到流媒体客户端。流媒体协议可能对底层容器格式、编码格式有要求，也可能没有任何要求。

直播流（Live streaming）和静态文件播放的关键差异：

1. 点播的目标文件通常位于服务器上，具有一定的播放时长、文件大小。浏览器可以使用渐进式下载，一边下载一边播放
2. 直播不存在播放起点、终点。它表现为一种流的形式，源源不断的从视频采集源通过服务器，传递到客户端
3. 直播流通常是自适应的（adaptive），其码率随着客户端可用带宽的变化，可能变大、变小，以尽可能消除延迟

流媒体技术不但可以用于监控画面预览，也可以改善录像播放的用户体验，比起简单的静态文件回放，流式回放具有以下优势：

1. 延迟相对较低，播放能够尽快开始
2. 自适应流可以避免卡顿

主流的用于承载视频流的流媒体协议包括：

<video src="http://movie.m3u8" height="329" width="480"></video>

视频监控通常都是CS模式（而非P2P），在服务器端，你需要部署流媒体服务。

这是一个开源的跨平台多媒体框架。通过它你可以构建各种各样的媒体处理组件，包括流媒体组件。通过插件机制，GStreamer支持上百种编码格式，包括MPEG-1, MPEG-2, MPEG-4, H.261, H.263, H.264, RealVideo, MP3, WMV, FLV

Kurento、Flumotion是基于GStreamer构建的流媒体服务器软件。

Live555是流媒体服务开发的基础库，支持 RTP/RTCP/RTSP/SIP等协议，适合在硬件资源受限的情况下使用（例如嵌入式设备）。

基于Live555的软件包括：

1. Live555媒体服务器，完整的RTSP服务器
2. openRTSP，一个命令行程序，支持提供RTSP流、接收RTSP流、把RTSP流中的媒体录像到磁盘
3. playSIP，可以进行VoIP通话
4. liveCaster，支持组播的MP3流媒体服务

流媒体服务实现有很多，它们中的一些在最初针对特定的流协议，大部分都走向多元化。例如，Red5是一个RTMP流媒体服务器，Wowza是一个综合的流媒体服务器，支持WebRTC的流媒体服务在后面的章节介绍。

HTML5支持

<audio>

<video>

此标签用于在浏览器中创建一个纯音频播放器。播放静态文件的示例：

<audio controls preload="auto">
    <source src="song.mp3" type="audio/mpeg">
    <!-- 备选格式，如果浏览器不支持mp3 -->
    <source src="song.ogg" type="audio/ogg">
    <!-- 如果浏览器不支持audio标签，显示下面的连接 -->
    <a href="audiofile.mp3">download audio</a>
</audio>

此标签用于在浏览器中创建一个视频播放器。播放静态文件的示例：

<!-- poster指定预览图，autoplay自动播放，muted静音 -->
<video controls width="640" height="480" poster="movie.png" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <!-- 备选格式，如果浏览器不支持mp4 -->
  <source src="movie.webm" type="video/webm">
  <!-- 可以附带字幕 -->
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <!-- 如果浏览器不支持video标签，显示下面的连接 -->
  <a href="videofile.mp4">download video</a>
</video>

在画布中，你可以进行任意的图形绘制，当然可以去逐帧渲染视频内容。

音频、视频播放器标签也可以利用JavaScript编程式的创建，示例代码：

var video = document.createElement( 'video' );
if ( video.canPlayType( 'video/mp4' ) ) {
    video.setAttribute( 'src', 'movie.mp4' );
}
else if ( video.canPlayType( 'video/webm' ) ) {
    video.setAttribute( 'src', 'movie.webm' );
}
video.width = 640;
video.height = 480; 

媒体源扩展（Media Source Extensions，MSE）是一个W3C草案，桌面浏览器对MSE的支持较好。MSE扩展流video/audio元素的能力，允许你通过JavaScript来生成（例如从服务器抓取）媒体流供video/audio元素播放。使用MSE你可以：

1. 通过JavaScript来构建媒体流，不管媒体是如何捕获的
2. 处理自适应码流、广告插入、时间平移（time-shifting，回看）、视频编辑等应用场景
3. 最小化JavaScript中处理媒体解析的代码

MSE定义支持的（你生成的）媒体格式，只有符合要求的容器格式、编码格式才能被MSE处理。通常容器格式是ISO BMFF（MP4），也就是说你需要生成MP4的片断，然后Feed给MSE进行播放。

MediaSource对象作为video/audio元素的媒体来源，它可以具有多个SourceBuffer对象。应用程序把数据片段（segment）附加到SourceBuffer中，并可以根据系统性能对数据片段的质量进行适配。SourceBuffer中包含多个track buffer —— 分别对应音频、视频、文本等可播放数据。这些数据被音频、视频解码器解码，然后在屏幕上显示、在扬声器中播放：

要把MediaSource提供给video/audio播放，调用：

video.src = URL.createObjectURL(mediaSource);

wfs是一个播放原始H.264帧的HTML5播放器，它的工作方式是把H.264 NAL单元封装为 ISO BMFF（MP4）片，然后Feed给MSE处理。

flv.js是一个HTML5 Flash视频播放器，基于纯JS，不需要Flash插件的支持。此播放器将FLV流转换为ISO BMFF（MP4）片断，然后把MP4片断提供给video元素使用。

flv.js支持Chrome 43+, FireFox 42+, Edge 15.15048+以上版本的直播流 。

Streamedian是一个HTML5的RTSP播放器。实现了RTSP客户端功能，你可以利用此框架直接播放RTSP直播流。此播放器把RTP协议下的H264/AAC在转换为ISO BMFF供video元素使用。Streamedian支持Chrome 23+, FireFox 42+, Edge 13+，以及Android 5.0+。不支持iOS和IE。

在服务器端，你需要安装Streamedian提供的代理（此代理收费），此代理将RTSP转换为WebSocket。Streamedian处理视频流的流程如下：

WebRTC是一整套API，其中一部分供Web开发者使用，另外一部分属于要求浏览器厂商实现的接口规范。WebRTC解决诸如客户端流媒体发送、点对点通信、视频编码等问题。桌面浏览器对WebRTC的支持较好，WebRTC也很容易和Native应用集成。

使用MSE时，你需要自己构建视频流。使用WebRTC时则可以直接捕获客户端视频流。

使用WebRTC时，大部分情况下流量不需要依赖于服务器中转，服务器的作用主要是：

1. 在信号处理时，转发客户端的数据
2. 配合实现NAT/防火墙穿透
3. 在点对点通信失败时，作为中继器使用

主要是捕获客户端摄像头、麦克风。在视频监控领域用处不大，这里大概了解一下。流捕获通过navigator.getUserMedia调用实现： 

<script type="text/javascript">
    navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;
    var success = function ( stream ) {
        var video = document.getElementById( 'camrea' );
        // 把MediaStream对象转换为Blob URL，提供给video播放
        video.src = URL.createObjectURL( stream );
        video.play();
    }
    var error = function ( err ) {
        console.log( err )
    }
    // 调用成功后，得到MediaStream对象
    navigator.getUserMedia( { video: true, audio: true }, success, error );
</script>
<video id="camrea" width="640" height="480"/>

三个调用参数分别是：

1. 约束条件，你可以指定媒体类型、分辨率、帧率 
2. 成功后的回调，你可以在回调中解析出URL提供给video元素播放
3. 失败后的回调

捕获音频类似：

navigator.getUserMedia( { audio: true }, function ( stream ) {
    var audioContext = new AudioContext();

    // 从捕获的音频流创建一个媒体源管理
    var streamSource = audioContext.createMediaStreamSource( stream );

    // 把媒体源连接到目标（默认是扬声器）
    streamSource.connect( audioContext.destination );
}, error );

MediaStream对象提供以下方法：

1. getAudioTracks()，音轨列表
2. getVideoTracks()，视轨列表

每个音轨、视轨都有个label属性，对应其设备名称。

Camera.js是对getUserMedia的简单封装，简化了API并提供了跨浏览器支持：

camera.init( {
    width: 640,
    height: 480,
    fps: 30, // 帧率
    mirror: false,  // 是否显示为镜像
    targetCanvas: document.getElementById( 'webcam' ), // 默认null，如果设置了则在画布中渲染

    onFrame: function ( canvas ) {
        // 每当新的帧被捕获，调用此回调
    },

    onSuccess: function () {
        // 流成功获取后
    },

    onError: function ( error ) {
        // 如果初始化失败
    },

    onNotSupported: function () {
        // 当浏览器不支持camera.js时
    }
} );
// 暂停
camera.pause();
// 恢复
camera.start();

掠食者视觉是基于Camera实现的一个好玩的例子（移动侦测）。

在端点之间（Peer）发送流之前，需要进行通信协调、发送控制消息，即所谓信号处理（Signaling），信号处理牵涉到三类信息：

1. 会话控制信息：初始化、关闭通信，报告错误
2. 网络配置：对于其它端点来说，本机的IP和端口是什么
3. 媒体特性：本机能够处理什么音视频编码、多高的分辨率。本机发送什么样的音视频编码

WebRTC没有对信号处理规定太多，我们可以通过Ajax/WebSocket通信，以SIP、Jingle、ISUP等协议完成信号处理。点对点连接设立后，流的传输并不需要服务器介入。信号处理的示意图如下：

下面的代表片段包含了一个视频电话的信号处理过程：

// 信号处理通道，底层传输方式和协议自定义
var signalingChannel = createSignalingChannel();
var conn;

// 信号通过此回调送达本地，可能分多次送达
signalingChannel.onmessage = function ( evt ) {
    if ( !conn ) start( false );

    var signal = JSON.parse( evt.data );
    // 会话描述协议（Session Description Protocol），用于交换媒体配置信息（分辨率、编解码能力）
    if ( signal.sdp )
    // 设置Peer的RTCSessionDescription
        conn.setRemoteDescription( new RTCSessionDescription( signal.sdp ) );
    else
    // 添加Peer的Candidate信息
        conn.addIceCandidate( new RTCIceCandidate( signal.candidate ) );
};

// 调用此方法启动WebRTC，获取本地流并显示，侦听连接上的事件并处理
function start( isCaller ) {
    conn = new RTCPeerConnection( { /**/ } );

    // 把地址/端口信息发送给其它Peer。所谓Candidate就是基于ICE框架获得的本机可用地址/端口
    conn.onicecandidate = function ( evt ) {
        signalingChannel.send( JSON.stringify( { "candidate": evt.candidate } ) );
    };

    // 当远程流到达后，在remoteView元素中显示
    conn.onaddstream = function ( evt ) {
        remoteView.src = URL.createObjectURL( evt.stream );
    };

    // 获得本地流
    navigator.getUserMedia( { "audio": true, "video": true }, function ( stream ) {
        // 在remoteView元素中显示
        localView.src = URL.createObjectURL( stream );
        // 添加本地流，Peer将接收到onaddstream事件
        conn.addStream( stream );


        if ( isCaller )
        // 获得本地的RTCSessionDescription
            conn.createOffer( gotDescription );
        else
        // 针对Peer的RTCSessionDescription生成兼容的本地SDP
            conn.createAnswer( conn.remoteDescription, gotDescription );

        function gotDescription( desc ) {
            // 设置自己的RTCSessionDescription
            conn.setLocalDescription( desc );
            // 把自己的RTCSessionDescription发送给Peer
            signalingChannel.send( JSON.stringify( { "sdp": desc } ) );
        }
    } );
}

// 通信发起方调用：
start( true );

主要牵涉到的接口是RTCPeerConnection，上面的例子中已经包含了此接口的用法。WebRTC在底层做很多复杂的工作，这些工作对于JavaScript来说是透明的： 

1. 执行解码
2. 屏蔽丢包的影响
3. 点对点通信：WebRTC引入流交互式连接建立（Interactive Connectivity Establishment，ICE）框架。ICE负责建立点对点链路的建立：
   1. 首先尝试直接
   2. 不行的话尝试STUN（Session Traversal Utilities for NAT）协议。此协议通过一个简单的保活机制确保NAT端口映射在会话期间有效
   3. 仍然不行尝试TURN（Traversal Using Relays around NAT）协议。此协议依赖于部署在公网上的中继服务器。只要端点可以访问TURN服务器就可以建立连接
4. 通信安全
5. 带宽适配
6. 噪声抑制
7. 动态抖动缓冲（dynamic jitter buffering），抖动是由于网络状况的变化，缓冲用于收集、存储数据，定期发送

通过RTCDataChannel完成，允许点对点之间任意的数据交换。RTCPeerConnection连接创建后，不但可以传输音视频流，还可以打开多个信道（RTCDataChannel）进行任意数据的交换。RTCDataChanel的特点是：

1. 类似于WebSocket的API
2. 支持带优先级的多通道
3. 超低延迟，因为不需要通过服务器中转
4. 支持可靠/不可靠传输语义。支持SCTP、DTLS、UDP几种传输协议
5. 内置安全传输（DTLS）
6. 内置拥塞控制

使用RTCDataChannel可以很好的支持游戏、远程桌面、实时文本聊天、文件传输、去中心化网络等业务场景。

WebRTC adapter是一个垫片库，使用它开发WebRTC应用时，不需要考虑不同浏览器厂商的API前缀差异。

本节列出一些WebRTC的代码示例，这些例子都使用adapter.js。

// 指定分辨率
// adapter.js 支持Promise
navigator.mediaDevices.getUserMedia( { video: { width: { exact: 640 }, height: { exact: 480 } } } ).then( stream => {
    let video = document.createElement( 'video' );
    document.body.appendChild( video );
    video.srcObject = stream;
    video.play();
} ).catch( err => console.log( err ) );

// video为video元素
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

我们首先尝试的方案是直接使用RTSP源，原因是海康、大华主流厂商的较新的IP摄像头均支持暴露标准化的RTSP流。

使用VLC播放器，打开网络串流：rtsp://admin:12345@192.168.0.196:554/ch1/main/av_stream，视频源为公司门口的海康摄像头的主码流（main，子码流为sub）。

发现可以正常播放，说明视频格式应该是标准的。VLC菜单 Tool ⇨ Codec Info查看，编码格式为H264。

浏览器无法直接使用RTSP协议，因此，需要有服务器端来处理视频源的RTSP，将其转换为：

1. 通过WebSocket发送的视频片断，由客户端的：
   1. JSMpeg/Broadway直接解码，渲染到画布
   2. 或者，构造MP4片断Feed给MSE播放
2. 或者，通过WebRTC网关，转换后提供给客户端的WebRTC代码处理
3. 或者，使用浏览器插件机制，例如Chrome的NaCl

Streamedian的服务器端需要授权，我们选用了另外一个实现。

H5S是一个基于live555实现的开源的HTML5 RTSP网关，支持将RTSP/H264流输入转换为HTML5 MSE支持的H264，客户端基于MSE。

尝试在容器中运行H5S：

docker create --name ubuntu-16.04 -h ubuntu-16 --network local --dns 172.21.0.1 --ip 172.21.0.6 -it docker.gmem.cc/ubuntu:16.04 bash
docker start ubuntu-16.04
docker exec -it ubuntu-16.04 bash

apt update && apt install wget
wget https://raw.githubusercontent.com/veyesys/release/master/h5stream/H5S-r1.0.1128.16-Ubuntu-16.04-64bit.tar.gz
tar xzf H5S-r1.0.1128.16-Ubuntu-16.04-64bit.tar.gz && mv H5S-r1.0.1128.16-Ubuntu-16.04-64bit h5s-1.0

cd h5s-1.0
export LD_LIBRARY_PATH=`pwd`/lib/:$LD_LIBRARY_PATH
# 指定两次密码，可能H5S存在bug，不这样报身份验证失败
./h5ss rtsp://admin:12345@192.168.0.196:554/ch1/sub/av_stream admin 12345

使用H5S自带的基于MSE的客户端代码 + Chrome 49，播放后发现画面静止。控制它查看发现解码错误。打开chrome://media-internals/，发现错误Media segment did not begin with key frame. Support for such segments will be available in a future version。看样子是提供给SourceBuffer的数据不是以关键帧开始导致，未来版本的Chrome可能取消此限制。

换成Chrome 50，可以正常播放，但是流畅度较差，播放一段时间后出现卡死的情况。

H5S实现不完善，在不修改源码的情况下，服务器端只能接入一路视频输入。客户端也存在不流畅、卡死的问题，不适合生产环境。

在上文中我们已经成功尝试了利用JSMpege + WebSocket的方式，在网页中显示摄像头捕获的视频。ffmpeg转换RTSP也是非常简单的：

ffmpeg -i rtsp://admin:12345@192.168.0.196:554/ch1/main/av_stream -s 427x240 -f mpegts -vcodec mpeg1video -b 800k -r 30 http://127.0.0.1:8800/12345

可以使用JSMpeg自带的简单Node.js服务器测试：

node ./app/websocket-relay.js 12345 8800 8801 

下面是客户端代码，默认JSMpeg会基于WebGL渲染，但是我的机器最多开到8画面，开9画面时出现警告：

Too many active WebGL contexts. Oldest context will be lost，且第一画面丢失，简单的通融方法是，第9画面使用Canvas2D渲染：

new JSMpeg.Player( 'ws://127.0.0.1:8801/', {
    canvas: document.getElementById( 'canvas9' ),
    autoplay: true,
    // 浏览器对WebGL context的数量有限制
    disableGl: true
} ); 

渲染截图：

这种方式客户端解码压力较大，同时开9画面的352x288视频，我的机器上CPU占用率大概到40%左右，画面变化较为剧烈的时候会出现卡顿现象。

与JSMpeg类似，Broadway也是JavaScript解码工具。关键之处是，Broadway支持的视频编码是H.264，意味着可能免去消耗服务器资源的视频重编码。

最初的尝试并不顺利，根据IP摄像头的RTSP Describe应答（SDP），我们推断其H.264 Profile为Baseline，但是不转码的情况下Broadway根本无法播放。后来查看ffmpeg的日志输出，发现其实际上使用的Profile是Main。进一步尝试，发现摄像头是可以配置为Baseline的：

只需要把编码复杂度设置为低，H.264的Profile就从Main变为Baseline。

设置完毕后，仍然基于h264-live-player的Demo进行测试，使用如下命令行抽取原始H.264帧：

ffmpeg -i rtsp://admin:12345@192.168.0.196:554/ch1/main/av_stream -c:v copy -f rawvideo  -

即可免转码的进行实时视频预览了。 

此实现方式更多细节信息请参考基于Broadway的HTML5视频监控。

Chrome放弃NPAPI之后，插件开发需要使用PPAPI /NaCl。目前能找到的实现有VXG Chrome Plugin，这是一个商业产品，需要授权。除了RTSP之外，还支持RTMP、HLS等协议。

插件方案的缺点是，需要安装，而且仅仅针对单种浏览器。优势则是灵活性高，理论上性能可以做的很好。

WebRTC相关的框架非常多，经过简单的比较，我们决定从Kurento入手。主要原因是：

1. 容易扩展的模块化设计
2. 提供Java客户端、JS客户端
3. 可以在服务器端合成多画面，这样可以减轻客户端解码压力，特别是那些低配置的客户端
4. 内置对RTSP协议的支持

基于Kurento搭建WebRTC服务器一文详细讨论了这种实现方式。

这里的设备，主要包括：网络硬盘录像机（NVR）、视频服务器、IP摄像头。为了便于二次开发，硬件厂商都为这些设备配置的相应的SDK套件。这些SDK通常都提供了：实时码流预览、录像文件回放、播放控制（如：暂停、单帧前进、单帧后退）、获取码流基本信息、播放截图等功能。

我们的基本目标是，通过SDK得到标准化的码流，例如H264格式。具体如何操作，得看厂商的SDK，但是思路基本是：

1. 如果SDK直接支持获取标准格式的流，例如RTSP，那么备选方案一就可以直接用上
2. 如果SDK支持获取标准编码的视频帧，例如H264，那我们只需要将其包装为合适的容器格式，再通过RTSP/HTTP的方式发送出去
3. 如果SDK支持获取解码后的原始图像数据，例如RGB、YV12，我们可以基于H264再次编码，然后按第2步方式处理。这种方式对服务器性能要求比较高，CPU压力较大，PC机处理不了多少个通道
4. 如果都不支持，只提供了封装好的播放控件 —— 这个就比较悲催了，不过通过OS底层API，例如Windows的GDI应该也是可以实现，否则那些屏幕录像软件怎么做的呢？

根据Linux版本的海康设备网络编程指南的描述，我们应该可以：

1. 调用NET_DVR_Init进行SDK初始化
2. 调用NET_DVR_Login登陆到目标设备
3. 调用NET_DVR_RealPlay进行播放，此时返回一个实时播放句柄
   1. 如果设备支持RTSP协议取流：针对上述句柄调用NET_DVR_SetStandardDataCallBack，可以设置一个标准的数据回调函数，此回调会接受到标准码流，这对应上面的第1种思路
   2. 如果设备不支持RTSP协议取流：针对上述句柄调用NET_DVR_SetRealDataCallBack，然后通过PlayM4播放库中的PlayM4_SetDecCallBack回调得到yv12格式的原始图像。这对应上面的第3种思路

cmake构建配置：

cmake_minimum_required(VERSION 3.6)
project(hikvision)

include_directories(/home/alex/CPP/lib/hcnedsdk/include)

set(SOURCE_FILES getstream.cpp)
add_executable(getstream ${SOURCE_FILES})
target_link_libraries(getstream /home/alex/CPP/lib/hcnedsdk/lib/libhcnetsdk.so)

 C++代码：

#include <HCNetSDK.h>
#include <stdio.h>
#include <cstring>
#include <unistd.h>

// RTSP协议取流
void CALLBACK cbStdData( LONG lRealHandle, DWORD dwDataType, BYTE *pBuffer, DWORD dwBufSize, DWORD dwUser ) {
    switch ( dwDataType ) {
        case NET_DVR_SYSHEAD:        // 系统头数据，回调的第一个包是40字节的文件头
            break;
        case NET_DVR_STREAMDATA:     // 基于私有协议时：视频流数据（包括复合流和音视频分开的视频流数据）
            break;
        case NET_DVR_STD_VIDEODATA:  // 基于标准协议时：标准视频流数据（RTP包）
            break;
        case NET_DVR_STD_AUDIODATA:  // 基于标准协议时：标准音频流数据
            break;
        case NET_DVR_SDP:            // SDP信息(RTSP传输时有效)
            break;
        case NET_DVR_PRIVATE_DATA:   // 私有数据,包括智能信息叠加等
            break;
    }
}

int main() {
    // SDK初始化
    BOOL result = NET_DVR_Init();
    if ( !result ) return 1;

    // 同步登陆
    NET_DVR_USER_LOGIN_INFO struLoginInfo = { 0 };
    struLoginInfo.bUseAsynLogin = 0;
    strcpy( struLoginInfo.sDeviceAddress, "192.168.0.196" );
    struLoginInfo.wPort = 8000;
    strcpy( struLoginInfo.sUserName, "admin" );
    strcpy( struLoginInfo.sPassword, "12345" );
    NET_DVR_DEVICEINFO_V40 struDevInfo = { 0 };
    LPNET_DVR_DEVICEINFO_V30 lpDevInfo30;
    long lUserID = NET_DVR_Login_V40( &struLoginInfo, &struDevInfo );
    if ( lUserID < 0 ) {
        printf( "登陆失败，错误码 %d\n", NET_DVR_GetLastError());
        NET_DVR_Cleanup();
        return 1;
    } else {
        lpDevInfo30 = &struDevInfo.struDeviceV30;
        printf( "成功登陆到设备：%s\n", lpDevInfo30->sSerialNumber );
        printf( "SDK字符串编码方式（1 GB2312，2 GBK，3 BIG5，6 UTF-8）：%d\n", struDevInfo.byCharEncodeType );
        printf( "设备类型（31 高清网络摄像机）：%d\n", lpDevInfo30->wDevType );
        printf( "模拟通道起始号：%d，模拟通道个数%d，数字通道起始号：%d，数字通道个数%d\n", lpDevInfo30->byStartChan, lpDevInfo30->byChanNum,
                lpDevInfo30->byStartDChan, lpDevInfo30->byIPChanNum + lpDevInfo30->byHighDChanNum << 8 );
        printf( "主码流是否支持RTSP方式：%s，子码流是否支持RTSP方式：%s\n", lpDevInfo30->byMainProto > 0 ? "是" : "否",
                lpDevInfo30->bySubProto > 0 ? "是" : "否" );
    }

    // 启动预览
    NET_DVR_PREVIEWINFO struPrevInfo = { 0 };
    struPrevInfo.hPlayWnd = NULL;    // Linux 64 位系统不支持软解码功能
    struPrevInfo.lChannel = 1;       // 预览通道号
    struPrevInfo.dwStreamType = 0;   // 0-主码流， 1-子码流， 2-码流 3， 3-码流 4，以此类推
    struPrevInfo.dwLinkMode = 0;     // 0- TCP 方式， 1- UDP 方式， 2- 组播方式， 3- RTP 方式， 4-RTP/RTSP， 5-RSTP/HTTP
    struPrevInfo.bBlocked = 1;       // 0- 非阻塞取流， 1- 阻塞取流
    struPrevInfo.byProtoType = 1;    // 应用层取流协议使用RTSP
    LONG lRealHandle = NET_DVR_RealPlay_V40( lUserID, &struPrevInfo, NULL, NULL );
    if ( lRealHandle == -1 ) {
        printf( "启动预览失败，错误码 %d\n", NET_DVR_GetLastError());
        NET_DVR_Logout( lUserID );
        NET_DVR_Cleanup();
        return 1;
    }

    if ( lpDevInfo30->byMainProto ) {
        printf( "设置获取标准码流的回调\n" );
        // 仅支持对 支持RTSP协议取流的设备的 标准码流回调
        NET_DVR_SetStandardDataCallBack( lRealHandle, cbStdData, NULL );
    }

    sleep( 120 );
    // 停止预览
    NET_DVR_StopRealPlay( lRealHandle );
    // 登出
    NET_DVR_Logout( lUserID );
    // SDK清理
    NET_DVR_Cleanup();
    return 0;
}

运行脚本：

export HKLIB_HOME=/home/alex/CPP/lib/hcnedsdk/lib
export LD_LIBRARY_PATH=$HKLIB_HOME:$HKLIB_HOME/HCNetSDKCom
./getstream 

此程序运行后，会自动获取到基于RTSP协议的媒体流，回调函数会反复被调用：

1. 第一次调用为40字节的头，不太清楚有什么用
2. 第二次调用传递了SDP
3. 后续调用传递标准音视频数据，其内容是RTP封包

基于HTM5的视频监控，媒体流从采集设备到浏览器，主要路径如下图所示：

对上图的说明如下：

1. 在设备层，需要以某种方式获得码流，以流协议的方式发送出去。最常用的方式是RTSP/RTP。流的可能获取路径为：
   1. 设备直接暴露RTSP协议端点，并且发送标准码流
   2. 设备SDK允许获取标准码流，需要自己以RTSP协议发送
   3. 设备SDK允许获得解码后的逐帧，需要直接编码为H264，然后以RTSP发送
2. 流媒体层通常需要引入专门的流媒体服务器，这类服务器能够在内部进行各种流协议的转换，可以解除客户端对特定流协议的依赖
3. 客户端和服务器端的传输方式，可以有TCP、HTTP、P2P（WebRTC）、WebSocket等多种。其中
   1. 直接的TCP协议浏览器是不支持的，这意味着RTSP/RTMP等协议，在浏览器端必须要有插件才可以使用
   2. WebSocket通常配合JSMpeg或者MSE使用，由程序向JSMpeg/MSE不断Feed视频帧
4. 客户端解码展示的技术主要有三类：
   1. 浏览器内置的解码能力，主要通过video标签，MSE属于此类
   2. JavaScript软解码，主要是JSMpeg、Broadway
   3. 插件机制，例如Chrome的NaCl

能够免于引入流媒体层的方案，需要：设备能直接暴露标准码流的RTSP端点，并且安装浏览器插件。缺点也很明显，一个是设备的访问密码暴露给了客户端，第二个是目前没有成熟、开源的插件可用。我相信主要原因是合理技术方向不在于此，没人愿意去开发。

直接使用设备层的RTSP端点，可能存在兼容性问题。一个是它发送的码流是否标准化，第二个是市场上有多少设备没有暴露RTSP端点。

客户端方面，JSMpeg是兼容性较好的方案，WebRTC/MSE都有部分平台不支持（但是桌面级的浏览器大部分支持）。JSMpeg的缺点是：

1. 如果基于WebGL渲染，受限于浏览器WebGL上下文最大数量，多画面可能无法渲染。某些流媒体服务器支持在服务器端合成多画面Grid，可以规避此缺点
2. 如果基于Canvas2D渲染，画质较差（我的机器上还有莫名其妙的斜线）
3. 对码流格式要求严格，仅仅支持MPEG-TS，此格式压缩比差，网络带宽占用大
4. 性能相对较差，尽管使用了MPEG-TS这种简单的视频格式，基于JavaScript解码渲染仍然使客户端压力较大。我的机器（i7-4940MX / Quadro K5100M / Ubuntu 14.04 LTS）上会出现卡顿情况

和JSMpeg类似的库是Broadway，后者能够进行Baseline的H.264解码。如果设备支持Baseline H.264输出，使用Broadway可以很好的解决服务器端转码导致的资源消耗问题。

1. Audio and Video Delivery
2. W3C Recommendation - Media Source Extensions™
3. WebRTC Project Home
4. HTML5 视频直播（三）

The post HTML5视频监控技术预研 appeared first on 绿色记忆.

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 绿色记忆.

AngularJS是用于创建动态Web应用的框架，它为克服HTML语言的缺点而生。

HTML能够很好的声明静态文档，灵活的进行页面布局。但是，它缺乏声明动态视图的能力。为了解决这一问题，前些年的Web开发，通常采用以下的技术手段：

1. 基于服务器端脚本来生成HTML页面：这种方式的缺点是，需要大量的页面导航，并且增加了服务器CPU的负担。服务器端脚本有两种开发风格：
   1. 以脚本语言为中心：使用JSP、PHP、ASP等脚本语言完成开发工作，这很容易导致UI代码和应用逻辑的耦合，难以维护
   2. 以模板或标签库中心：使用Velocity、Structs标签库、EL表达式等框架，来生成HTML页面。这种风格可以较好的解耦UI代码和应用逻辑
2. 以JavaScript为中心完成HTML页面绘制：例如ExtJS框架。这种方式可以非常灵活的生成并操控HTML页面，可以通过XHR避免页面导航。其缺点是复杂性高，完全丢弃了HTML语言本身的优势

AngularJS某种程度上结合了这两种方式的优点：

1. 类似于模板或标签库。AngularJS扩展了HTML的语法，采用简洁易读的方式声明页面组件，支持数据绑定和依赖注入。重要的是，所有操作都在浏览器中执行，与服务器无关
2. 类似于JavaScript框架。Angular实现了一个MVC框架，支持通过JavaScript对页面进行操控、与服务器通信（XHR）。可以实现单页面应用。单页面开发的支持对于移动WebApp非常重要，可以避免不必要的流量和性能（电量）损耗

AngularJS适合以CRUD为主要功能的应用，游戏、UI编辑器等需要复杂DOM操控的应用则不太适合，可以使用支持更低级抽象的JavaScript框架（例如jQuery）代替之。

1. 把DOM操控从应用逻辑中解耦是个非常好的主意，可以极大的改善可测试性
2. 可测试性和代码编写速度一样重要
3. 把客户端和服务器端完全解耦，以便并行开发、分别支持两端的重用
4. 让日常任务简单，让复杂任务可能

1. 避免注册回调（监听器）：到处出现的回调注册代码，让代码变得杂乱。AngularJS减少了你需要编写的大量样板式代码
2. 避免编程式的操控DOM：AngularJS支持声明式的指出视图如何随着应用状态的变化而变化。避免了编程式的操控DOM
3. 避免手工在UI和模型之间传递数据：AngularJS支持表单验证、数据绑定、自动UI更新

1. 特殊标记（Markup）：Angular在HTML中引入的新的记号，标记分为：
   1. 指令（Directive）：以HTML属性或元素的形式出现。指令是AngularJS访问DOM元素唯一建议方式，遵循这一建议，可以增强可测试性。可以自己实现指令，以扩展Angular的功能
   2. 用于数据绑定的双花括号（Double curly braces）：形式为

      {{ expression | filter }}

       ，Angular把括号中的内容解析为文本并显示。expression是JavaScript风格的表达式；filter则负责格式化expression，让其更加可读
2. 指令：用于为DOM添加特殊行为、或者转换DOM子树的Angular标记
3. 模板（Template）：带有特殊标记的HTML文件被称为模板，AngularJS会使用编译器解析、处理此模板，并转换、渲染HTML
4. 数据绑定（Data binding）：在UI和模型之间同步数据，AngularJS支持双向绑定（two-way data binding）：当UI变化后，数据自动同步到对应的模型字段上；当模型字段变化后，UI自动更新
5. 依赖注入（DI）：AngularJS中所有组件，包括指令（directives）、过滤器（filters）、控制器（controllers）、服务（services）通过DI容器（Injector）创建和注入。依赖注入让所有组件能够自动获取其依赖对象的引用 
6. 模块（Modules）：用于管理一组相互协作的组件
7. 控制器（Controller）：在AngularJS中，控制器是一个构造函数，通常会附带一组行为。控制器自动创建一个Scope，并负责初始化之
8. 作用域（Scope）：AngularJS中的Scope是模型的容器，其属性就是模型的属性。Scope还作为某个DOM分支下所有Markup的上下文对象（this）。正如DOM结构一样，Scope也可能形成树状

Angular把核心模块（angular.js）和可选模块（angular-***.js）的代码分离在不同的JavaScript文件中，可以到官网代码库下载。核心模块和每个可选模块都有对应的压缩版本。

ng-bind

{{}}

{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

四位年份：{{ today | date:'yyyy' }} <!-- 2013 -->
两位年份：{{ today | date:'yy' }} <!-- 13 -->
一位年份：{{ today | date:'y' }} <!-- 2013 -->

英文月份：{{ today | date:'MMMM' }} <!-- August -->
英文月份简写：{{ today | date:'MMM' }} <!-- Aug -->
数字月份：{{ today |date:'MM' }} <!-- 08 -->
一年中的第几个月份：{{ today |date:'M' }} <!-- 8 -->

数字日期：{{ today|date:'dd' }} <!-- 09 -->
一个月中的第几天：{{ today | date:'d' }} <!-- 9 -->
英文星期：{{ today | date:'EEEE' }} <!-- Thursday -->
英文星期简写：{{ today | date:'EEE' }} <!-- Thu -->

24小时制数字小时：{{today|date:'HH'}} <!--00-->
一天中的第几个小时：{{today|date:'H'}} <!--0-->
12小时制数字小时：{{today|date:'hh'}} <!--12-->
上午或下午的第几个小时：{{today|date:'h'}} <!--12-->

数字分钟数：{{ today | date:'mm' }} <!-- 09 -->
一个小时中的第几分钟：{{ today | date:'m' }} <!-- 9 -->

数字秒数：{{ today | date:'ss' }} <!-- 02 -->
一分钟内的第几秒：{{ today | date:'s' }} <!-- 2 -->
毫秒数：{{ today | date:'.sss' }} <!-- .995 -->

上下午标识：{{ today | date:'a' }} <!-- AM -->
四位时区标识：{{ today | date:'Z' }} <!--- 0700 -->

<!-- 截取字符串前三个字符 -->
{{ str | limitTo:3 }}
<!-- 截取字符串最后五个字符 -->
{{ str | limitTo:-5 }}

{{ 123456789 | number }}
<!-- 1,234,567,890 -->
{{ 1.234567 | number:2 }}
<!-- 1.23 -->

{{[user1,user2] | orderBy:'name':true }}

selected="false"

selected="true"

<div ng-include="/partial.html" 
     ng-controller="指定既有控制器的名称" 
     onload="可以在模板加载完毕后执行一个表达式"
></div>

<input type="text" ng-model="person.name" />
<!-- 依据person.name进行切换 -->
<div ng-switch on="person.name">
    KO!!! Winner is 
    <!-- ng-switch-default不匹配任何ng-switch-when时显示 --> 
    <span ng-switch-default>null</span>
    <!--  ng-switch-when仅当属性值匹配时显示 -->
    <span ng-switch-when="Alex">{{ person.name }}</span>
</div>

<div ng-init="greeting='greetngs';person='Alex'">
    {{greeting}} {{person}}
</div>

<body ng-init="greeting='Hello'">
    <p ng-bind="greeting"></p>
</body>

<div ng-bind-template="{{message}}{{name}}"></div>

<input type="text" ng-model="user.name" />

<script type="text/javascript">
    angular.module( 'app', [] ).controller( 'Ctrler', function( $scope ) {
        $scope.cities = [ 
            { id : 1, name : 'Peking', country : 'China'}, 
            { id : 2, name : 'Nanking', country : 'China'}, 
            { id : 3, name : 'Canton', country : 'China' }, 
            { id : 4, name : 'Chunking', country : 'China' } , 
            { id : 4, name : 'Kyoto', country : 'Japan' }];
    } );
</script>
<body ng-app="app" ng-controller="Ctrler">
<!--
如果数据集（下面的cities）为数组，ng-options的语法可以是：
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr
（select表示下拉项值，label表示标签）
-->
<select ng-model="city" ng-options=
    "city.id as city.name group by city.country for city in cities">
    <option value="">Choose City</option><!-- 未选择时显示的元素 -->
</select>
</body>

ng-class="{cssClassName: when1,cssClassName1:when2}"

函数

angular.element()

addClass( "myClass yourClass" );

after( "<p>Test</p>" )

//对于元素：<input type="checkbox" checked="checked" />
htmlElement.checked == e.prop( "checked" ) == true
htmlElement.getAttribute( "checked" ) == e.attr( "checked" ) == "checked"
e.attr( "checked" ) == "checked" //1.6+
e.attr( "checked" ) == true   //1.6-

bind( eventType [, eventData ], handler )

one( events [, data ], handler )

jqLite提供额外的方法：

此外jqLite还提供了

$destroy

本节使用简单的付款应用的例子，介绍AngularJS的基本概念。

下面是付款应用最初的版本，运行后，可以观察到表单字段和总计金额的自动联动关系。

<body>
    <!-- ng-app指令用于初始化Angular应用 -->
    <!-- ng-init指令用于执行初始化动作 -->
    <div ng-app ng-init="qty=1;cost=2">
        <b>发货单:</b>
        <div>
            <!-- ng-model绑定表单元素到模型的字段，可以认为模型是一个单独的名字空间 -->
            数量: <input type="number" min="0" ng-model="qty">
        </div>
        <div>
            金额: <input type="number" min="0" ng-model="cost">
        </div>
        <div>
            <!-- 双括号标记，表达式 | 过滤器形式。可以访问模型字段并进行JavaScript运算 -->
            <b>总计:</b> {{qty * cost | currency}}
        </div>
    </div>
</body>

下面我们为付款应用添加一个AngularJS模块，并注册一个控制器类：

//声明一个AngularJS模块，声明后的模块可以被ng-app引用
var app = angular.module( 'invoiceModule', [] );
//注册一个控制器类
app.controller( 'InvoiceController', function() { //构造函数
    //成员变量
    this.qty = 1;
    this.cost = 2;
    this.inCurr = '欧元';
    this.currencies = [ '美元', '欧元', '人民币' ];
    this.usdToForeignRates = {
        '美元' : 1,
        '欧元' : 0.74,
        '人民币' : 6.09
    };
    //成员函数
    this.total = function total( outCurr ) {
        return this.convertCurrency( this.qty * this.cost, this.inCurr, outCurr );
    };
    this.convertCurrency = function convertCurrency( amount, inCurr, outCurr ) {
        return amount * this.usdToForeignRates[outCurr] / this.usdToForeignRates[inCurr];
    };
    this.pay = function pay() {
        window.alert( "谢谢！" );
    };
} );

 修改HTML文件，使用控制器：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="lib/angular.js"></script>
<script type="text/javascript" src="invoice-module.js"></script>
</head>
<body>
    <!-- 可以指定ng-app使用的主模块（Main module），AngularJS启动时，会使用初始化该模块，以及它依赖的所有其它模块-->
    <!-- ng-controller 指定该ng-app对应的控制器，该控制器对所有子元素负责 -->
    <!-- InvoiceController as invoice 相当于在当前Scope定义var invoice = new InvoiceController(); -->
    <div ng-app="invoiceModule" ng-controller="InvoiceController as invoice">
        <b>发货单:</b>
        <div>
            <!-- ng-model可以绑定控制器的成员变量 -->
            数量: <input type="number" min="0" ng-model="invoice.qty" required>
        </div>
        <div>
            金额: <input type="number" min="0" ng-model="invoice.cost" required>
        </div>
        <div>
            币种: 
            <select ng-model="invoice.inCurr">
                <!-- ng-repeat用于重复指令所在元素，c作为当前迭代元素 -->
                <option ng-repeat="c in invoice.currencies">{{c}}</option>
            </select>
        </div>
        <div>
            <b>总计:</b> <span ng-repeat="c in invoice.currencies"> {{invoice.total(c) | currency:c}} </span>
            <!--  ng-click，当按钮被点击时，执行的处理函数 -->
            <button class="btn" ng-click="invoice.pay()">付款</button>
        </div>
    </div>
</body>
</html>

付款应用第二版的例子中，所有的逻辑都在控制器中。当应用程序变得复杂时，最好把视图无关的（View-independent）业务逻辑代码移动到服务层中，实现表现层与服务层的分离。

angular.module( 'finance', [/*不依赖其它模块*/] ) 
//下面声明了一个名为currencyConverter的对象工厂，调用工厂函数将返回一个currencyConverter服务
.factory( 'currencyConverter', function() { //这是工厂函数，不是构造器
    var currencies = [ '美元', '欧元', '人民币' ];
    var usdToForeignRates = {
        '美元' : 1,
        '欧元' : 0.74,
        '人民币' : 6.09
    };
    var convert = function( amount, inCurr, outCurr ) {
        return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
    };
    //这个对象才是currencyConverter服务，它包含一个属性、一个方法：
    return {
        currencies : currencies,
        convert : convert
    };
} );

angular.module( 
        'invoiceModule',     //模块名
        [ 'finance' ]  //所依赖的模块的列表
)
.controller( 'InvoiceController', [ 
    //数组，前面是需要注入的组件的声明，最后是当前组件的构造函数
    //这里会发生依赖注入，AngularJS发现currencyConverter是一个工厂，会调用它并生成服务对象，然后注入到InvoiceController的构造函数
    'currencyConverter',   
    //最后一个是控制器的构造函数，前面的这是依次需要注入的组件
    function( currencyConverter ) {
        this.qty = 1;
        this.cost = 2;
        this.inCurr = '欧元';
        this.currencies = currencyConverter.currencies;
    
        this.total = function total( outCurr ) {
            //改为调用服务提供的方法
            return currencyConverter.convert( this.qty * this.cost, this.inCurr, outCurr );
        };
        this.pay = function pay() {
            window.alert( "谢谢！" );
        };
    } 
] );

通常，Web应用都需要与后端HTTP服务进行通信，我们进一步改造付款应用。在这一版本中，我们让Service基于Ajax与后端通信：

angular.module( 'finance', [] ).factory( 'currencyConverter', [ 
    '$http', // 服务工厂需要注入此依赖
    function( $http ) {
        var currencies = [ '美元', '欧元', '人民币' ];
        var usdToForeignRates = {}; // 我们将从后端服务获得汇率列表
    
        var convert = function( amount, inCurr, outCurr ) {
            return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
        };
        //获取汇率
        var refresh = function() {
            //通过jsonp执行跨域请求
            return $http.jsonp( BACKEND_URL ).then( function( response ) {
                //回调函数
                usdToForeignRates = response.data.query.results.rate;
            } );
        };
    
        refresh(); 
    
        return {
            currencies : currencies,
            convert : convert
        };
    } 
] );

可以认为模块是多种应用程序组件——控制器、服务、过滤器、指令，等等——的容器。

传统的应用程序具有Main函数作为入口点，通过该入口点，可以实例化应用程序的其他组件。Angular没有这的入口点，它只是通过模块机制，声明式的指定应用程序该如何启动。这种方式具有以下优点：

1. 声明性的过程简洁，易于理解
2. 可以保持全局命名空间的清洁
3. 可以通过模块组织可重用组件
4. 单元测试中可以仅加载需要的代码（模块）

对于大规模的应用程序，你应该分割出多个模块：

1. 每个特性（Feature）设置一个模块
2. 每个可重用组件一个模块，特别是指令和过滤器
3. 应用程序主模块，作为应用入口，依赖于上述模块，包含初始化代码

每个HTML页面可以对应一个AngularJS应用，通过指令

ng-app

ng-app指令可以定义在任何HTML节点上，这意味着你可以让页面的一部分使用Angular实现，其它部分使用别的JavaScript框架。

在模块启动期间，Angular可以执行一系列配置、运行块：

1. Config块：在Provider注册和配置阶段被执行。只有Provider、Constant可以被注入到Configuration块，这可以避免在服务尚未配置好之前意外的初始化它们。配置块调用方式为：
   

   module.config(function(injectables){});

    
2. Run块：在Injector创建好之后执行，用来kickstart应用程序。只有Instance、Constant可以被注入到Run块，这可以避免在应用程序运行期间再进行系统配置。运行快的调用方式为：
   

   module.run(function(injectables){});

    

Angular提供了一系列的快捷方法，调用它们和执行Config块是等价的：

angular.module('app', []).
value('a', 123). 
factory('a', function() { return 123; }).
directive('directiveName', ...).
filter('filterName', ...);

//和下面的代码等价 

angular.module('myModule', []).
config(function($provide, $compileProvider, $filterProvider) {
  $provide.value('a', 123);
  $provide.factory('a', function() { return 123; });
  $compileProvider.directive('directiveName', ...);
  $filterProvider.register('filterName', ...);
});

上述代码向Angular（的Injector）注册若干组件（值、服务、指令、过滤器），确切的说，是注册组件的Provider。Provider告知了Angular如何创建这些组件，你可以简单的把Provider理解为工厂，本文后续章节会详细介绍Provider。

Run块是和Main函数最相似的组件，它在所有服务均已配置、Injector已经创建后执行。在Angular中，Run块通常存放一些难于单元测试的代码。 

模块可以依赖于（require）其他模块，被依赖模块的Config块，总是先于依赖它的模块的Config块执行。此规则同样适合Run块。

每个模块只能被加载一次，即使很多模块都依赖于它。

语句：

angular.module('myModule', [])

语句：

angular.module('myModule')

所谓模板就是添加了Angular特殊标记的HTML。这些特殊标记包括：指令、双括号标记、过滤器、表单控件（用于验证用户输入）。 

在复杂的应用中，Angular支持在单个主页面下，使用多个模板片断（partial templates）来显示多个应用视图。所谓模板片断，就是分散在不同HTML文件中的模板片段。你可以使用

ngView

$route

在Angular中，视图就是模型在模板上的投影。就好像你的影子会随着你走动一样，模型的任何变化也会体现到视图上。

在Angular中，控制器是一类特殊的服务，其增强了视图的功能：

1. 控制器可以提供行为，供视图中事件监听指令调用
2. 控制器可以方便的扩展$scope，添加模型属性

ng-controller

$scope

应该避免使用控制器来：

1. 操控DOM。控制器应当仅仅包含业务逻辑，如果其中包含任何展现层逻辑，会严重的影响可测试性。使用数据绑定、指令可以封装大部分DOM操作
2. 格式化输入。可以使用Angular表单控件来完成
3. 过滤输出。可以使用Angular过滤器来完成
4. 在控制器之间共享代码或状态。可以使用Angular Service完成
5. 管理其它Angular组件的生命周期，例如创建Service实例

通过为$scope添加必要的属性来初始化之，这些属性全部可以在HTML子元素的标记中访问：

angular.module('myApp').controller('GreetingController', ['$scope', function($scope) {
    $scope.greeting = 'Hola!';  //为$scope添加状态
    $scope.double = function(value) { return value * 2; }; //为$scope添加行为
}]);

<!-- 子元素都可以访问$scope，可以直接访问属性、方法 -->
<div ng-controller="GreetingController">
    {{ greeting }}
    <input ng-model="num"> equals {{ double(num) }}
</div>

控制器关联的DOM元素可以具有嵌套关系，相应的，这些控制器对应的Scope也具有嵌套关系，这类似于块级作用域： 

<div ng-controller="MainController">
    <p>Hello, {{name}}!</p>

    <div ng-controller="ChildController">
        <p>Hello,{{name}}!</p>
        <div ng-controller="GrandChildController">
            <!-- GrandChildController的$如果定义了$scope.name，则使用，否则到外层scope中搜索 -->
            <p>Hello, {{name}}!</p> 
        </div>
    </div>
</div>

Angular中的服务是通过DI组织在一起的一群可替换对象，用于在应用程序中组织和共享代码。服务具有以下特性：

1.  延迟初始化：仅当某个组件依赖于它，服务才被创建
2. 单例：所有依赖者都获得同一个服务实例的引用

Angular内置了若干重要的服务，例如$http。

开发人员可以定义自己的服务，并且通过一个服务名称、服务工厂函数，将其关联到某个模块。服务工厂函数可以返回一个对象/函数，此返回值（而非工厂函数本身）将被注入到依赖者中。

与所有Angular组件一样，服务也可以声明自己的依赖项。

可以在模块的config函数中，通过$provide服务注册新的服务：

angular.module( 'myModule', [] ).config( [ '$provide', function( $provide ) {
    $provide.factory( 'serviceId', function() {
        return new Object();
    } );
} ] );

这种方式常用在单元测试中，仿冒被测试组件的依赖项。

Scope是应用程序数据模型（Data Model，简称Model）的容器，某些时候你可以认为它和数据模型是同义词。同时Scope也是表达式的执行上下文。Scope形成嵌套的、层次性结构，就像DOM结构本身一样。Scope能够用于监控表达式、传播事件。

Scope充当模板（视图）、模型、控制器之间的粘合剂，它让模型和视图解耦，却又能保持同步。

1. Scope提供了

   $watch

    函数，用于观察模型的变化。利用此API你可以把模型变更通知给整个Angular应用甚至Angular领域之外
2. Scope提供了

   $apply

     函数，应用来自Angular领域之外（控制器、服务、Angular事件处理器）的模型变化到视图组件

通过嵌套，可以限制Scope对应用组件属性的访问，同时允许Scope对共享模型属性的访问。内嵌的Scope分为两类：

1. 子作用域（Child scopes）：利用JavaScript原型机制，从父Scope继承属性
2. 隔离作用域（Isolate scopes）：不从父Scope继承属性

Scope的（自定义）属性，就是数据模型的属性。

Scope是控制器和视图之间的桥梁。在模板链接期间，指令在Scope上创建$watch表达式。$watch允许指令在属性变化时获得通知，指令因而能够更新DOM的渲染。

尽管控制器和视图都引用Scope，但是它们绝不互相引用。这确保了可测试性。视图应当仅仅和Scope相关，从中获得渲染所需数据。

每个Angular应用程序都包含唯一的根Scope，此根Scope下可以有多个Child Scope。你可以注入

$rootScope

当Angular去估算一个表达式

{{varName}}

ng-scope

下面的例子会创建两层、三个Scope：

<body ng-app ng-init="names = ['Alex','Wong']"> <!-- 根Scope -->
<span ng-repeat="name in names">{{name}}</span> <!-- 重复指令，每次循环创建一个Scope -->

上述模板生成的DOM结构如下： 

<html ng-app="" ng-init="names = ['Alex','Wong']" class="ng-scope">
    <body>
        <!-- ngRepeat: name in names -->
        <span ng-repeat="name in names" class="ng-binding ng-scope">Alex</span>
        <!-- end ngRepeat: name in names -->
        <span ng-repeat="name in names" class="ng-binding ng-scope">Wong</span>
        <!-- end ngRepeat: name in names -->
    </body>
</html>

你可以通过

angular.element(aDomElement).scope()

Angular的事件系统是以Scope为中心的，Scope负责向外发出事件。尽管不同Scope可以通过共享变量进行通信，但是你应当更依赖事件机制，以便解耦不同应用组件。

Scope的事件传播方式与DOM事件类似：

1. 向下广播（

   $broadcast(eventName,eventArgs)

    ）：沿Scope链，向下传播到所有子代作用域。如果从$rootScope上调用，相当于全局广播
2. 向上冒泡（

   $emit(eventName,eventArgs)

    ）：沿作用域链，向上传播到所有祖先作用域

在可以传播事件的同时，Scope还支持注册事件监听器：

$on(eventName,function listener(event, eventArgs));

$exceptionHandler

event

defaultPrevented

下面是Scope事件传播的一个例子：

<script type="text/javascript">
    angular.module( 'eventModule', [] ).controller( 'EventController', [ '$scope', function( $scope ) {
        $scope.count = 0;
        //注册事件监听器
        $scope.$on( 'HelloEvent', function() {
            $scope.count++;
        } );
    } ] );
</script>
</head>
<body ng-app="eventModule">
    <div ng-controller="EventController"><!-- 每个ng-controller都会创建自己的实例 -->
        <!-- Root Scope -->
        Root scope <tt>HelloEvent</tt> count: {{count}}
        <ul>
            <li ng-repeat="i in [1]" ng-controller="EventController">
                <button ng-click="$emit('MyEvent')">Emit</button> <!-- 触发事件，向上传播 -->
                <button ng-click="$broadcast('MyEvent')">Broadcast</button> <br> <!-- 触发事件，向下传播 -->
                Middle scope <tt>HelloEvent</tt> count: {{count}} <!-- Current Scope -->
                <ul>
                    <!-- Child Scope -->
                    <li ng-repeat="item in [1, 2]" ng-controller="EventController">Leaf scope <tt>HelloEvent</tt> count: {{count}} </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

1. 创建：$rootScope是在应用启动时，由$Injector自动创建的；在模板链接阶段，某些指令（ng-controller、ng-repeat等）会创建Child scope
2. 观察者注册：在模板链接阶段，指令会通过

   $watch(watchExpression, listener)

    注册观察者（Watcher）。watchExpression可以是Scope的一个属性、一个表达式的文本、或者一个函数（函数的返回值作为需要监控的值），listener只会在watchExpression当前值与先前值不相等时执行。很多指令会隐式的注册观察者，例如ngModel、{{}}、ngBind等
3. 修改模型：要保证模型的修改被正确的监控（observed）到，应当使用

   scope.$apply()

    来执行修改。Angular的API会自动调用$apply，因此在控制器中同步的修改模型或者通过$http、$timeout、$interval 等服务异步修改模型时，不需要显式调用该方法。该方法的规格如下：
   

   /**
    * @param expr 字符串表达式或者回调函数，回调函数唯一入参是当前$scope
    * @returns 表达式或者回调函数的执行结果
    */
   function $apply(expr){}

4. 监控模型的修改：在$apply调用的结尾，Angular会在$rootScope上直接执行一个 

   $digest()

    循环，此操作会传播到所有Child scope上。所有被观察的表达式（watchExpression）被重新估算，以确认修改是否发生（脏值检查）。如果发生，则执行listener指定的逻辑
5. 销毁 ：当Child scope不再需要，Angular会调用

   scope.$destroy()

    以销毁之。销毁后，$digest操作不会在传播到当前Child scope，并且Child scope模型所占用的内存空间可以被回收

依据其与Scope交互的方式，可以把指令分为两类：

1. 负责观察的指令（Observing directives）：例如{{双括号表达式}}，它们通过$watch注册一个监听函数，每当表达式的值发生变化，这类指令都会收到通知，以便更新视图
2. 负责监听（用户操作）的指令：例如ng-click，它们注册DOM事件的监听函数，当DOM事件发生时，它们使用$apply()方法执行关联的表达式并更新视图

再次强调：使用不属于Angular领域的方式操控模型，必须通过$apply()方法完成，否则监听器可能无法正常的更新视图。

Scope与控制器的交互主要有以下几种情况：

1. 控制器利用Scope向模板暴露方法
2. 控制器定义可以改变模型（Scope的属性）的方法
3. 控制器可以注册模型的观察者（Watcher）

在Scope上进行脏检查是很频繁的操作，因此$watch指定的脏检查表达式应当是高效的，不能包含针对DOM元素的操作，因为DOM操作相对于JavaScript属性访问，速度有数量级的差距。

此外，不要在控制器中显式调用作用域的$watch方法， 这导致可测试性降低。

脏检查可以依据三种策略完成：

1. 基于引用的检查，通过

   scope.$watch (exp, listener, false)

    指定此策略。仅当表达式的返回值变为一个新的对象时，才认为数据已脏。也就是说，集合内部增减元素，不认为集合变脏
2. 基于集合内容的检查，通过调用

   scope.$watchCollection(exp,listener)

    指定此策略。如果表达式返回值是一集合，当添加元素、删除元素、改变元素顺序时，也认为集合变脏
3. 基于值的检查，通过调用

   scope.$watch(exp,listener,true)

    指定此策略。表达式内任何嵌套的对象发生变化时，都能检测为脏数据。这种方式最强大也最昂贵，在每次digest时，被观察表达式的整个对象结构需要被遍历

如下图，左侧显示的浏览器事件循环，右侧显示了AngularJS对浏览器事件循环的扩展：

浏览器事件循环：

1. 首先需要明确一点，浏览器中的JavaScript脚本执行是“单线程”的，这意味着事件需要一件件处理，事件监听函数需要一个个执行
2. 事件循环（Event-loop）等待一个事件的到达，这些事件可以是用户交互、定时器事件、网络事件（来自服务器的响应）
3. 事件的回调函数被执行。此时进入JavaScript上下文。回调函数可能修改DOM的结构
4. 回调执行完毕后，浏览器退出JavaScript上下文，并依据修改后的DOM结构重新渲染视图

Angular修改了上述第二步，把JavaScript上下文分割为：经典的JavaScript上下文、Angular执行上下文两个部分。只有在Angular上下文中执行的操作才能受益于Angular数据绑定、异常处理、属性监控。通过$apply可以进入Angular上下文。 

Angular执行上下文的工作流流程如下：

1. 调用scope.$apply(fn)进入Angular执行上下文。fn是你期望在Angular执行上下文中完成的操作
2. Angular执行fn，通常会改变应用程序状态
3. Angular进入Digest循环。该循环由两个更小的循环组成，分别处理$evalAsync队列、$watch队列。Digest循环会迭代执行，直到模型变得“稳定”——$evalAsync队列为空、$watch不包含任何脏数据。Digest循环之所以需要反复执行，是因为某个表达式的估算可能存在副作用——导致其它表达式的值发生改变
4. $evalAsync 队列用于调度那些需要在当执行上下文外部完成的工作。例如：指令、控制器直接调用

   $evalAsync(expr)

    后，expr会在Angular操控DOM之后，浏览器渲染之前被执行
5. $watch列表由前文介绍的

   scope.$watch()

    注册的表达式组成，这些表达式在上一次迭代后可能发生变化。如果检测到变化，则对应的监听函数被执行，典型操作是更新DOM
6. 一旦Digest循环迭代完毕，退出Angular执行上下文、JavaScript上下文。随后浏览器渲染视图，反映出DOM更新

Angular的Injector子系统负责组件管理：创建组件、解析依赖、注入依赖。

依赖注入在Angular中广泛应用，你可以在定义一个组件时，以及调用模块的

run

config

1. 通过工厂函数或者构造函数定义的服务、指令、过滤器、动画等组件，可以注入service、value类型的组件作为依赖
   

   //通过工厂函数定义组件：
   angular.module('myModule', [])
       //第二个参数如果为数组，那么除了最后一个，都是需要注入的依赖
       .factory('serviceId', ['depService', function(depService) {
         //服务工厂函数
       }])
       .directive('directiveName', ['depService', function(depService) {
         //指令工厂函数
       }])
       .filter('filterName', ['depService', function(depService) {
         //过滤器工厂函数
       }]
   );

2. 通过构造函数定义的控制器，可以注入service、value类型的组件作为依赖。并且可以注入其它特殊的依赖，例如$scope：
   

   someModule.controller('MyCtrl', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
     $scope.aMethod = function() {
     }
   }]);

3. run方法支持一个回调函数作为入参，在回调中，你可以注入service、value、constant类型的组件
4. config方法支持一个回调函数作为入参，在回调中，你可以注入provider、constant类型的组件。run、config方法的例子如下：
   

   angular.module( 'myModule', [] )
   //指定在模块配置阶段执行的函数
   .config( [ 'depProvider', function( depProvider ) {
       
   } ] )
   //指定在模块运行期间执行的函数
   .run( [ 'depService', function( depService ) {
       
   } ] );

有三种方式可以告知Injector，组件需要哪些依赖：

1. 推荐的方式：内联数组记法，为模块的相应方法（controller、factory等）第二个参数传入数组，其最后一个元素是工厂/构造函数，其余元素都是字符串形式的依赖声明：
   

   module.controller( 'HelloCtrler', [ '$scope', 'greeter', function( $scope, greeter ) {
   } ] );

2. 使用$inject属性执行依赖注入：
   

   var HelloCtrler = function( $scope, greeter ) {};
   HelloCtrler.$inject = [ '$scope', 'greeter' ];
   someModule.controller( 'HelloCtrler', HelloCtrler );

3. 隐式注入。这种方式最简单，但是不支持压缩JavaScript：
   

   module.controller('HelloCtrler', function($scope, greeter) {
       //依据构造函数入参名称，自动寻找对应的依赖，不需要字符串显式说明依赖项的名称
   });

    使用

   ng-strict-di

    指令可以禁用隐式注入。手工启动Angular时，可以通过如下方式禁用：

   angular.bootstrap(document, ['app'], {
     strictDi: true
   });

Angular表达式类似于JavaScript表达式。表达式主要用于插值绑定，例如

<span title="attr-{{ attrBinding }}">{{ textBinding }}</span>

ng-click="functionExpression()"

1. 上下文：JavaScript表达式的上下文对象是Window；Angular表达式的上下文对象是一个scope对象
2. null/undefined安全性：Angular对点号导航中出现null/undefined的表达式，解析为null/undefined；JavaScript则抛出ReferenceError/TypeError。在Angular中，表达式

   {{a.b.c}}

    和

   {{((a||{}).b||{}).c}}

    是等价的
3. 控制流：Angular表达式不支持流程控制语句，例如条件分支、循环、异常处理。三元操作符

   a ? b : c

    是支持的
4. 函数声明：Angular表达式不支持函数声明
5. 正则式直接量：Angular表达式不支持声明正则式直接量
6. 创建对象：Angular表达式不支持通过new创建新对象
7. 其它：Angular不支持逗号操作符、void操作符
8. 过滤器：Angular支持类似于Linux Shell管道的语法，在表达式中指定过滤器，以格式化输出

如果要手工估算一个Angular表达式的值，可以调用

$eval()

Angular在内部使用

$parse

你可以使用

$window

$location

<script type="text/javascript">
    angular.module( 'app', [] ).controller( 'HelloCtrler', function( $window, $scope ) {
        $scope.name = 'World';
        $scope.greet = function() {
            $window.alert( 'Hello ' + $scope.name );
        };
    } );
</script>
</head>
<body ng-app="app" ng-controller="HelloCtrler">
    <button ng-click="greet()">Greet</button>
</body>

ngClick、ngFocus等指令在其值表达式的当前上下文中暴露了一个

$event

所谓一次性绑定是指，表达式仅仅在第一次digest时估算一次，如果其值是非undefined，则以后不再估算。使用语法

{{::expression}}

一次性绑定可以用于减少资源消耗，因为它不会在后续的digest循环中被重新估算。

注意，如果绑定表达式中包含对象直接量，那么只有对象直接量的所有属性均非undefined，才停止后续估算。

插值绑定用于为HTML属性、文本提供值，或者部分值。

在编译阶段，Angular编译器利用

$interpolate

对于值类型为布尔的HTML属性，例如disabled，浏览器可能仅仅检查属性的存在性，而不看它的值，这导致

disabled="false"

disabled="{{isDisabled}}"

Angular提供了若干特殊指令，例如

ng-disabled

ng-readonly

ng-selected

ng-checked

某些浏览器会对属性值有效性进行验证，因此使用插值绑定可能导致错误，例如：

<svg><circle cx="{{cx}}"></circle></svg>

ng-attr-

<circle ng-attr-cx="{{cx}}"></circle>

对于驼峰式大小写属性，使用此前缀语法时，需要在大写字母前面加下划线，并把大写字母改为小写。例如绑定

viewBox

ng-attr-view_box

应当避免这样的用法：

<div ng-show="form{{$index}}.$invalid"></div>

可以通过依赖注入使用$interpolate，它是一个函数：

/**
 * @param text 包含{{}}标记的字符串
 * @param mustHaveExpression 如果为true，则text不包含表达式时返回null
 * @param trustedContext 用于安全性控制
 */
function $interpolate(text, mustHaveExpression, trustedContext){}

通过$interpolateProvider可以改变插值表达式相关的配置，例如：

module.config( function( $interpolateProvider ) {
    //修改插值表达式的起始、终止符号
    $interpolateProvider.startSymbol( '__' );
    $interpolateProvider.endSymbol( '__' );
} );

在Angular中，过滤器用于格式化表达式，并显示给用户。你可以在模板、控制器、服务中使用过滤器。过滤器可能很方便的自定义，其对应的API是定义在ng模块的provider：

$filterProvider

语法格式示例：

{{ expression | filter }}

<!-- 过滤器的结果可以传递给其它过滤器 -->
{{ expression | filter1 | filter2 | ... }}

<!-- 过滤器支持入参 -->
{{ expression | filter:argument1:argument2:... }}
<!-- 格式化数字，保留2位小数，结果为1,234.00-->
{{ 1234 | number:2 }}

要在这些组件中使用过滤器，只需要注入

<filterName>Filter

定制过滤器很简单，只需要调用模块的

filter(filterName, filterFunction)

通常filterFunction应当是“纯函数”——无状态且幂等。Angular依赖这一特征，仅在过滤器输入变化的时候，才执行过滤器。

尽管Angular建议把过滤器函数实现为无状态的，以便Angular执行性能优化，但是你还是可以使用下面的方式把过滤器声明为有状态的：

angular.module( 'app', [] ).filter( 'decorate', [ 'decoration', function( decoration ) {

    function decorateFilter( input ) {...}
    decorateFilter.$stateful = true; //声明为有状态过滤器
    return decorateFilter;
} ] );

有状态过滤器在每轮Digest循环中都被调用。 

Angular包含了若干指令、CSS样式类，用于双向数据绑定和HTML表单的处理。

双向数据绑定的关键指令是ngModel。该指令不但提供了视图、模型之间的双向同步机制，而且提供了额外的API以增强功能。

下面是Angular表单的简单例子：

<script type="text/javascript">
    angular.module( 'app', [] ).controller( 'Ctrler', [ '$scope', function( $scope ) {
        $scope.master = {};

        $scope.update = function( user ) {
            $scope.master = angular.copy( user );
        };

        $scope.reset = function() {
            $scope.user = angular.copy( $scope.master );
        };

        $scope.reset();
    } ] );
</script>
</head>
<body ng-app="app">
    <div ng-controller="Ctrler">
        <form novalidate> <!-- 禁用浏览器原生的表单验证功能 -->
            姓名：<input type="text" ng-model="user.name" /><br />
            <!-- Angular为HTML5的表单控件类型提供了基本的验证规则，
                 如果不通过验证，表单元素将不会同步到模型上，输入错误的电子邮件可以观察到这一点 
            -->
            邮件：<input type="email" ng-model="user.email" /><br />
            
            性别：<input type="radio" ng-model="user.gender" value="male" />男
            <input type="radio" ng-model="user.gender" value="female" />女<br />
            
            <input type="button" ng-click="reset()" value="重置" />
            <input type="submit" ng-click="update(user)" value="保存" />
        </form>
        <pre>user = {{user | json}}</pre>
        <pre>master = {{master | json}}</pre>
    </div>
</body>

ngModel指令添加了若干CSS样式类，用以修饰处于不同状态的表单控件：

在Angular中，表单对应了一个FormController的实例，而使用ngModel指令标注的表单控件则对应NgModelController的实例。表单、表单控件的HTML属性name的值，自动作为当前scope下的属性名——此属性就是FormController/NgModelController实例的引用。

上述特性意味着，可以使用Angular标准的绑定原语来访问表单、控件的内部状态。我们可以利用此特性来显示验证错误信息：

1. 当用户和控件交互后（$touched状态位被设置），显示验证错误信息
2. 当前用户提交表单时（$submitted状态位被设置），显示验证错误信息，即使用户没有和表单控件交互

下面的代码完善了上一个示例，添加了验证错误信息：

<script type="text/javascript">
angular.module('app', [])
.controller('Ctrler', ['$scope', function($scope) {
  $scope.master = {};

  $scope.update = function(user) {
    $scope.master = angular.copy(user);
  };

  $scope.reset = function(form) {
    if (form) {
      form.$setPristine(); //设置为从未交互状态
      form.$setUntouched(); //设置为失焦点状态
    }
    $scope.user = angular.copy($scope.master);
  };

  $scope.reset();
}]);
</script>
<body ng-app="app">
<div ng-controller="Ctrler" >
<form name="form" novalidate>
    姓名:
    <input type="text" ng-model="user.name" name="uName" required="" />
    <!-- ng-show指令用于在表达式估算结果为true的时候显示标签。如果结果为false，Angular会给元素添加.ng-hide样式 -->
    <span ng-show="form.$submitted || form.uName.$touched"> <!-- 如果表单已提交，或uName控件已经被点击过 -->
      <span ng-show="form.uName.$error.required">请输入你的姓名</span><!-- 如果required验证器失败 -->
    </span>
    <br/>
    邮件:
    <input type="email" ng-model="user.email" name="uEmail" required="" />
    <span ng-show="form.$submitted || form.uEmail.$touched">
      <span ng-show="form.uEmail.$error.required">请输入你的邮件地址</span><!-- 如果required验证器失败 -->
      <span ng-show="form.uEmail.$error.email">电子邮件格式错误</span><!-- 如果email验证器失败 -->
    </span>
    <br />

    <input type="button" ng-click="reset(form)" value="重置" />
    <input type="submit" ng-click="update(user)" value="保存" /><!-- 提交时，验证机制自动触发-->
</form>
  <pre>user = {{user | json}}</pre>
  <pre>master = {{master | json}}</pre>
</div>
</body>

默认的，表单元素值的任何改变都会立即触发模型更新、表单验证，你可以使用ngModelOptions指令覆盖此行为。例如：

ng-model-options="{ updateOn: 'blur' }"

updateOn: 'default blur'

你还可以让更新/验证延迟触发，例如

ng-model-options="{ debounce: 500 }"

延迟可以和触发事件联用：

<!-- 分别指定default、blur事件时的触发延迟 -->
ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

Angular为HTML5的input类型：text, number, url, email, date, radio, checkbox提供了基本的验证实现。并且提供了required, pattern, minlength, maxlength, min, max等专用于验证的指令。

具体的验证工作由一个个单独的验证函数（验证器）负责完成。验证函数存放在

ngModelController.$validators

验证函数必须满足如下规则：

1. 接收modelValue、viewValue作为入参，这两个参数分别代表模型的值、用户输入的值
2. 返回布尔值，表示验证是否通过

验证函数在以下时机调用：

1. 当输入控件的值变化时，即

   $setViewValue

    被调用时
2. 当模型发生变化时

注意：验证机制在成功运行

$parsers

$formatters

Angular依据验证函数的返回值，在内部调用

$setValidity

ngModelController.$error

Angular还支持异步验证，

ngModelController.$asyncValidators

promise

ngModelController.$pending

下面的例子中，定义了两个指令，分别在控件的控制器上注册同步、异步的验证器：

<script type="text/javascript">
var app = angular.module( 'app', [] );
var INTEGER_REGEXP = /^\-?\d+$/;
//定义新的指令
app.directive( 'integer', function() {
    return {
        require : 'ngModel',
        link : function( scope, elm, attrs, ctrl ) {
            //添加到验证器的集合中
            ctrl.$validators.integer = function( modelValue, viewValue ) {
                if ( ctrl.$isEmpty( modelValue ) ) {
                    return true;
                }
                if ( INTEGER_REGEXP.test( viewValue ) ) {
                    return true;
                }
                return false;
            };
        }
    };
} );

app.directive( 'username', function( $q, $timeout ) {
    return {
        require : 'ngModel',
        link : function( scope, elm, attrs, ctrl ) {
            var usernames = [ 'Jim', 'John', 'Jill', 'Jackie' ];
            //添加到异步验证器的集合中
            ctrl.$asyncValidators.username = function( modelValue, viewValue ) {
                if ( ctrl.$isEmpty( modelValue ) ) {
                    //$q是ng模块中定义的一个服务，用于辅助你异步的调用函数
                    return $q.when(); //直接返回
                }

                var def = $q.defer(); //创建一个Deferred对象，代表未来会完成的任务
                //延迟两秒执行
                $timeout( function() {
                    // 仿冒一个延迟到达的后台响应
                    if ( usernames.indexOf( modelValue ) === -1 ) {
                        def.resolve(); //解决期望的promise为指定的值
                    }
                    else {
                        def.reject(); //回绝期望的promise为指定的原因
                    }

                }, 2000 );

                return def.promise; //返回Deferred关联的Promise对象
            };
        }
    };
} );
</script>
<body ng-app="app">
<form name="form" class="css-form" novalidate>
  <div>
    尺寸:
    <input type="number" ng-model="size" name="size" min="0" max="10" integer />{{size}}
    <span ng-show="form.size.$error.integer">尺寸必须是一个整数</span>
    <span ng-show="form.size.$error.min || form.size.$error.max">尺寸的范围必须在0到10之间！</span>
  </div>
  <div>
    用户名:
    <input type="text" ng-model="name" name="name" username />{{name}}
    <span ng-show="form.name.$pending.username">正在检查用户名的可用性</span>
    <span ng-show="form.name.$error.username">用户名已经被占用！</span>
  </div>
</form>

由于验证器只是

ngModelController.$validators

app.directive( 'overwriteEmail', function() {
    var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i;

    return {
        require : 'ngModel',
        restrict : '',
        link : function( scope, elm, attrs, ctrl ) {
            // 仅当控制器（即NgModelController）存在，且其验证器包含email时，才覆盖
            if ( ctrl && ctrl.$validators.email ) {
                // 覆盖默认的电子邮件验证器
                ctrl.$validators.email = function( modelValue ) {
                    return ctrl.$isEmpty( modelValue ) || EMAIL_REGEXP.test( modelValue );
                };
            }
        }
    };
} );

上面基于ngShow指令来显示验证错误信息的方式，比较繁琐，Angular 1.3引入了

ngMessages

<form name="formx">
    <!-- 
        默认每次显示一条消息，ng-messages-multiple则允许显示多条信息
        ng-messages-includ可以把子节点的HTML存放到额外的模板中
    -->
    <div class="error" ng-messages="formx.name.$error" ng-messages-multiple>
        <div ng-message="required">当验证器required失败时显示的信息</div>
        <div ng-message="minlength">当验证器minlength失败时显示的信息</div>
        <div ng-message="maxlength">当验证器maxlength失败时显示的信息</div>
    </div>
</form>

Angular实现了所有基本的HTML表单控件（input、select、textarea），这些控件能够应付大部分的需求。如果你需要更多的灵活性，可以通过指令来编写自己的表单控件。

要使自定义表单控件能够与ngModel联用，并支持双向数据绑定，你必须：

1. 为控件对应的ngModelController实现

   $render

    方法。该方法负责显示传递给

   NgModelController.$formatters

    的数据
2. 每当用户和控件交互时，或者模型需要被更新时，调用

   $setViewValue

    方法

下面是一个例子：

<script type="text/javascript">
    //声明一个指令，其名称借用HTML5的contenteditable属性
    angular.module( 'app', [] ).directive( 'contenteditable', function() {
        return {
            require : 'ngModel',
            link : function( scope, elm, attrs, ctrl ) {
                // 失去焦点时，把视图的值设置到模型
                elm.on( 'blur', function() {
                    ctrl.$setViewValue( elm.html() );
                } );

                // 渲染函数：把模型反应到视图
                ctrl.$render = function() {
                    elm.html( ctrl.$viewValue );
                };

                // 从视图中初始化模型的值
                ctrl.$setViewValue( elm.html() );
            }
        };
    } );
</script>
<style type="text/css">
div[contentEditable] {
    border: 1px solid #B0B0B0; 
    cursor: pointer;
    width: 150px;
}
</style>
</head>
<body ng-app="app">
    <!-- contenteditable属性，表示内容可编辑的HTML元素，同时也是我们定义的指令 -->
    <div contenteditable="true" ng-model="content">Hello</div>
    <pre>model = {{content}}</pre>
</body>

概括的说，指令是DOM元素（属性、元素、注释、CSS类）上的标记。指令通知Angular的HTML编译器（

$compile

Angular自带了很多指令，你也可以创建自己的指令。在启动（Bootstrap）阶段，Angular会遍历整个DOM树，依据DOM匹配的指令进行相应的处理。

指令在模块上通过API：

directive(normalizedName, factoryFunc)

选择自己的指令名称时，应当注意避免使用ng前缀，不要选择未来可能成为HTML内置标签名的单词，比避免冲突。

指令可以具有属性，当指令通过DOM元素标记时，指令的属性体现为DOM属性。

当指令是DOM元素声明的一部分时，Angular认为指令匹配元素：

<!-- input元素匹配ngModel指令 -->
<input ng-model="foo">
<input data-ng-model="foo">
<input x-ng_model="foo">

<!-- person元素匹配person指令 -->
<person>{{name}}</person>

指令作为JavaScript对象，我们通常使用它的正规化（normalized）名称：大小写敏感的、驼峰式大小写形式。例如： 

ngModel

但是HTML是大小写不敏感的，因此在DOM中我们使用纯小写来引用指令，并且通常使用短横线分隔风格。例如：

ng-model

DOM中的指令名称，到正式的指令名称的转换规则如下：

1. 去除

   x- 

    或者

   data- 

    前缀
2. 把

   :

    、

   -

    、

   _

    分隔的单词，改为驼峰式大小写

$compile可以基于DOM元素名称、属性、CSS类名、甚至注释来匹配指令，Angular提供的指令支持这全部四种节点。下面的例子示例了在模板的不同位置使用demoDir指令的方式：

<!-- 元素名称 -->
<demo-dir></demo-div>

<!-- 元素属性 -->
<span demo-dir="exp"></span>

<!-- 注释-->
<!-- directive: demo-dir exp -->

<!-- CSS类-->
<span class="demo-dir: exp;"></span>

最好只通过元素名称、 属性来引用指令，这样Angular更容易判断给定的元素匹配什么指令。

注释中携带指令，主要用于指令需要跨越多个兄弟DOM元素的情况。在Angular1.2中引入的

ng-repeat-start

ng-repeat-end

可以使用restrict选项限制指令可以在哪些节点上引用：

app.directive('myCustomer', function() {
    return {
        restrict: 'AE'
        //默认值：AE表示可以在属性、元素名上引用指令
        //A：属性；E：元素；C：CSS类名
    };
});

决定通过元素名称还是属性来引用指令时，参考以下意见： 

1. 当为你的模板创建DSL（领域特定语言）时，考虑使用元素名称
2. 当装饰既有HTML元素，以增加新功能时，考虑使用属性

如果你有一段反复使用到的HTML片段，你可以通过指令将其封装起来，以便重用，减少重复代码。显示一个简单的例子：

<script type="text/javascript">
    angular.module( 'app', [] ).controller( 'Ctrler', [ '$scope', function( $scope ) {
        $scope.user = {
            name : 'Alex Wong',
            address : 'No.20 Waterside Pearl Plaza'
        };
    } ] ).directive( 'userInfo', function() {
        //指令工厂函数返回一个对象，对象的每一个属性称为“选项”（option）
        return {
            template : 'Name: {{user.name}} <br/>Address: {{user.address}}'
        };
    } );
</script>
<body ng-app="app" ng-controller="Ctrler">
    <span user-info></span>
</body>

上面的例子中，我们通过

template

templateUrl

app.directive( 'userInfo', function() {
    return {
        templateUrl : '../userInfo.html'
    };
} );

templateUrl选项还可以指定一个返回URL或者HTML模板内容的函数，该函数接受两个参数：指令对应的HTML元素、一个关联到该HTML元素的attr对象。注意在该函数中你不能对Scope进行任何访问，因为模板加载时Scope尚未初始化。下面的例子示例了templateUrl的这种用法：

<script type="text/javascript">    
    app.directive( 'userInfo', function() {
        templateUrl: function(elem, attr){
            return 'user-info-'+attr.type+'.html';
          }
    } );
</script>
<body ng-app="app" ng-controller="Ctrler">
  <div user-info type="name"></div>
  <div user-info type="address"></div>
</body>

上面的例子有个严重的缺陷，注意模板内容：

'Name: {{user.name}} <br/>Address: {{user.address}}'

Angular允许为指令指定

scope

=用于进行双向绑定。建立关联后，在隔离作用域修改变量，该变量在外部作用域中映射的变量同时改变，反之依然。

下面使用隔离作用域，对上一个例子进行改造：

<script type="text/javascript">
    angular.module( 'app', [] ).controller( 'Ctrler', function( $scope ) {
        //在当前Scope下定义两个属性
        $scope.alex = { name : 'Alex Wong', address : 'No.20 Waterside Pearl Plaza' };
        $scope.meng = { name : 'Meng Lee',  address : 'No.11 Jinxiu Homeland' };
    } ).directive( 'userInfo', function() {
        return {
            restrict : 'E',
            //隔离作用域，创建自己的scope
            scope : {
                //=uInfo表示通过HTML属性u-info来指定隔离Scope中info对应外部Scope的哪个属性
                info : '=uInfo'  // '='等价于'=info'。该属性值必须使用正规化的驼峰式大小写
            },
            //模板文本或HTML文件，使用指令的隔离作用域
            template : 'Name: {{info.name}} Address: {{info.address}}'
        };
    } );
</script>
<body ng-app="app" ng-controller="Ctrler">
    <!-- info的值，对应当前Scope下的属性名 -->
    <user-info u-info="alex"></user-info><br/><user-info u-info="meng"></user-info>
</body>

一旦指定了scope选项，那么外部作用域的任何属性，在指令的template中默认都不可用，除非在scope选项中声明。 

&允许指令的隔离作用域向外部作用域单向传递变量，用于估算定义在指令属性中的表达式的值：

<script type="text/javascript">
    angular.module( 'app', [] ).controller( 'Ctrler', function( $scope, $timeout ) {
        $scope.name = 'Alex';
        $scope.message = '';
        $scope.hideDialog = function( message ) {
            $scope.message = message;
            $scope.dialogIsHidden = true;
        };
    } ).directive( 'myDialog', function() {
        return {
            scope : {
                //隔离作用域的close属性，由指令匹配元素的on-close属性指定
                //&绑定，允许指令在原始的作用域下执行任意表达式估算，而不是像=绑定那样哪些仅仅执行属性映射 
                'close' : '&onClose' 
            },
            template : 
            '<div class="alert"> ' +
            //虽然close在隔离作用域下执行，但是onClose指向的表达式在原始作用域$scope下估算
            //使用&绑定，可以通过一个映射，传递解析表达式需要的上下文变量，例如这里传递了一个message变量   
            '     <a href class="close" ng-click="close({message: \'Closed\'})">&times;</a> ' +
            ' </div>' 
        };
    } );
</script>
<body ng-app="app" ng-controller="Ctrler">
    {{message}}
    <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)"></my-dialog>
</body>

设置指令的

transclude

ng-transclude

<script type="text/javascript">
    angular.module( 'app', [] ).controller( 'Ctrler', [ '$scope', function( $scope ) {
        $scope.name = 'Alex Wong';
    } ] ).directive( 'transcludeDirective', function() {
        return {
            restrict : 'AE',
            transclude : true,
            scope : {}, //创建该指令自己的作用域
            link : function( scope, element ) { 
                //这里的Scope引用新创建的隔离作用域，而非Ctrler创建的作用域
                scope.name = 'Meng Lee'; 
            },
            //子模板中的绑定：
            //如果存在隔离作用域，则绑定到隔离作用域中的属性，当然你可以把隔离作用域映射到外部作用域
            //如果不存在隔离作用域，则自动绑定到外部作用域
            //子模板中的ng-transclude元素，不应有任何内容，会被指令实例的内容所覆盖
            //每出现一个ng-transclude，就把指令实例的内容合并为子元素
            template : '<div>{{name}}</div><div ng-transclude>Content will be removed</div><p ng-transclude></p>'
        };
    } );
</script>
<body ng-app="app" ng-controller="Ctrler">
    <!-- 指令实例子节点中的绑定，默认访问的是指令内部作用域，而使用了transclude后，反而访问指令外部的作用域 -->
    <transclude-directive><div>My name is {{name}}</div></transclude-directive>
</body>

其生成的HTML内容如下： 

<body ng-app="app" ng-controller="Ctrler" class="ng-scope">
    <transclude-directive class="ng-isolate-scope">
        <div class="ng-binding">Meng Lee</div> <!-- 绑定到隔离作用域 -->
        <!-- 下面两个则绑定到外部作用域-->
        <div ng-transclude="">
            <!-- 如果transclude-directive指令内部没有div元素，仅仅是文本节点，那么Angular自动创建一个span包裹文本节点-->
            <div class="ng-binding ng-scope">My name is Alex Wong</div>
        </div>
        <p ng-transclude="">
            <div class="ng-binding ng-scope">My name is Alex Wong</div>
        </p>
    </transclude-directive>
</body>

Angular的这种特性，可以让指令包裹任意一段可以访问外部作用域的HTML内容，并通过

ng-transclude

从指令使用者的角度来说，这种特性是合理的：

1. 指令使用者并不知道隔离作用域的细节，不应该让他使用隔离作用域
2. 子模板工作在隔离的作用域中，可以增强可复用性——不需要对“外部作用域”中存在哪些变量做假设。这使得子模板使用隔离作用域是必要的
3. 而用户在使用指令时，会很自然的认为自己在使用“外部作用域”

这种指令开发者、使用者视角的差异，导致了transclude机制的出现。

如果需要让指令能够操控DOM、注册DOM监听器，通常需要指定

link

/**
 * @param scope 一个Angular作用域对象，如果指令创建了隔离作用域，该参数是此隔离作用域，否则是上级作用域
 * @param element jqLite元素对象，当前指令匹配的元素
 * @param attrs 规范化的元素属性名到其值的映射
 * @param controller 指令所在的控制器实例。如果指令本身创建了自己的控制器，则该参数指向这个新的控制器
 * @param transcludeFn 
 */
function link( scope, element, attrs, controller, transcludeFn ) {
}

下面的例子中，我们创建一个指令，它依据用户指定的格式，每秒更新当前时间： 

<script type="text/javascript">
    angular.module( 'app', [] ).controller( 'Ctrler', function( $scope ) {
        $scope.format = 'yyyy-mm-dd HH:mm:ss';
    } ).directive( 'currentTime', function( $interval, dateFilter ) { //注入一个服务、一个过滤器作为依赖
        function link( scope, element, attrs ) {
            var format, timeoutId; //下面几个闭包的共享状态

            function updateTime() {
                element.text( dateFilter( new Date(), format ) ); //format可以使用scope.format代替
            }
            //对attrs.currentTime指定的表达式——format进行监控，也就是监控当前作用域下的format属性
            scope.$watch( attrs.currentTime, function( value ) { //等价于scope.$watch('format',...)
                format = value;
                //一旦发生变化，则触发一次更新操作
                updateTime();
            } );
            //开发新指令时，一定要注意执行必要的销毁操作
            //元素被销毁时的钩子，当由Angular编译器导出的DOM节点被销毁时，$destroy事件被触发
            //类似的，作用域被销毁时，也触发这一事件，你可以 scope.$on('$destroy', ...)
            element.on( '$destroy', function() {
                $interval.cancel( timeoutId ); //取消定时器
            } );
            //你也可以使用element.on添加若干DOM事件监听器

            // 开始循环处理，把句柄保存为共享闭包变量
            timeoutId = $interval( function() {
                updateTime();
            }, 1000 );
        }
        return {
            link : link
        };
    } );
</script>
<body ng-app="app" ng-controller="Ctrler">
    <!-- 
        format仅仅是5个字母的文本，还是另有其义，完全取决于指令如何解释它
        下面的两个指令都把它作为表达式看待
    -->
    时间格式：<input ng-model="format"> <br/>
    当前时间：<span current-time="format"></span>
</body>

template、templateUrl相当于指令的View，Angular还允许给指令添加

controller

下面是一个页签的例子，注意父子指令之间的通信：

<script type="text/javascript">
    angular.module( 'app', [] ).controller('Ctrler',function($scope){
        $scope.title1 = 'Title1';
    }).directive( 'myTabs', function() {
        return {
            transclude : true,
            scope : {},
            //指令可以使用该选项，声明其模板关联的控制器，就像ngController关联控制器到模板一样 
            controller : [ '$scope', function( $scope ) {
                var panes = $scope.panes = [];
                $scope.select = function( pane ) {
                    angular.forEach( panes, function( pane ) {
                        pane.selected = false;
                    } );
                    pane.selected = true;
                };

                this.addPane = function( pane ) {
                    if ( panes.length === 0 ) {
                        $scope.select( pane );
                    }
                    panes.push( pane );
                };
            } ],
            template : 
            ' <div>                                                                    ' +
            '     <span ng-repeat="pane in panes" style="margin-right:5px">            ' +
            '       <a href="" ng-click="select(pane)">{{pane.title}}</a>              ' +
            '     </span>                                                              ' +
            //指令的内容，全部纳入到下面的div内部 
            '   <div ng-transclude></div>                                              ' +
            ' </div>                                                                   '
        };
    } ).directive( 'myPane', function() {
        return {
            //指令的require选项，表示当前指令要求某个控制器的存在。如果找不到，$compile会抛出错误
            //前缀^表示，指令在其上级元素上寻找目标控制器。如果没有该前缀，仅在指令自己的元素上寻找 
            require : '^myTabs', 
            restrict : 'E',
            transclude : true,
            scope : {
                title : '@'  // 即@title，把指令title属性的值传入隔离作用域
            },
            //注意第四个参数tabsCtrl，它就是require来的控制器。该参数可以和require同时指定为数组
            link : function( scope, element, attrs, tabsCtrl ) {
                tabsCtrl.addPane( scope );
            },
            template : '<div style="margin-top: 24px" ng-show="selected" ng-transclude></div>'
        };
    } );
    
</script>
<body ng-app="app" ng-controller="Ctrler">
    <my-tabs>
        <my-pane title="{{title1}}">
            面板一内容
        </my-pane>
        <my-pane title="面板二">
            面板二内容
        </my-pane>
    </my-tabs>
</body>

该例子使用到了@限定符， 它允许从外部作用域单向的传递值到隔离作用域，传递的媒介仍然是指令属性，支持

attr="text"

attr="text{{expr}}"

从1.3版本开始Angular为ngRepeat、ngSwitch、ngView等指令提供了动画钩子。

Angular中的动画完全基于CSS样式类，只要你为HTML元素添加了CSS类，就可以应用动画：

<style>
<!--
.sample-show-hide {
    padding: 10px;
    border: 1px dashed black;
    background: #C0C0C0;
    width: 100px;
    /* 这里声明CSS变换规则 */
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
}
/* 这里指定了隐藏时的样式，每当Angular隐藏div时，会自动添加ng-hide样式 */
.sample-show-hide.ng-hide {
    opacity: 0;
}
-->
</style>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-animate.js"></script> <!-- 必须引入额外的JS库 -->
<script type="text/javascript">
    angular.module('app', ['ngAnimate']); //要使用动画，必须依赖ngAnimate模块 
</script>
</head>
<body ng-app="app"><!-- 也可以直接使用ngAnimate模块 -->
    <div ng-init="checked=true">
        <input type="checkbox" ng-model="checked" style="float: left; margin-right: 10px;">隐藏/显示
        <div class="sample-show-hide" ng-show="checked" style="clear: both;"></div>
    </div>
</body>

Angular可以监控通过ngClass添加、移除CSS样式类的动作，并执行对应的动画：

<style>
<!--
.css-class-add, .css-class-remove {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 5s;
}
/* 添加样式类后，最终需要变成大红字 */
.css-class, 
/* 在添加样式类的过程中，*-add、*-add-active类自动添加。它们的动画结果也必须时大红字，以便和css-class一致  */
.css-class-add.css-class-add-active { 
  color: #FF0055;
  font-size:2em;
}

.css-class-remove.css-class-remove-active { /* 类似，变换结果是默认元素样式  */
  font-size:1em;
  color: #000000;
}
-->
</style>
<p>
    <input type="button" value="设置" ng-click="myCssVar='css-class'">
    <input type="button" value="清空" ng-click="myCssVar=''">
    <br>
    <span ng-class="myCssVar">CSS动画文本</span>
</p>

可以调用注入的

$animate

module.directive( 'directive', function( $animate ) {
    return function( scope, element, attrs ) {
        element.on( 'click', function() {
            if ( element.hasClass( 'clicked' ) ) {
                $animate.removeClass( element, 'clicked' );
            }
            else {
                $animate.addClass( element, 'clicked' );
            }
        } );
    };
});

指令可以扩展既有HTML元素或者属性的行为，甚至创建具有新行为的HTML或属性。这样，在利用到HTML这一“声明式”语言的优势的基础上，我们可以对它进行无限扩展。

Angular的 HTML编译器，本质上是一个Angular服务，它的关键工作就是遍历整个DOM树，处理各种各样的指令。编译过程分为两个阶段：

1. 编译（Compile）：遍历DOM树，收集到所有指令。本阶段的产出是一个链接（Linking）函数。在此阶段，每个指令的compile函数被调用，任何可以跨指令实例的操作都应该放在compile中，而不是link中，以增强性能
2. 链接（Link）:通过把指令与特定Scope联合，来产生一个活动的视图——Scope上发生的任何变化，都会立即反应到视图上；用户与视图的任何交互，也会立即反应到Scope的模型字段上。在此阶段，每个指令的link函数被调用

这种编译、链接分离的设计，有助于提高性能。例如ngRepeat指令需要为循环中的每一个条目复制DOM元素一次，它只需要复制编译后的模板，而链接多次（编译一次）。

1. $compile遍历DOM，并匹配指令。如果一个指令匹配到元素，它会被加到元素的指令列表中，一个元素可以匹配多个指令
2. 当元素匹配的所有指令都被识别出来后，$compile依据指令的priority对它们进行排序
3. 每个指令的compile函数被执行，该函数可以修改DOM结构，compile函数返回一个link函数
4. 每个指令返回的link函数被串联为组合的LINK函数。LINK依次调用link
5. $compile调用LINK，让Scope与每个指令链接。在这一步，$compile会注册元素的监听器、设置$watch表达式

链接的结果是一个活动视图，具有双向绑定特性。下面的伪代码可以帮助理解编译过程：

var $compile = ...; // 被注入的编译器
var scope = ...;
var parent = ...; // 编译后的模板的父元素

var html = '<div ng-bind="exp"></div>'; //模板

// 第一步：解析HTML文本为DOM元素
var template = angular.element(html);

// 第二步：编译模板。在此指令可以修改DOM结构，但是很少有指令具有compile函数
var linkFn = $compile(template);

// 第三步：链接编译后的模板到Scope。克隆一份编译后的副本，与scope链接
var element = linkFn(scope);

// 第四步：添加链接后的活动视图到父元素
parent.appendChild(element);

Angular应用程序启动时，会创建一个Injector服务，该服务负责创建各种对象（包括来自ng模块的、来自应用主模块的、来自直接/间接依赖模块的），并把他们组织在一起（依赖注入）。Injector创建的对象可以分为两类：

1. 普通服务（Services ）：其API由开发者依据业务需要设计
2. 特殊对象（Specialized objects）：用于扩展Angular框架，遵从Angular框架的API规范。特殊对象包括：控制器、指令、过滤器、动画

在Angular中，你可以向Injector注册“Recipe”（菜谱），来告知Injector如何创建上述两类对象。Recipe包含两个要素：

1. 该Recipe要创建的对象的标识符
2. 关于如何创建对象的说明

Recipe分为5种类型，要注册这些Recipe，需要分别调用Angular模块的五种API：

1. Provider：这是最通用 的Recipe，其余四种，本质上是基于Provider的语法糖。Provider只是一个实现了

   $get

    方法的JavaScript对象，这个$get是此Provider所创建对象的工厂函数。Angular内置了很多Provider，供你在配置阶段修改相应Angular服务的行为。只有当你需要在配置阶段（应用尚未启动）时暴露API，才需要使用Provider：
   

   var app = angular.module( 'app', [] );
   //注册提供者 
   app.provider( 'accountServiceProvider', function() {
       this.debugMode = false;
       this.$get = [ 'dao', function accountServiceFactory( dao ) {
           return this.debugMode ? new DebugAccountService() : new AccountService( dao );
       } ]
   } );
   //在应用程序配置阶段，修改提供者的配置 
   app.config( function( accountServiceProvider ) {
       accountServiceProvider.debugMode = true;
   } );

2. Value：提供一个简单的“值”，可以注入到其它组件中：
   

   var app = angular.module('app', []);
   app.value('accountService', new AccountService());
   app.controller('Ctrler', function (accountService) { this.accountService= accountService; }); //使用服务

3. Factory：能够使用其它组件（依赖注入）、支持初始化、延迟初始化，比Value灵活的多。该类型的Recipe给出一个函数，调用的返回值就是要创建的服务的实例。注意Angular中所有服务都是单例的：
   

   app.factory('accountService', function AccountServiceFactory() {
       return new AccountService(); //单例。根据业务规则，这里可能有复杂的代码
   });

4. Service：与Factory类似，但是通过调用既有的构造函数创建服务实例：
   

   function AccountService(dao){
       this.dao = dao;
       ...
   }
   //第二个参数数组：前面的元素都是依赖，最后是构造函数
   app.service('accountService',["accountDao", AccountService]);

5. Constant：类似于Value，但是可以在Config阶段使用，不需要依赖或者初始化的简单对象：
   

   app.constant('INTERFACE_VER', '1.0');

由于实质上所有Recipe都是Provider，因此Injector执行组件创建、依赖注入的唯一信息来源就是Provider。

在Angular中，路由功能用于管理应用程序的多个视图（Multiple views），并在这些视图之间切换。路由功能位于

ngRoute

angular-route.js

该服务和路由功能密切相关，它提供了修改URL路径和处理各种形式导航的能力。该服务没有刷新整个页面的能力，可以使用

$window.location

$location服务提供以下接口：

$location.path(); // 返回当前路径
$location.path('/'); // 把路径修改为'/'路由

$location.path('/home');
$location.replace();
// 或者
$location.path('/home').replace();

// 用对象设置查询
$location.search({name: 'alex', username: 'auser'});
// 用字符串设置查询
$location.search('name=alex&username=auser');

$location.url('/home?name=alex#hashthing');

在多视图应用中，所谓布局模板是指包含了所有视图的公共内容的模板。在当前路由（Route）改变时，相应的模板片断（partial templates，或叫视图模板）会被包含到布局模板中。模板片断代表了“当前视图”。

路由的规则通过

$routeProvider

$route

$rouet服务通常与

ngView

ngView遵守以下规则：

1. 每当发生

   $routeChangeSuccess

    事件，视图都会更新
2. 如果当前路由关联到某个模板：
   1. 创建一个新的作用域
   2. 移除上一个视图，同时上一个作用域也会被清除
   3. 将新的作用域同当前模板关联在一起
   4. 把路由定义中对应的控制器（如果有的话）和当前作用域关联起来
   5. 触发

      $viewContentLoaded

       事件
   6. 如果提供了

      onload

       属性，调用该属性所指定的函数

调用$routeProvider的

when(path, route)

$location.path

resolve : {
    'data' : [ '$http', function( $http ) {
        return $http.get( '/api' ).then( function success( resp ) {
            return response.data;
        }, function error( reason ) {
            return false;
        } );
    } ]
}

/**
 * @param route 从当前路径中提取出的路由参数
 * @param path 当前路径
 * @param search 当前URL中的查询串
 */
function redirectTo(route,path,search);

location.search()

选择不同的路由模式，则URL的风格也不同：

1. 标签模式（hashbang mode）：

   $location

    服务默认使用的模式，URL路径以

   #

    号开头，例如

   http://gmem.cc/#!/index

    。标签模式不需要重写

   <a>

    元素的href属性，也不需要任何服务器端的支持。下面的代码手工配置当前应用为标签模式：
   

   angular.module( 'app', [ 'ngRoute' ] ).config( function( $locationProvider ) {
       $locationProvider.html5Mode( false );
       $locationProvider.hashPrefix( '!' );
   } );

2. HTML5 模式：更加RESTful的URL风格，例如

   http://gmem.cc/index

    。如果浏览器不支持HTML5，Angular会自动退化为标签模式

HTML5 模式需要后端服务器支持URL重写，使用HTML5模式时，永远不要使用相对路径，否则可能导致Angular无法正确处理路由。

$route

/**
 * @param evt 当前事件对象
 * @param next 将要导航到的下一个URL
 * @param current 路由变化前的URL
 */
function listener( evt, next, current ) {}

/**
 * @param evt 当前事件对象
 * @param next  用户当前所处的路由
 * @param previous 上一个路由（如果当前是第一个路由，则为undefined）
 */
function listener( evt, next, previous ) {}

/**
 * @param current 当前路由的信息
 * @param previous 上一个路由的信息
 * @param rejection 被拒绝的promise的错误信息
 */
function listener(current, previous, rejection ) {}

这里是一个用户管理的简单示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User Management App</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="index.js"></script>
<style>
<!--
body {
    font-family: Consolas;
}

table {
    table-layout: fixed;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

td {
    background-color: #E5E5E5;
    border: 1px solid #fff;
    color: #333333;
    min-width: 100px;
    padding: 5px 0 0 5px;
}

thead td,.thead {
    text-align: center;
    font-weight: bold;
}
-->
</style>
</head>
<body ng-app="app">
    <div>User Management</div>
    <div ng-view></div>
</body>
</html>

<table>
    <thead>
        <tr>
            <td>ID</td>
            <td>Name</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td>{{user.id}}</td>
            <td><a href="#/users/{{user.id}}">{{user.name}}</a></td>
        </tr>
    </tbody>
</table>

<table>
    <tr>
        <td class="thead">ID</td>
        <td>{{user.id}}</td>
    </tr>
    <tr>
        <td class="thead">Name</td>
        <td>{{user.name}}</td>
    </tr>
    <tr>
        <td class="thead">Age</td>
        <td>{{user.age}}</td>
    </tr>
    <tr>
        <td class="thead">Address</td>
        <td>{{user.addr}}</td>
    </tr>
    <tr>
        <td class="thead">E-mail</td>
        <td>{{user.email}}</td>
    </tr>
</table>
<div>
    <a href="#/users">Back</a>
</div>

'use strict';
angular.module( 'app', [ 'ngRoute' ] ).config( function( $routeProvider ) {
    // 需要在配置阶段，对路由提供者进行配置
    // when用于定义路由，即URL和模板+控制器的对应关系
    $routeProvider.when( '/users', { 
        // URL的HASH部分为#/users时
        templateUrl : 'partials/users.html',
        controller : 'UsersCtrler'
    } ).when( '/users/:id', {
        // URL的HASH部分为#/users/:id时，:开头表示URL中的路径变量
        templateUrl : 'partials/user-detail.html',
        controller : 'UsersDetailCtrler'
    } ).otherwise( {
        // 不匹配已声明的路由规则时的行为
        redirectTo : '/users'
    } );
} ).value( 'usersData', [ { // 简单的静态数据
    id : 10000,
    name : 'Alex Wong',
    age : 29,
    addr : 'No.20 Waterside Pearl Plaza',
    email : 'alex@gmem.cc'
}, {
    id : 10002,
    name : 'Meng Lee',
    age : 26,
    addr : 'No.11 Jinxiu Homeland',
    email : 'meng@gmem.cc'
}, {
    id : 10003,
    name : 'Wen Jun',
    age : 26,
    addr : 'No.10 YanHuang International',
    email : 'wenjun@gmem.cc'
} ] ).controller( 'UsersCtrler', function( $scope, usersData ) {
    // 每次切换到视图，控制器都创建一次，并执行这里的代码
    $scope.users = usersData;
} ).controller( 'UsersDetailCtrler', function( $scope, $routeParams, usersData ) {
    for ( var i = 0; i < usersData.length; i++ ) {
        var user = usersData[i];
        if ( user.id == $routeParams.id ) $scope.user = user;
    }
} );
// 注意我们把所有Angular组件都定义在这一个模块中了，如果应用规模变大，应当注意职责分离

该服务对浏览器原生的XMLHttpRequest进行了简单封装。它实质上是一个函数，其返回值是promise对象，其入参是一个配置对象，你可以使用以下配置项：

$http({
    params: {'name': 'alex'}
})

var blob = new Blob(['Hello World'], {type: 'text/plain'});
$http({ data: blob });

function(data,headers) {}

function(data,headers) {}

$cacheFactory

基本的用法：

$http( {
    //配置选项
    method : 'GET',
    url : '/api/users.json'
} ).success( function( data, status, headers, config ) {
    // 当相应准备就绪时调用
} ).error( function( data, status, headers, config ) {
    // 当响应以错误状态返回时调用
} );

或者：

// $http方法返回一个HttpPromise对象，我们可以调用它的then()、success()和error()方法
var promise = $http( {
    method : 'GET',
    url : '/api/users.json'
} );
//then会接收到完整的响应对象，而而success()和error()则会对响应进行解析
promise.then( function( resp ) {
    // resp是一个响应对象
}, function( resp ) {
    // 带有错误信息的resp
} );

Angular传递给HttpPromise的

then()

$http服务提供了一些快捷方法：

$http.get(url,config);

$http.delete(url,config);

$http.head(url,config); 

$http.jsonp(url,config); 

JSON_CALLBACK

/users.json?callback=JSON_CALLBACK

$http.post(url,data,config);

$http.put(url,data,config);

Angular支持缓存GET请求的结果，可以设置配置选项cache来使用缓存，或者进行全局的缓存配置：

angular.module( 'app', [] ).config( function( $httpProvider, $cacheFactory ) {
    $httpProvider.defaults.cache = $cacheFactory( 'lru', { //基于LRU算法
        capacity : 20 //允许的缓存条目
    } );
} );

拦截器用于为HTTP请求处理提供全局性的功能，例如身份验证、错误处理等。拦截器在在请求发送前、响应到达后进行执行特定逻辑。

每个拦截器本质上是一个服务，该服务提供四个函数：

angular.module( 'app', [] ).factory( 'testInterceptor', function( $q ) {
    var interceptor = {
        /**
         * 拦截待发送的请求，可以修改甚至替换配置对象
         * 
         * @param config
         *            $http的配置选项
         * @returns 配置选项或者配置选项的promise
         */
        'request' : function( config ) {
            return config; // 或者 $q.when(config)
        },
        /**
         * 拦截响应内容，可以修改甚至替换响应
         * 
         * @param response
         *            响应
         * @returns 响应或者响应的promise
         */
        'response' : function( response ) {
            return response; // 或者 $q.when(config);
        },
        /**
         * Angular在上一个请求拦截器抛出错误，或者promise被reject时调用此拦截器
         */
        'requestError' : function( rejection ) {
        },
        /**
         * AngularJS在上一个响应拦截器抛出错误，或者promise被reject时调用此拦截器
         */
        'responseError' : function( rejection ) {
        }
    };
    return interceptor;
} );

可以通过

$httpProvider.interceptors

angular.module( 'app', [] ).config( function( $httpProvider ) {
    $httpProvider.interceptors.push( 'testInterceptor' );
} );

默认的请求头保存在

$httpProvider.defaults.headers

一个“域”由协议（HTTP/HTTPS）、域名（IP）、端口唯一确定。默认的，浏览器限制一个域中的脚本只能读写本域的资源，此即同源策略。

同源策略限制了Angular应用向其它后端服务器发送XHR请求的能力，如果要和第三方服务器交互，必须绕过同源策略。

尽管浏览器不允许向异域发送Ajax请求，但是它允许加载异域的脚本文件。利用这一特性，我们可以传递一个回调函数的名称给异域，而异域依据此回调函数动态生成脚本，把需要交换的数据作为入参，传递给回调。例如，脚本：

<script type="text/javascript" src="http://3rd.com/userdata?callback=JSON_CALLBACK"></script>

 的内容可以是：

JSON_CALLBACK({
    name : 'Alex'
});

这样，脚本加载完毕后，JSON_CALLBACK函数自动被调用。这就实现了与异域进行数据交换的能力 。

Angular的$http服务已经内置了JsonP的支持。

近年来，W3C制定了跨域资源共享（CORS）来通过标准的方式取代JSONP。

要通过Angular使用CORS，必须配置$httpProvider：

angular.module( 'app', [] ).config( function( $httpProvider ) {
    $httpProvider.defaults.useXDomain = true; //添加此设置
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
} );

异域的后端服务器也必须进行适当配置，并返回特殊的响应头： 

也可以在服务器端放置代理，所有对异域的请求都通过服务器转发，这样就不存在异域问题了。

进行服务器端身份验证的两种基本方式为：

1. 基于Cookie的身份验证：这是最为广泛接受的方式，每个请求都附带一个Cookie，该Cookie关联了服务器端的一个用户会话
2. 基于令牌（Token）的身份验证：这是最近流行的新方式，每个请求附带一个“令牌”，令牌可以存放在请求头中，令牌由服务器授予客户端

基于令牌的身份验证，具有如下优势：

1. CORS友好：基于Cookie的身份验证在跨域时运作的不是很好，而基于令牌的验证，可以让你方便的向任何服务器发送Ajax请求，因为身份信息就存放在请求头中
2. 无状态：Cookie机制要求服务器端维持一个用户会话对象，并把Cookie和用户会话关联。而令牌不需要服务器端维持任何状态
3. 解耦：不需要被某种验证机制/框架捆绑，客户端不需要理解服务器如何生成令牌
4. 移动设备友好：在iOS、Android等Native移动平台上工作时，Cookie可能正常使用

本节主要介绍AngularJS的令牌身份验证。

当未验证或者身份验证失败时，应当返回

401

{ token: '令牌字符串' }

//假设当前作用域的user对象存放用户名、密码等信息
$http.post( '/authenticate', $scope.user ).success( function( data, status, headers, config ) {
    // 存放到sessionStorage，浏览器关闭后实现，类似还有localStorage等地方可以存储
    $window.sessionStorage.token = data.token;
} ).error( function( data, status, headers, config ) {
    // 验证失败，删除令牌
    delete $window.sessionStorage.token;
} );

我们可以通过Angular的拦截器机制，来把令牌自动附加到每个请求中去，并对错误的响应进行处理：

app.factory( 'authInterceptor', function( $rootScope, $q, $window ) {
    return {
        request : function( config ) {
            config.headers = config.headers || {};
            if ( $window.sessionStorage.token ) {
                // 自动设置Authorization请求头
                config.headers.Authorization = $window.sessionStorage.token;
            }
            return config;
        },
        response : function( rejection ) {
            // 错误处理
            switch ( rejection.status ) {
                case 401:
                    if ( rejection.config.url !== 'api/login' ) {
                        // 如果当前不是在登录页面，广播事件。监听器可以导航应用到登录视图
                        $rootScope.$broadcast( 'auth:loginRequired' );
                    }
                    break;
                case 403:
                    $rootScope.$broadcast( 'auth:forbidden' );
                    break;
                case 404:
                    $rootScope.$broadcast( 'page:notFound' );
                    break;
                case 500:
                    $rootScope.$broadcast( 'server:error' );
                    break;
            }
            return $q.reject( rejection );
        }
    };
} );

app.config( function( $httpProvider ) {
    $httpProvider.interceptors.push( 'authInterceptor' );
} );

promise是一个对象，它代表了一个函数调用最终可能的返回值或者抛出的异常。promise用于异步的处理数据，你可以将其看做远程对象的代理，promise和Java5引入的Future功能类似。

JavaScript中传统的异步处理方式是回调函数，但是，如果回调函数中又涉及其它异步处理，会让代码结构失控：

keyService.get( config, { // 异步请求1
    success : function( key ) {
        roomService.open( key, { // 异步请求2
            success : function( room ) {
                roomService.cleanUp( room, {// 异步请求3
                    success : function() {
                    }
                } );
            },
            failure : function() {
                // 失控，你需要编写多个错误处理代码
            }
        } );
    },
    failure : function() {
    }
} );

当使用promise来设计API时，上述代码看起来像这样：

angular.module( 'app', [] ).factory( 'keyService', function( $q, $timeout ) {
    return {
        get : function( id ) {
            var deferred = $q.defer(); // 代表一个延迟完成的任务
            console.log( 'Finding key by id ' + id );
            $timeout( function() {
                // 可以在未来某个时刻，延迟的resolve或者reject promise
                if ( id < 100 ) deferred.resolve( 'KEY' + id );
                else deferred.reject( 'Invalid key' );
            }, 1000 );
            return deferred.promise; // 必须返回一个promise对象，才能支持promise链
        }
    };
} ).factory( 'roomService', function( $q, $timeout ) {
    return {
        open : function( key ) {
            var deferred = $q.defer();
            console.log( 'Opening room with key ' + key );
            $timeout( function() {
                if ( key == 'KEY0' ) deferred.resolve( 'ROOM0' );
                else deferred.reject( 'Do not Disturb' );
            }, 3000 );
            return deferred.promise;
        },
        cleanUp : function( room ) {
            var deferred = $q.defer();
            console.log( 'Cleaning up room ' + room );
            $timeout( function() {
                deferred.resolve( room + ' CLEANED UP' );
            }, 6000 );
            return deferred.promise;
        },
    };
} ).run( function( keyService, roomService, $q ) {
    //promise chain
    keyService.get( 99 )

    .then( function( value ) {
        return roomService.open( value ); // 为了支持后续的链式调用，必须返回promise
    }, function( reason ) {
        // 记录原因，再创建一个拒绝的promise，这类似于记录日志然后重新抛出异常
        console.log( 'Failed to get key : ' + reason );
        // 明确创建一个因为reason而拒绝的promise
        // 返回如下的一个promise，否则链条上后续的任务还会继续执行
        return $q.reject( reason );
    } )

    .then( function( value ) {
        return roomService.cleanUp( value );
    }, $q.reject ) // 可以直接把第二个入参设置为$q.reject，这类似于直接重新抛出异常

    .then( function( value ) {
        console.log( 'Result: ' + value );
    }, function( reason ) {
        console.log( 'Failed to clean up room : ' + reason );
        return $q.reject( reason );
    } );
} );

可以看到，使用promise的代码（run块）更加简洁，可读性更高，逃离了回调的地狱。

某些Angular API，调用后返回Promise对象，例如

$http

$timeout

注入

$q

angular.module( 'app', [] ).run( function( $q ) {
    var d = $q.defer(); //生成一个Deferred对象
    return d.promise;
} );

一个Promise要么被resolve，要么被reject：

1. resolve被调用时，带有一个履行值
2. reject被调用时要带一个拒绝原因

可以调用

Deferred

d.reject( reason );  
//等价于deferred.resolve($q.reject(reason));

promise对象本身提供了以下几个接口：

then(successFn, errFn, notifyFn)

promise.then(null, errorCallback)

该服务用于异步的执行函数，提供了对deferred、promise的支持。$q提供以下接口：

when(value, [successCallback], [errorCallback], [progressCallback]);

应当在Cordova的deviceready事件之后来启动Angular应用：

var onDeviceReady = function() {
    angular.bootstrap( document, [ 'app' ] );
};
document.addEventListener( 'deviceready', onDeviceReady );

The post 基于AngularJS开发Web应用 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