Framewrok7 预加载提示模态框(Preloader Modal)用法

更新时间：2016年10月2日 16:23 点击：2132

Preloader Modal就是一个提醒加载的功能，我们这里来看Framewrok7 预加载提示模态框(Preloader Modal)用法吧，具体细节如下所示。

1，预加载Modal介绍

（1）预加载Modal 可以看作是里面包含有加载指示符（Preloader），以及相关 title 的模态框。
（2）其作用一是用来提示一些后台活动（像 Ajax 请求）。二来阻止在这个活动期间的任何用户操作。

2，预加载Modal的使用（默认标题）

如果使用使不指定 title，则会显示默认标题。默认标题为“Loading”，可以在 App 初始化的时候修改设置。参考我之前的文章：Framework7 - 修改模态框默认文字（标题、确认|取消按钮、登录框提示）

$$('.open-preloader').on('click', function () {
    myApp.showPreloader();
    setTimeout(function () {
        myApp.hidePreloader();
    }, 2000);
});

3，预加载Modal的使用（自定义标题）

除了在 Framework7 初始化的时候统一修改标题文字外，我也可以在每次使用预加载Modal时单独设置标题。

$$('.open-preloader-title').on('click', function () {
    myApp.showPreloader('正在上传照片...')
    setTimeout(function () {
        myApp.hidePreloader();
    }, 2000);
});

下面我们来看一篇关于 Framework7 设置是否允许点击弹出框外部区域，关闭弹出层的使用例子，具体的细节步骤如下文介绍。

1，Framework7中三大类弹出框

（1）模态框（modal）：默认点击外部区域不会关闭弹出框

模态框包括：告警框（Alert）、确认框（Confirm）、需要用户输入的提示框（Prompt）

（2）操作表（Action Sheet）：默认点击外部区会自动关闭

（3）弹出层（Popup）：默认点击外部区域会自动关闭

2，修改默认的关闭方式

如果想要点击模态框（modal）外部区域也会关闭模态框。或者不允许点击操作表（Action Sheet）、弹出层（Popup）外部区域时会自动关闭。
我们可以在 Framework7 初始化的时候可以进行如下修改。

// 初始化 app
var myApp = new Framework7({
          modalCloseByOutside: true,
          actionsCloseByOutside: false,
          popupCloseByOutside: false
});

3，参数说明
（1）modalCloseByOutside：模态框（modal）是否允许通过点击外部关闭（默认值：false）
（2）actionsCloseByOutside：操作表（Action Sheet）是否允许通过点击外部关闭（默认值：true）
（3）popupCloseByOutside：弹出层（Popup）是否允许通过点击外部关闭（默认值：true）

下面我们来看一篇关于Framewrok7 视图介绍（views、view）使用介绍吧，希望这篇文章能够帮助到各位朋友。

一、Views 与View的介绍

1，Views (<div class="views">)
（1）Views 是应用主容器。一个应用中只能有一个 Views。
（2）同时 Views 也是是所有可见 View 的容器（不包括 Modal 和 Panel）。

2，View(<div class="view">)
（1）View 在应用中是一个独立的部分，它有自己的设置、页面切换和历史。
（2）每一个视图都可以有不同的导航栏、工具栏布局和不同的样式。所以 View 就像是嵌在应用中的另一个应用。这种功能可以让你来分别操作一个应用中的不同部分。
（3）View 可以放在应用中的任何位置，但是有一个重要的规则 - 所有的可见 View 都应该放在 Views (<div class="views">)中。因为我们会用来做页面切换的动画。

二、视图的创建与初始化

1，html页面中定义视图

假设我们要做一个包含两个模块（即两个视图 View）的应用，主页代码结果如下：

2，初始化视图

前面我们已经在 html 中创建好了需要的 view，接下来还要 JavaScript 中初始化我们的 view
var myApp = new Framework7({
// ...
});

/* 初始化视图 */
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
})
var anotherView = myApp.addView('.another-view');

三、视图的访问与使用

