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的源代码来分析其网络初始化. 从配置文件中读取初始化信息 与网 ...
随机推荐
- 子进程 已安装 post-installation 脚本 返回错误状态 1,dpkg: 处理软件包 python-crypto (--configure)时出错: 该软件包正处于非常不稳定的状态;
这几天在学习redis的时候,装软件总是报错,两个问题都和dpkg有关,上网查阅了些解决办法,发现整体来说执行以下方法均可解决. 虽然每个人需要安装的包不同,但是出现此类问题的不同也只有安装包的名字, ...
- 从0移植uboot (二) _启动流程分析
经过了上一篇的配置,我们已经执行make就可以编译出一个uboot.bin,但这还不够,首先,此时的uboot并不符合三星芯片对bootloader的格式要求,其次,此时的uboot.bin也没有结合 ...
- linux oracle 10g 安装时 .bash_profile的设置
export ORACLE_BASE=/home/oracle/oracle10g export ORACLE_SID=ccpbs export ORACLE_HOME=$ORACLE_BASE/pr ...
- nginx负载均衡2
负载均衡2 网站是发展初期,nginx只代理了后端一台服务器,但由于网站名气大涨访问的人越来越多一台服务器实在是顶不住,于是我们加了多台服务器,那么多台服务器又怎么配置代理呢,这里以两台服务器为案例, ...
- 每天一个Linux命令 4
Linux系统关机命令 shutdown -h 时间 init 0 poweroff Linux系统注销命令 logout 或者是快捷键 Ctrl+d Linux系统重启命令 reboot Linux ...
- 唐伯猫的 sql server 2008 的安装和操作记录
在服务器win 2008 server r2 上安装sql 首先下载sql server 2008 ,云盘有存储sql,很多论坛也有下载SQLEXPRADV_x64_CHS.exe 双击sql s ...
- 1622: [Usaco2008 Open]Word Power 名字的能量
1622: [Usaco2008 Open]Word Power 名字的能量 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 370 Solved: 18 ...
- 3360: [Usaco2004 Jan]算二十四
3360: [Usaco2004 Jan]算二十四 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 6 Solved: 6[Submit][Statu ...
- 【2017-03-16】TSQL基本编程、存储过程、触发器
一.TSQL基本编程 1.定义变量 :declare @变量名 数据类型 变量名前面必须加"@"符号 declare @aaa int; declare @bbb n ...
- DapperPoco -- 基于Dapper的、轻量级的、高性能的、简单的、灵活的ORM框架
为什么要重复造轮子 因为现有的轮子都在某些方面不太令我满意,下面我来一一点评一下,欢迎拍砖. Entity Framework 我喜欢傻瓜化使用方式的框架,同时又不失灵活性. EF虽然使用起来足够简单 ...