Framework7初始化
/**
* Framework7初始化
* 需引用jQuery
* author stumpx
*/ /*---------------------------函数---------------------------*/ /**
* 为空判断
* @param s
* @returns {boolean}
*/
function isEmpty(s) {
switch (typeof(s)) {
case 'string':
return !s.length;
break;
case 'array':
case 'object':
for (var i in s) return false;
return false;
return true;
break;
case 'undefined':
return true;
break;
default:
return !s;
break;
}
} /**
* 设置跨域
* */
function crossDomain(allow) {
if (!allow) return false;
var settings = {
crossDomain: !allow,
};
$.ajaxSetup(settings);
$$.ajaxSetup(settings);
return true;
}
/*---------------------------/函数---------------------------*/ /*tip插件*/
Framework7.prototype.plugins.tip = function(app) {
'use strict';
var $ = window.Dom7;
var t7 = window.Template7; app.tip = function(params) {
var defaults = {
title: 'tipTitle',
timeOut: 2000,
}; if (typeof params == 'string') {
var obj = {};
if (typeof arguments[0] == 'string') {
obj.title = arguments[0];
}
if (typeof arguments[1] == 'number') {
obj.timeOut = arguments[1];
}
params = obj || {};
} else if (typeof params == 'object') {
params = params || {};
} for (var def in defaults) {
if (typeof params[def] === 'undefined') {
params[def] = defaults[def];
}
} $('.tip-modal').remove(); var tipStr = '<div class="preloader-indicator-modal tip-modal"><span class="fg-white">' + params.title + '</span></div>'; $('body').append(tipStr);
$('.tip-modal').css('margin-left', -$('.tip-modal').outerWidth() / 2 + 'px'); setTimeout(function() {
$('.tip-modal').remove();
}, params.timeOut); return $('.tip-modal')[0];
};
}; /*dom操作对象*/
var $$ = Dom7;
/*初始化应用*/
var myApp = new Framework7({
modalTitle: '',
modalButtonOk: '确认',
modalButtonCancel: '取消',
modalPreloaderTitle: '加载中...',
cache: false,
material: false,
pushState: false,
swipePanel: 'left',
swipeBackPage: false,
swipePanelThreshold: 15,
domCache: false,
smartSelectBackText: '返回',
smartSelectPickerCloseText: '完成',
smartSelectPopupCloseText: '关闭',
swipePanelOnlyClose: true,
preloadPreviousPage: false,
uniqueHistory: false,
}); $.ajaxSetup({ cache: false });
$$.ajaxSetup({ cache: false }); /*初始化视图*/
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
}); /*ajax请求*/
$$(document).on('ajaxStart', function(e) {
if (e.detail.xhr.requestUrl.indexOf('autocomplete-languages.json') >= 0) {
return;
}
isShowLoading = true;
setTimeout(function() {
if (!!isShowLoading) {
myApp.showIndicator();
}
}, 300);
});
$$(document).on('ajaxComplete', function(e) {
isShowLoading = false;
if (e.detail.xhr.requestUrl.indexOf('autocomplete-languages.json') >= 0) {
return;
}
myApp.hideIndicator();
var res = e.detail.xhr.responseText;
if (res.match("^\{(.+:.+,*){1,}\}$")) {
res = $.parseJSON(res);
if (res.status == 0) {
myApp.alert(res.info, function() {
mainView.router.load({
url: res.url,
force: true,
ignoreCache: true,
reload: true,
});
});
}
} else {
if (!!res.length) {
$res = $('<div>' + res + '</div>');
/*动态工具栏*/
var $toolbar = $res.find('.toolbar').first();
if (!!$toolbar.length) {
if ($toolbar[0].localName == 'script') {
$toolbar = $($toolbar.html());
if (!!$toolbar.length) {
var $oldToolbar = $('.view-main .toolbar');
if ($oldToolbar.length) {
$oldToolbar.replaceWith($toolbar[0]);
} else {
$('.view-main').append($toolbar[0]);
}
}
}
}
/*动态侧边栏-左*/
var $panelLeft = $res.find('.panel-left').first();
if (!!$panelLeft.length) {
if ($panelLeft[0].localName == 'script') {
$panelLeft = $($panelLeft.html());
if (!!$panelLeft.length) {
var $oldPanelLeft = $('.panel-left');
if ($oldPanelLeft.length) {
$oldPanelLeft.html($panelLeft.html());
} else {
$('body').append($panelLeft[0]);
}
}
}
}
/*动态侧边栏-右*/
var $panelRight = $res.find('.panel-right').first();
if (!!$panelRight.length) {
if ($panelRight[0].localName == 'script') {
$panelRight = $($panelRight.html());
if (!!$panelRight.length) {
var $oldPanelRight = $('.panel-right');
if ($oldPanelRight.length) {
$oldPanelRight.html($panelRight.html());
} else {
$('body').append($panelRight[0]);
}
}
}
}
}
}
});
/*/ajax请求*/ /*显示隐藏导航栏、工具栏*/
$$(document).on('pageInit', function(e) {
var $page = $(e.detail.page.container);
if ($page.hasClass('no-navbar')) {
myApp.hideNavbar('.page-on-center .navbar');
/*$('.page-on-center .navbar').addClass('navbar-hidden');*/
} else {
myApp.showNavbar('.page-on-center .navbar');
/*$('.page-on-center .navbar').removeClass('navbar-hidden');*/
}
if ($page.hasClass('no-toolbar')) {
myApp.hideToolbar('.page-on-center .toolbar');
/*$('.page-on-center .toolbar').addClass('toolbar-hidden');*/
} else {
myApp.showToolbar('.page-on-center .toolbar');
/*$('.page-on-center .toolbar').removeClass('toolbar-hidden');*/
}
}); /*打开picker*/
$(document).on('click', '[open-picker]', function() {
var $picker = $($(this).attr('open-picker')).first();
if (!$picker.length) return;
if ($picker[0].localName == 'script') {
myApp.pickerModal($picker.html());
}
}); /*打开popup*/
$(document).on('click', '[open-popup]', function() {
var $popup = $($(this).attr('open-popup')).first();
if (!$popup.length) return;
if ($popup[0].localName == 'script') {
myApp.popup($popup.html());
}
});
/*打开popover*/
$(document).on('click', '[open-popover]', function() {
var $popover = $($(this).attr('open-popover')).first();
if (!$popover.length) return;
if ($popover[0].localName == 'script') {
myApp.popover($popover.html(), this);
}
}); /*打开alert*/
$(document).on('click', '[open-alert]', function() {
myApp.alert($(this).attr('open-alert'));
}); /*日期选择*/
$(document).on('focus touchstart', '.calendar', function() {
var $this = $(this);
var normal = {
closeOnSelect: true,
input: this,
dateFormat: 'yyyy-mm-dd',
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
};
if (!!this.value) {
normal.value = [this.value];
}
myApp.calendar($.extend({}, normal, $(this).data()));
}); /*下拉刷新*/
$(document).on('refresh', '.pull-to-refresh-content', function(e) {
var $this = $(this);
var url = $this.data('url');
mainView.router.load({
url: url,
force: true,
ignoreCache: true,
reload: true,
});
myApp.pullToRefreshDone();
}); /*加载更多*/
isInfiniteScroll = true;
$(document).on('infinite', '.page-shop-list .infinite-scroll', function(e) {
var $this = $(this);
var url = $this.data('url');
var nowPage = $this.data('now-page');
var lastPage = $this.data('last-page');
var infiniteScrollPreloaderEndStr = '<div class="content-block infinite-scroll-preloader">到底了!</div>';
if (!!isInfiniteScroll) {
isInfiniteScroll = false;
if (nowPage >= lastPage) {
isInfiniteScroll = true;
myApp.detachInfiniteScroll($$('.infinite-scroll'));
$this.find('.infinite-scroll-preloader').remove();
$this.append(infiniteScrollPreloaderEndStr);
return;
} else {
setTimeout(function() { $.ajax({
url: url,
type: 'POST',
async: false,
/*true:异步,false:同步*/
data: { p: nowPage + 1 },
success: function(res) {
if (!res.match("^\{(.+:.+,*){1,}\}$")) {
isInfiniteScroll = true;
var $res = $('<div>' + res + '</div>');
var $list = $res.find('.shop-list');
var nowPage = $res.find('[data-now-page]').data('now-page');
var lastPage = $res.find('[data-last-page]').data('last-page');
$this.data({
nowPage: nowPage,
lastPage: lastPage,
});
$this.find('.shop-list').append($list.html());
}
}
}); }, 150);
}
}
});
Framework7初始化的更多相关文章
- Framework7 索引列表插件的问题
前言 Framework7 作为移动端的开发框架的优良之处已经无需多言.现在已经有了 React 和 Vue 版本,之前在项目中用过 F7 + vue 的开发方式,无论是效率还是产出都近乎完美.有时间 ...
- framework7 入门(基础布局)
个人认为framework7是个很好的移动端框架,自带路由.下拉刷新.无限加载.时间线.各种dialog.环形图等,基本能满足大部分app的需求,可以和vue,webpack 等各种搭配. 这里讲一下 ...
- Framework7 索引列表插件的异步加载实现
前言 Framework7 作为移动端的开发框架的优良之处已经无需多言.现在已经有了 React 和 Vue 版本,之前在项目中用过 F7 + vue 的开发方式,无论是效率还是产出都近乎完美.有时间 ...
- framework7的改进,以及与vue组合使用遇到的问题以及解决方法 (附vue的原理)
framework7官方提供了vue+framework7的组合包,但是那个包用起来复杂度较高,而且不灵活.听说bug也不少. 所以我想用最原始的方式单独使用vue和framework7. 遇到以下问 ...
- Framework7 + Angular 开发问题解决汇总
本篇主要汇总一下使用Framework7 + Angular 开发中遇到的一些难点及我的解决方法,以后再遇到会在这里继续更新. 一.页面表格按需加载 情况描述:默认加载10条,在用户上拉页面是再进行下 ...
- Framework7 - 入门教程(安装、配置、创建一个H5应用)
1,Framework7介绍 (1)Framework7 是一个开源免费的框架.可以用来开发混合移动应用(原生和 HTML 混合)或者开发 iOS & Android 风格的 WEB APP. ...
- Java初始化过程
这篇文章主要讲解Java在创建对象的时候,初始化的顺序.主要从以下几个例子中讲解: 继承关系中初始化顺序 初始化块与构造器的顺序 已经加载过的类的初始化顺序 加载父类,会不会加载子类 创建子类对象会不 ...
- nginx源码分析之模块初始化
在nginx启动过程中,模块的初始化是整个启动过程中的重要部分,而且了解了模块初始化的过程对应后面具体分析各个模块会有事半功倍的效果.在我看来,分析源码来了解模块的初始化是最直接不过的了,所以下面主要 ...
- nginx源码分析之网络初始化
nginx作为一个高性能的HTTP服务器,网络的处理是其核心,了解网络的初始化有助于加深对nginx网络处理的了解,本文主要通过nginx的源代码来分析其网络初始化. 从配置文件中读取初始化信息 与网 ...
随机推荐
- [UWP]涨姿势UWP源码——UI布局
懒癌晚期兼正月里都是过年,一直拖到今天才继续更新.之前的几篇介绍了数据的来源,属于准备工作.本篇我们正式开始构建涨姿势UWP程序的UI界面. 我们这个Hello World程序比较简单,总共只有一个页 ...
- EF CodeFirst下数据库更新
用EF Code first模式来开发系统,可使用Migrations命令来让数据库自动更新 1.在VS->工具->库程序包管理器->程序包管理控制台 中执行 Enable-Migr ...
- ASP.NET MVC 导出Word报表
最近要做MVC导出Word报表功能.查了查资料发现一个好用的插件就是Aspose.Word.这个插件也很有名气,也很好用. 1.首先就是引用该插件 2.填充Word模版 3.后台操作 private ...
- Java和C++的对比
事实上, Java 本来就是从 C++衍生出来的. C++和 Java 之间仍存在一些显著的差异.可以这样说,这些差异代表着技术的极大进步.一旦我们弄清楚了这些差异,就会理解为什么说 Java 是一种 ...
- 指针与数据结构算法_链表(C语言)
一.变量: 声明一个变量系统是没有给这个变量分配内存空间的: 例: int j;//编译的时候是没有分配内存空间的 ;//计算机在编译的时候就会给这个i分配4个字节的内存空间 二.malloc动态分配 ...
- python之SQLAlchemy ORM 上
前言: SQLAlchmey是暑假学的,当时学完后也没及时写博客整理下.这篇博客主要介绍下SQLAlchemy及基本操作,写完后有空做个堡垒机小项目.下篇博客整理写篇关于Web框架和django基础~ ...
- Robot Framework中经常用的第三方库的安装方法
pip升级:python -m pip install --upgrade pip 一.安装robotframework-selenium2library,相当于python中的selenium ...
- KoaHub平台基于Node.js开发的Koa 连接支付宝插件代码信息详情
KoaHub平台基于Node.js开发的Koa 链接支付宝插件代码信息详情 easy-alipay alipay payment & notification APIs easy-alipay ...
- 基于Spring Cloud和Netflix OSS 构建微服务-Part 1
前一篇文章<微服务操作模型>中,我们定义了微服务使用的操作模型.这篇文章中,我们将开始使用Spring Cloud和Netflix OSS实现这一模型,包含核心部分:服务发现(Servic ...
- 摆脱printf的噩梦
众所周知,printf是一个方便.直观.易写.变长参数的打印函数,但它有一个致命的缺陷,如下的语句将导致程序出现严重的运行时错误: printf("%s", 1); 然后程序中断, ...