1，View 的方法和属性
View 实例有很多有用的方法可以用来操作自身。上面样例中，我们将两个视图初始化后的实例分别保存在 mainView 和 anotherView 这两个变量中。下面以 mainView 为例来看看这些方法和参数。
属性(Properties)
mainView.params 初始化参数，你可以读取或者重写某些属性，
比如 mainView.params.linksView = '.another-view'
mainView.history 返回一个包含所有历史的字符串数组，其中每一个字符串都是一个页面的URL
mainView.contentCache 返回被缓存的页面。只有当内容是动态生成的时候才可以使用这个属性。
mainView.url 当前页面的URL
mainView.pagesContainer 当前的pagesHTML元素
mainView.activePage 当前页面对应的Page Data
mainView.main 当前页面是否是 main view
mainView.router router对象，有很多路由相关的方法
Methods
mainView.router.load(options) Read more about it in Router API
mainView.router.back(options) Read more about it in Router API
mainView.hideNavbar() 在当前View中隐藏导航栏
mainView.showNavbar() 在当前View中显示导航栏
mainView.hideToolbar() 在当前View中隐藏工具栏
mainView.showToolbar() 在当前View中显示工具栏
mainView.destroy() 销毁初始化过的View，解除事件绑定，禁用浏览导航

2，获取当前视图实例

有时我们需要获取到当前的活动视图，或者是作为弹出窗口、弹出面板等等的视图。可以使用 myApp.getCurrentView() 方法即可。
比如在一个面板（panel）中初始化一个视图 View，同时这个 panel 当前也是打开的，那么用这个方法就会得到这个 View。
同样的，如果我们是使用标签栏布局（tab bar layout），这个方法就会得到当前激活标签对应的视图。
（1）如果只有一个活动视图

var currentView = myApp.getCurrentView();

（2）如果当前有多个活动视图（比如 Split View 布局），就要加个索引参数。

myApp.getCurrentView(index)

3，通过HTML元素来获取视图View实例

当我们初始化完成 View 之后，Framework7 会在元素上增加一个属性以便让我们可以通过 JS 来访问。

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

4，获取所有的视图实例
所有的 view 实例也都存储在一个应用实例的 views 属性中，比如我们可以这样找到 main view
for (var i = 0; i < myApp.views.length; i ++) {
var view = myApp.views[i];
if (view.main) myApp.alert('I found main View!')
}

用Framewrok7框架做app是相当的简单了我们今天来看一篇关于Framewrok7 页面的结构、事件、以及数据用法介绍吧，具体的细节如下文所示。

1，页面结构说明

页面（Pages）和我们在在网页中打开的页面是同样的意思，比如下面一个简单的样例。

<body>
...

<div class="views">
    
    <div class="view view-main">
      
      <div class="pages">
        <div class="page" data-page="home">
          <div class="page-content">
            ... 这里是页面内容 ...
          </div>
        </div>
      </div>
    </div>
    
    <div class="view another-view">
      
      <div class="pages">
        <div class="page" data-page="home-another">
          <div class="page-content">
            ... 这里是页面内容 ...
          </div>
        </div>
      </div>
    </div>
</div>
...
</body>
（1）Pages 是必须的，因为同一个 View 下所有的页面切换都在这里。
（2）每一个 Page 都应该放在 Pages 容器中(<div class="pages">)，而 Pages 必须是 View 的子元素(<div class="view">)。
（3）每个 Page 都有一个 data-page 属性，存储了一个唯一的 page 名。这个属性不是必须的，但是强烈推荐使用。因为这个属性在 page 事件中或者在 page 回调函数中可以用来帮助我们确定加载的是哪一个页面。
（4）所有的可见的内容，比如列表和表单等，都应该放在 <div class="page-content"> 中，它是 <div class="page"> 的子元素。这样才能保证正确的样式，布局和滚动。

2，Page 事件介绍
（1）在 Page 事件响应中，我们可以通过 JS 来操作加载好的 Page。具体的事件如下：
Event Target Description
pageBeforeInit Page Element
<div class="page"> 当Framework7把新页面插入DOM的时候会触发
pageInit Page Element
<div class="page"> 当Framework7初始化页面的组件的时候会触发
pageReinit Page Element
<div class="page"> This event will be triggered when cached page becomes visible.
It is only applicaple for Inline Pages (DOM cached pages)
pageBeforeAnimation Page Element
<div class="page"> 当页面初始化完成并且可以做动画的时候触发
pageAfterAnimation Page Element
<div class="page"> 在页面动画完成之后触发
pageBeforeRemove Page Element
<div class="page"> Page从DOM中移除之前就会触发这个事件。如果你希望做一些解除事件绑定或者销毁一些插件的时候，这个方法是很有用的。
pageBack Page Element
<div class="page"> 在返回上一页动画执行之前就会触发这个事件。和 "pageBeforeAnimation" 的不同之处在于，这个事件在老页面上也会触发，也就是那个从中间滑动到右边的页面。
pageAfterBack Page Element
<div class="page"> 返回上一页动画执行完成之后触发这个事件。同样，区别于"pageAfterAnimation"，他也会在老页面上触发。

（2）有两种方式可以使用这些事件。下面以 pageInit 事件为例：

// 方式1. 处理所有页面的pageInit事件 (推荐):
$$(document).on('pageInit', function (e) {
// 当页面加载并初始化完毕后执行一些代码....

})

// 方式2. 处理指定页面（data-page="about"）的 pageInit事件 (不推荐):
$$(document).on('pageInit', '.page[data-page="about"]', function (e) {
// 当页面加载并初始化完毕后执行一些代码....
})

3，Page 数据介绍

在 Page 事件中，event 实例中包含了关于当前页面非常详细的数据。
（1）下面样例中，我们将页面数据保存到一个变量中。

$$(document).on('pageInit', function (e) {
//获取页面数据，这里面保存了所有的请求信息
var page = e.detail.page;
})

（2）上面将页面数据保存到一个对象中，这个对象里面包含的属性如下：
Page Data Properties
page.name 就是 data-page 设定的名称
page.url 当前页面的URL
page.query 当前页面的get参数，是一个对象。假设你的页面URL是 "about.html?id=10&count=20&color=blue"，那么query就是：
{
id: '10',
count: '20',
color: 'blue'
}
page.view object. 包含当前页面的view对象(前提是view已经初始化完成)
page.container Page 对应的 HTMLElement
page.from string 当前页面从哪个方向加载进来。如果是新加载的页面，则为"right"，如果是返回上一步的页面，则为"left"
page.navbarInnerContainer navbar-inner" 对应的 HTMLElement，只有动态导航栏才有。
page.swipeBack boolean。当前页面是否是滑动返回的。只有在 onPageBefore/AfterAnimation 回调函数/事件中才可以访问。
page.context object. 这个页面的 Template7 上下文
page.fromPage object. 上一个页面的pageData

（3）使用样例如下。比如我们可以在一个 handler 中，根据不同的 page.name 来处理不同的页面。

$$(document).on('pageInit', function (e) {
    var page = e.detail.page;
    // 处理about页面
    if (page.name === 'about') {
        // 获取url中的count参数值 (about.html?count=10)
        var count = page.query.count;
        // 根据count生成对应数量的列表
        var listHTML = '<ul>';
        for (var i = 0; i < count; i++) {
            listHTML += '<li>' + i + '</li>';
        }
        listHTML += '</ul>';
        // 将列表数据填充到页面内容区域上
        $$(page.container).find('.page-content').append(listHTML);
    }
    // 处理services页面
    if (page.name === 'services') {
        myApp.alert('Here comes our services!');
    }
});

Framework7 是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发 iOS & Android 风格的WEB APP,下面我们来看Framewrok7页面回调函数的用法详解吧。

我们通过监听页面（Page）的事件，实现在事件响应函数中对特定的页面执行特定的代码。
其实除了使用事件，我们还可以使用 Page 回调函数来实现同样的功能。

1，Page回调函数的优点（相较于Page事件）

（1）Page 回调函数不是事件，所以占用更少的的内存，同时更少的内存泄露出现几率。
（2）因为不是事件，所以不用担心如何监听。
（3）有时候会在代码结构上比使用事件更方便。

2，Page回调方法介绍

其中 pageName 是指页面的 "data-page" 属性值。

//当Framework7把新页面(必须带有data-page属性)插入到DOM的时候会触发
myApp.onPageBeforeInit(pageName, callback(page))

//当Framework7初始化一个页面(必须带有data-page属性)的组件和导航栏的时候会触发。
myApp.onPageInit(pageName, callback(page))

//当Framework7将一个页面(必须带有data-page属性)变为可见的时候会触发
myApp.onPageReinit(pageName, callback(page))

//当一个页面(有 data-page 属性)初始化完成并且可以开始做动画的时候触发
myApp.onPageBeforeAnimation(pageName, callback(page))

//当一个页面(有 data-page 属性)动画完成之后会触发
myApp.onPageAfterAnimation(pageName, callback(page))

//当一个页面(有 data-page 属性)从DOM移除之前会触发
myApp.onPageBeforeRemove(pageName, callback(page))

//当页面开始执行返回动画之前调用。
//区别于 "onPageBeforeAnimation", 这个函数在老的页面上也会调用，也就是从中间向右滑动的那个页面
myApp.onPageBack(pageName, callback(page))

//当页面开始执行返回动画完成之后调用。
//区别于 "onPageBeforeAnimation", 这个函数在老的页面上也会调用，也就是从中间向右滑动的那个页面。
myApp.onPageAfterBack(pageName, callback(page))
使用样例：

var myApp = new Framework7();

//about页面初始化回调
myApp.onPageInit('about', function (page) {
console.log('About page initialized');
console.log(page);
});

//所有页面的初始化回调
myApp.onPageInit('*', function (page) {
console.log(page.name + ' initialized');
});

3，回调对象（用于手动触发或移除回调）

上面的每一个回调方法都会返回一个回调对象。通过这个对象的 trigger() 与 remove() 这两个方法，我们可以用来手动触发或者移除这个回调。

var myApp = new Framework7();
//contacts页面初始化回调
var contactsCallback = myApp.onPageInit('contacts', function (page) {
console.log('Contacts page initialized');
console.log(page);
});
//删除取消这个回调
contactsCallback.remove();
//手动触发这个回调
contactsCallback.trigger();

4，调用初始化页面的回调函数
有时我们需要触发初始化页面（比如首页）的回调函数。但是有一个问题，当我们添加 .onPage 回调的时候，应用已经初始化完成了，我们添加的回调函数不会被触发。有如下几个方法可以解决这个问题：

（1）手动初始化
也就是说我们先不自动初始化应用，在添加回调函数之后再手动初始化。

var myApp = new Framework7({
init: false //禁用App的自动初始化功能
});

//添加页面的回调函数
myApp.onPageInit('home', function (page) {
//进行一些页面操作....
});

//初始化应用
myApp.init();

（2）使用APP的回调

在App的回调函数中通过参数来判断页面，并做相应的处理。

var myApp = new Framework7({
onPageInit: function (app, page) {
    if (page.name === 'home') {
      //对首页进行一些操作...
    }
}
});

（3）手动触发

注意：这种情况下手动触发回调，回调函数不会接受到一个 Page Data 作为参数。

var myApp = new Framework7();

//添加页面初始化回调函数
myApp.onPageInit('home', function (page) {
//对首页进行一些操作
}).trigger(); //立刻触发这个回调函数

[!--infotagslink--]

上一篇: Android自定义布局的日历的例子

下一篇: android自定义View之获取文字高度例子

Framework7 修改模态框默认文字（标题、确认|取消按钮、登录框提示）
下面我们来看一篇关于Framework7 修改模态框默认文字（标题、确认|取消按钮、登录框提示）的例子，希望这篇文章能够帮助到大家的哦。 Framework7 提供了许多常用的模...2016-10-02
如何使用vue slot创建一个模态框的实例代码
这篇文章主要介绍了如何使用vue slot创建一个模态框,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下...2020-05-25
Bootstrap每天必学之模态框（Modal）插件
Bootstrap每天必学之模态框（Modal）插件,模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等,感兴趣的小伙伴们可以参考一下...2016-04-27
JavaScript实现可拖动模态框
这篇文章主要为大家详细介绍了JavaScript实现可拖动模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-11
js中延迟加载和预加载的具体使用
这篇文章主要介绍了js中延迟加载和预加载的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-15
Framework7 加载指示符（Preloader）使用说明
下面我们来看一篇关于Framework7 加载指示符（Preloader）使用说明，希望这篇文章能够帮助到各位理解到Framework7 加载指示符哦。 Framework 7 提供了一个好用的加载指...2016-10-02
Framewrok7 预加载提示模态框(Preloader Modal)用法
Preloader Modal就是一个提醒加载的功能，我们这里来看Framewrok7 预加载提示模态框(Preloader Modal)用法吧，具体细节如下所示。 1，预加载Modal介绍（1）预加载Modal 可...2016-10-02
多种js图片预加载实现方式分享
这篇文章主要为大家详细介绍了多种js图片预加载实现方式，包括html标签或css加载图片、纯js实现预加载，感兴趣的小伙伴们可以参考一下...2016-02-21
浅析BootStrap模态框的使用(经典)
Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。本文给大家介绍BootStrap模态框的使用，感兴趣的朋友一起学习吧...2016-05-04
Bootstrap 模态框(Modal)插件代码解析
Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。这篇文章主要介绍了Bootstrap 模态框(Modal)插件代码解析的相关资料,需要的朋友可以参考下...2017-01-09
jquery实现图片预加载
这篇文章主要介绍了jquery实现图片预加载的方法，内容很详细，带领大家全方位学习jquery图片预加载，感兴趣的小伙伴们可以参考一下...2015-12-27
jQuery UI Grid 模态框中的表格实例代码
这篇文章主要介绍了jQuery UI Grid 模态框中的表格实例代码讲解，非常不错，具有参考借鉴价值,需要的朋友可以参考下...2017-04-03
微信小程序弹框和模态框实现代码
这篇文章主要介绍了微信小程序弹框和模态框实现代码的相关资料,需要的朋友可以参考下...2017-03-13
简单谈谈PHP中的Reload操作
通常修改了 PHP 的配置后，为了让修改生效会执行 reload，而不是 restart，但最近在使用Reload操作的时候发现了502错误，想着还是要重新思考这个问题。所以这篇文章主要给大家介绍了关于PHP中Reload操作的内容，有需要的朋友们可以参考借鉴，下面来一起看看吧。...2016-12-17
Bootstrap模态框调用功能实现方法
这篇文章主要介绍了Bootstrap模态框调用功能实现方法的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧...2016-10-03
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
本文主要介绍了利用CSS、JavaScript及Ajax实现图片预加载的三大方法。具有很好的参考价值，下面跟着小编一起来看下吧...2017-01-26
Bootstrap模态框（Modal）实现过渡效果
本文介绍了Bootstrap模态框（Modal）实现过渡效果的教程，非常实用，有兴趣的同学快来看看吧可以切换模态框（Modal）插件的隐藏内容：1、通过 data 属性：在控制器元素（比如按钮...2017-07-06
理解Javascript图片预加载
这篇文章主要介绍了Javascript图片预加载，帮助大家理解Javascript图片预加载的实现原理，感兴趣的小伙伴们可以参考一下...2016-02-26
Vue dialog模态框的封装方法
这篇文章主要为大家详细介绍了Vue dialog模态框的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2022-07-06

Framewrok7 预加载提示模态框(Preloader Modal)用法

相关文章

阁下可能感兴趣的内容

推荐阅读