2117 lines
68 KiB
JavaScript
2117 lines
68 KiB
JavaScript
/*
|
||
* Jingle v0.4 Copyright (c) 2013 shixy, http://shixy.github.io/Jingle/
|
||
* Released under MIT license
|
||
* walker.shixy@gmail.com
|
||
*/
|
||
var Jingle = J = {
|
||
version : '0.41',
|
||
$ : window.Zepto,
|
||
//参数设置
|
||
settings : {
|
||
//single 单页面工程 muti 多页面工程
|
||
appType : 'single',
|
||
//page默认动画效果
|
||
transitionType : 'slide',
|
||
//自定义动画时的默认动画时间(非page转场动画时间)
|
||
transitionTime : 250,
|
||
//自定义动画时的默认动画函数(非page转场动画函数)
|
||
transitionTimingFunc : 'ease-in',
|
||
//toast 持续时间,默认为3s
|
||
toastDuration : 3000,
|
||
//是否显示欢迎界面
|
||
showWelcome : false,
|
||
//欢迎界面卡片切换时的执行函数，可以制作酷帅吊炸天的欢迎界面
|
||
welcomeSlideChange : null,
|
||
//加载page模板时，是否显示遮罩
|
||
showPageLoading : false,
|
||
//page模板默认的相对位置，主要用于开发hybrid应用，实现page的自动装载
|
||
basePagePath : 'html/',
|
||
basePageSuffix : '.html',
|
||
//page模板的远程路径{#id: href,#id: href}
|
||
remotePage:{}
|
||
},
|
||
//手机或者平板
|
||
mode : window.innerWidth < 800 ? "phone" : "tablet",
|
||
hasTouch : 'ontouchstart' in window,
|
||
//是否启动完成
|
||
launchCompleted : false,
|
||
//是否有打开的侧边菜单
|
||
hasMenuOpen : false,
|
||
//是否有打开的弹出框
|
||
hasPopupOpen : false,
|
||
isWebApp : location.protocol == 'http:',
|
||
/**
|
||
* 启动Jingle
|
||
* @param opts {object}
|
||
*/
|
||
launch : function(opts){
|
||
$.extend(this.settings,opts);
|
||
var hasShowWelcome = window.localStorage.getItem('hasShowWelcome');
|
||
if(!hasShowWelcome && this.settings.showWelcome){
|
||
this.Welcome.show();
|
||
}
|
||
this.Element.init();
|
||
this.Element.initControlGroup();
|
||
this.Router.init();
|
||
this.Menu.init();
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 初始化页面组件元素
|
||
*/
|
||
J.Element = (function($){
|
||
var SELECTOR = {
|
||
'icon' : '[data-icon]',
|
||
'scroll' : '[data-scroll="true"]',
|
||
'toggle' : '.toggle',
|
||
'range' : '[data-rangeinput]',
|
||
'progress' : '[data-progress]',
|
||
'count' : '[data-count]',
|
||
'checkbox' : '[data-checkbox]'
|
||
}
|
||
/**
|
||
* 初始化容器内组件
|
||
* @param {String} 父元素的css选择器
|
||
* @param {Object} 父元素或者父元素的zepto实例
|
||
*/
|
||
var init = function(selector){
|
||
if(!selector){
|
||
//iscroll 必须在元素可见的情况下才能初始化
|
||
$(document).on('articleshow','article',function(){
|
||
J.Element.scroll(this);
|
||
});
|
||
};
|
||
var $el = $(selector || 'body');
|
||
if($el.length == 0)return;
|
||
|
||
$.map(_getMatchElements($el,SELECTOR.icon),_init_icon);
|
||
$.map(_getMatchElements($el,SELECTOR.toggle),_init_toggle);
|
||
$.map(_getMatchElements($el,SELECTOR.range),_init_range);
|
||
$.map(_getMatchElements($el,SELECTOR.progress),_init_progress);
|
||
$.map(_getMatchElements($el,SELECTOR.count),_init_badge);
|
||
$.map(_getMatchElements($el,SELECTOR.checkbox),_init_checkbox);
|
||
$el = null;
|
||
}
|
||
|
||
/**
|
||
* 初始化按钮组(绑定事件)
|
||
*/
|
||
var initControlGroup = function(){
|
||
$(document).on('tap','ul.control-group li',function(){
|
||
var $this = $(this);
|
||
if($this.hasClass('active'))return;
|
||
$this.addClass('active').siblings('.active').removeClass('active').parent().trigger('change',[$this]);
|
||
});
|
||
}
|
||
/**
|
||
* 自身与子集相结合
|
||
*/
|
||
var _getMatchElements = function($el,selector){
|
||
return $el.find(selector).add($el.filter(selector));
|
||
}
|
||
/**
|
||
* 初始化iscroll组件或容器内iscroll组件
|
||
*/
|
||
var initScroll = function(selector){
|
||
$.map(_getMatchElements($(selector),SELECTOR.scroll),function(el){J.Scroll(el);});
|
||
}
|
||
/**
|
||
* 构造icon组件
|
||
*/
|
||
var _init_icon = function(el){
|
||
var $el = $(el),$icon=$el.children('i.icon'),icon = $el.data('icon');
|
||
if($icon.length > 0){//已经初始化，就更新icon
|
||
$icon.attr('class','icon '+icon);
|
||
}else{
|
||
$el.prepend('<i class="icon '+icon+'"></i>');
|
||
}
|
||
}
|
||
/**
|
||
* 构造toggle切换组件
|
||
*/
|
||
var _init_toggle = function(el){
|
||
var $el = $(el);
|
||
if($el.find('div.toggle-handle').length>0){//已经初始化
|
||
return;
|
||
}
|
||
var name = $el.attr('name');
|
||
//添加隐藏域，方便获取值
|
||
if(name){
|
||
$el.append('<input style="display: none;" name="'+name+'" value="'+$el.hasClass('active')+'"/>');
|
||
}
|
||
$el.append('<div class="toggle-handle"></div>');
|
||
$el.tap(function(){
|
||
var $t = $(this),v = !$t.hasClass('active');
|
||
$t.toggleClass('active').trigger('toggle',[v]);//定义toggle事件
|
||
$t.find('input').val(v);
|
||
})
|
||
}
|
||
/**
|
||
* 构造range滑块组件
|
||
*/
|
||
var _init_range = function(el){
|
||
var $el = $(el),$input;
|
||
var $range = $('input[type="range"]',el);
|
||
var align = $el.data('rangeinput');
|
||
var input = $('<input type="number" name="test" value="'+$range.val()+'"/>');
|
||
if(align == 'left'){
|
||
$input = input.prependTo($el);
|
||
}else{
|
||
$input = input.appendTo($el);
|
||
}
|
||
var max = parseInt($range.attr('max'),10);
|
||
var min = parseInt($range.attr('min'),10);
|
||
$range.change(function(){
|
||
$input.val($range.val());
|
||
});
|
||
$input.on('input',function(){
|
||
var value = parseInt($input.val(),10);
|
||
value = value>max?max:(value<min?min:value);
|
||
$range.val(value);
|
||
$input.val(value);
|
||
})
|
||
}
|
||
/**
|
||
* 构造progress组件
|
||
*/
|
||
var _init_progress = function(el){
|
||
var $el = $(el),$bar;
|
||
var progress = parseFloat($el.data('progress'))+'%';
|
||
var title = $el.data('title') || '';
|
||
$bar = $el.find('div.bar');
|
||
if($bar.length == 0){
|
||
$bar = $('<div class="bar"></div>').appendTo($el);
|
||
}
|
||
$bar.width(progress).text(title+progress);
|
||
if(progress == '100%'){
|
||
$bar.css('border-radius','10px');
|
||
}
|
||
}
|
||
/**
|
||
* 构造badge组件
|
||
*/
|
||
var _init_badge = function(el){
|
||
var $el = $(el),$count = $el.find('span.count'),count = parseInt($el.data('count')),
|
||
orient = $el.data('orient'), className = (orient == 'left')?'left':'';
|
||
if($count.length>0){
|
||
$count.text(count).show();//更新数字
|
||
}else{
|
||
$count = $('<span class="count '+className+'">'+count+'</span>').appendTo($el);
|
||
}
|
||
if(count == 0){
|
||
$count.hide();
|
||
}
|
||
}
|
||
|
||
var _init_checkbox = function(el){
|
||
var $el = $(el);
|
||
var value = $el.data('checkbox');
|
||
if($el.find('i.icon').length>0){
|
||
return;
|
||
}
|
||
$el.prepend('<i class="icon checkbox-'+value+'"></i>');
|
||
$el.on('tap',function(){
|
||
var status = ($el.data('checkbox') == 'checked') ? 'unchecked':'checked';
|
||
$el.data('checkbox',status).find('i.icon').attr('class','icon checkbox-'+status);
|
||
//自定义change事件
|
||
$el.trigger('change');
|
||
});
|
||
|
||
}
|
||
|
||
return {
|
||
init : init,
|
||
initControlGroup : initControlGroup,
|
||
icon : _init_icon,
|
||
toggle : _init_toggle,
|
||
progress : _init_progress,
|
||
range : _init_range,
|
||
badge : _init_badge,
|
||
scroll : initScroll
|
||
}
|
||
})(J.$);
|
||
/**
|
||
* 侧边菜单
|
||
*/
|
||
J.Menu = (function($){
|
||
var $asideContainer,$sectionContainer,$sectionMask;
|
||
var init = function(){
|
||
$asideContainer = $('#aside_container');
|
||
$sectionContainer = $('#section_container');
|
||
$sectionMask = $('<div id="section_container_mask"></div>').appendTo('#section_container');
|
||
//添加各种关闭事件
|
||
$sectionMask.on('tap',hideMenu);
|
||
$asideContainer.on('swipeRight','aside',function(){
|
||
if($(this).data('position') == 'right'){
|
||
hideMenu();
|
||
}
|
||
});
|
||
$asideContainer.on('swipeLeft','aside',function(){
|
||
if($(this).data('position') != 'right'){
|
||
hideMenu();
|
||
}
|
||
});
|
||
$asideContainer.on('tap','.aside-close',hideMenu);
|
||
}
|
||
/**
|
||
* 打开侧边菜单
|
||
* @param selector css选择器或element实例
|
||
*/
|
||
var showMenu = function(selector){
|
||
var $aside = $(selector).addClass('active'),
|
||
transition = $aside.data('transition'),// push overlay reveal
|
||
position = $aside.data('position') || 'left',
|
||
showClose = $aside.data('show-close'),
|
||
width = $aside.width(),
|
||
translateX = position == 'left'?width+'px':'-'+width+'px';
|
||
if(showClose && $aside.find('div.aside-close').length == 0){
|
||
$aside.append('<div class="aside-close icon close"></div>');
|
||
}
|
||
|
||
//aside中可能需要scroll组件
|
||
J.Element.scroll($aside);
|
||
|
||
if(transition == 'overlay'){
|
||
J.anim($aside,{translateX : '0%'});
|
||
}else if(transition == 'reveal'){
|
||
J.anim($sectionContainer,{translateX : translateX});
|
||
}else{//默认为push
|
||
J.anim($aside,{translateX : '0%'});
|
||
J.anim($sectionContainer,{translateX : translateX});
|
||
}
|
||
$('#section_container_mask').show();
|
||
J.hasMenuOpen = true;
|
||
}
|
||
/**
|
||
* 关闭侧边菜单
|
||
* @param duration {int} 动画持续时间
|
||
* @param callback 动画完毕回调函数
|
||
*/
|
||
var hideMenu = function(duration,callback){
|
||
var $aside = $('#aside_container aside.active'),
|
||
transition = $aside.data('transition'),// push overlay reveal
|
||
position = $aside.data('position') || 'left',
|
||
translateX = position == 'left'?'-100%':'100%';
|
||
|
||
var _finishTransition = function(){
|
||
$aside.removeClass('active');
|
||
J.hasMenuOpen = false;
|
||
callback && callback.call(this);
|
||
};
|
||
|
||
if(transition == 'overlay'){
|
||
J.anim($aside,{translateX : translateX},duration,_finishTransition);
|
||
}else if(transition == 'reveal'){
|
||
J.anim($sectionContainer,{translateX : '0'},duration,_finishTransition);
|
||
}else{//默认为push
|
||
J.anim($aside,{translateX : translateX},duration);
|
||
J.anim($sectionContainer,{translateX : '0'},duration,_finishTransition);
|
||
}
|
||
|
||
$('#section_container_mask').hide();
|
||
}
|
||
return {
|
||
init : init,
|
||
show : showMenu,
|
||
hide : hideMenu
|
||
}
|
||
})(J.$);
|
||
/**
|
||
* section 页面远程加载
|
||
*/
|
||
J.Page = (function($){
|
||
var _formatHash = function(hash){
|
||
return hash.indexOf('#') == 0 ? hash.substr(1) : hash;
|
||
}
|
||
/**
|
||
* 加载section模板
|
||
* @param {string} hash信息
|
||
* @param {string} url参数
|
||
*/
|
||
var loadSectionTpl = function(hash,callback){
|
||
var param = {},query,replaceSection = false;
|
||
if($.type(hash) == 'object'){
|
||
param = hash.param;
|
||
query = hash.query;
|
||
hash = hash.tag;
|
||
}
|
||
var q = $(hash).data('query');
|
||
//已经存在则直接跳转到对应的页面
|
||
if($(hash).length == 1){
|
||
if(q == query){
|
||
callback();
|
||
return;
|
||
}else{
|
||
replaceSection = true;
|
||
}
|
||
}
|
||
var id = _formatHash(hash);
|
||
//当前dom中不存在，需要从服务端加载
|
||
var url = J.settings.remotePage[hash];
|
||
//检查remotePage中是否有配置,没有则自动从basePagePath中装载模板
|
||
url || (url = J.settings.basePagePath+id+J.settings.basePageSuffix);
|
||
J.settings.showPageLoading && J.showMask();
|
||
loadContent(url,param,function(html){
|
||
J.settings.showPageLoading && J.hideMask();
|
||
//添加到dom树中
|
||
$(hash).remove();
|
||
var $h = $(html);
|
||
$('#section_container').append($h);
|
||
if(replaceSection){
|
||
$h.addClass('active');
|
||
}
|
||
//触发pageload事件
|
||
$h.trigger('pageload').data('query',query);
|
||
//构造组件
|
||
J.Element.init(hash);
|
||
callback();
|
||
$h = null;
|
||
});
|
||
}
|
||
var loadSectionRemote = function(url,section){
|
||
var param = J.Util.parseHash(window.location.hash).param;
|
||
loadContent(url,param,function(html){
|
||
$(section).html(html);
|
||
J.Element.init(section);
|
||
});
|
||
}
|
||
/**
|
||
* 加载文档片段
|
||
* @param url
|
||
*/
|
||
var loadContent = function(url,param,callback){
|
||
return $.ajax({
|
||
url : url,
|
||
timeout : 20000,
|
||
data : param,
|
||
success : function(html){
|
||
callback && callback(html);
|
||
}
|
||
});
|
||
}
|
||
return {
|
||
load : loadSectionTpl,
|
||
loadSection : loadSectionRemote,
|
||
loadContent : loadContent
|
||
}
|
||
})(J.$);
|
||
/**
|
||
* 路由控制器
|
||
*/
|
||
J.Router = (function($){
|
||
var _history = [];
|
||
/**
|
||
* 初始化events、state
|
||
*/
|
||
var init = function(){
|
||
$(window).on('popstate', _popstateHandler);
|
||
//阻止含data-target或者href以'#'开头的的a元素的默认行为
|
||
$(document).on('click','a',function(e){
|
||
var target = $(this).data('target'),
|
||
href = $(this).attr('href');
|
||
if(!href || href.match(/^#/) || target){
|
||
e.preventDefault();
|
||
return false;
|
||
}
|
||
});
|
||
$(document).on('tap','a[data-target]',_targetHandler);
|
||
_initIndex();
|
||
}
|
||
|
||
//处理app页面初始化
|
||
var _initIndex = function(){
|
||
var targetHash = location.hash;
|
||
//取页面中第一个section作为app的起始页
|
||
var $section = $('#section_container section').first();
|
||
var indexHash = '#'+$section.attr('id');
|
||
_add2History(indexHash,true);
|
||
if(targetHash != '' && targetHash != indexHash){
|
||
_showSection(targetHash);//跳转到指定的页面
|
||
}else{
|
||
$section.trigger('pageinit').trigger('pageshow').data('init',true).find('article.active').trigger('articleshow');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 处理浏览器的后退事件
|
||
* 前进事件不做处理
|
||
* @private
|
||
*/
|
||
var _popstateHandler = function(e){
|
||
if(e.state && e.state.hash){
|
||
var hash = e.state.hash;
|
||
if(_history[1] && hash === _history[1].hash){//存在历史记录，证明是后退事件
|
||
J.hasMenuOpen && J.Menu.hide();//关闭当前页面的菜单
|
||
J.hasPopupOpen && J.Popup.close();//关闭当前页面的弹出窗口
|
||
back();
|
||
}else{//其他认为是非法后退或者前进
|
||
return;
|
||
}
|
||
}else{
|
||
return;
|
||
}
|
||
|
||
}
|
||
var _targetHandler = function(){
|
||
var _this = $(this),
|
||
target = _this.attr('data-target'),
|
||
href = _this.attr('href');
|
||
|
||
switch(target){
|
||
case 'section' :
|
||
if(J.settings.appType == 'single'){
|
||
_showSection(href);
|
||
}
|
||
break;
|
||
case 'article' :
|
||
_showArticle(href,_this);
|
||
break;
|
||
case 'menu' :
|
||
_toggleMenu(href);
|
||
break;
|
||
case 'back' :
|
||
window.history.go(-1);
|
||
break;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 跳转到新页面
|
||
* @param hash 新page的'#id'
|
||
*/
|
||
var _showSection = function(hash){
|
||
if(J.hasMenuOpen){//关闭菜单后再转场
|
||
J.Menu.hide(200,function(){
|
||
_showSection(hash);
|
||
});
|
||
return;
|
||
}
|
||
//读取hash信息
|
||
var hashObj = J.Util.parseHash(hash);
|
||
var current = _history[0];
|
||
//同一个页面,则不重新加载
|
||
if(current.hash === hashObj.hash){
|
||
return;
|
||
}
|
||
//加载模板
|
||
J.Page.load(hashObj,function(){
|
||
var sameSection = (current.tag == hashObj.tag);
|
||
if(sameSection){//相同页面，触发相关事件
|
||
$(current.tag).trigger('pageshow').find('article.active').trigger('articlehide');
|
||
}else{//不同卡片页跳转动画
|
||
_changePage(current.tag,hashObj.tag);
|
||
}
|
||
_add2History(hash,sameSection);
|
||
});
|
||
}
|
||
/**
|
||
* 后退
|
||
*/
|
||
var back = function(){
|
||
if(J.settings.appType == 'single'){
|
||
_changePage(_history.shift().tag,_history[0].tag,true)
|
||
}
|
||
}
|
||
var _changePage = function(current,target,isBack){
|
||
J.Transition.run(current,target,isBack);
|
||
}
|
||
/**
|
||
* 缓存访问记录
|
||
*/
|
||
var _add2History = function(hash,noState){
|
||
var hashObj = J.Util.parseHash(hash);
|
||
if(noState){//不添加浏览器历史记录
|
||
_history.shift(hashObj);
|
||
window.history.replaceState(hashObj,'',hash);
|
||
}else{
|
||
window.history.pushState(hashObj,'',hash);
|
||
}
|
||
_history.unshift(hashObj);
|
||
}
|
||
|
||
/**
|
||
* 激活href对应的article
|
||
* @param href #id
|
||
* @param el 当前锚点
|
||
*/
|
||
var _showArticle = function(href,el){
|
||
var article = $(href);
|
||
if(article.hasClass('active'))return;
|
||
el.addClass('active').siblings('.active').removeClass('active');
|
||
var activeArticle = article.addClass('active').siblings('.active').removeClass('active');
|
||
article.trigger('articleshow');
|
||
activeArticle.trigger('articlehide');
|
||
}
|
||
|
||
var _toggleMenu = function(hash){
|
||
J.hasMenuOpen?J.Menu.hide():J.Menu.show(hash);
|
||
}
|
||
|
||
return {
|
||
init : init,
|
||
goTo : _showSection,
|
||
showArticle : _showArticle,
|
||
back : back
|
||
}
|
||
})(J.$);
|
||
/**
|
||
* 对zeptojs的ajax进行封装，实现离线访问
|
||
* 推荐纯数据的ajax请求调用本方法，其他的依旧使用zeptojs自己的ajax
|
||
* @Deprecated 用J.Cache代替
|
||
*/
|
||
J.Service = (function($){
|
||
var UNPOST_KEY = 'JINGLE_POST_DATA',
|
||
GET_KEY_PREFIX = 'JINGLE_GET_';
|
||
var ajax = function(options){
|
||
if(options.type == 'post'){
|
||
_doPost(options);
|
||
}else{
|
||
_doGet(options);
|
||
}
|
||
}
|
||
|
||
var _doPost = function(options){
|
||
if(J.offline){//离线模式，将数据存到本地，连线时进行提交
|
||
_setUnPostData(options.url,options.data);
|
||
options.success('数据已存至本地');
|
||
}else{//在线模式，直接提交
|
||
$.ajax(options);
|
||
}
|
||
}
|
||
var _doGet = function(options){
|
||
var key = options.url +JSON.stringify(options.data);
|
||
if(J.offline){//离线模式，直接从本地读取
|
||
var result = _getCache(key);
|
||
if(result){
|
||
options.success(result.data,key,result.cacheTime);
|
||
}else{//未缓存该数据
|
||
options.success(result);
|
||
}
|
||
}else{//在线模式，将数据保存到本地
|
||
var callback = options.success;
|
||
options.success = function(result){
|
||
_saveData2local(key,result);
|
||
callback(result,key);
|
||
}
|
||
$.ajax(options);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取本地已缓存的数据
|
||
* @private
|
||
*/
|
||
var _getCache = function(key){
|
||
return JSON.parse(window.localStorage.getItem(GET_KEY_PREFIX+key));
|
||
}
|
||
/**
|
||
* 缓存数据到本地
|
||
* @private
|
||
*/
|
||
var _saveData2local = function(key,result){
|
||
var data = {
|
||
data : result,
|
||
cacheTime : new Date()
|
||
}
|
||
window.localStorage.setItem(GET_KEY_PREFIX+key,JSON.stringify(data));
|
||
}
|
||
|
||
/**
|
||
* 将post的数据保存至本地
|
||
* @param url
|
||
* @param result
|
||
* @private
|
||
*/
|
||
var _setUnPostData = function(url,result){
|
||
var data = getUnPostData();
|
||
data = data || {};
|
||
data[url] = {
|
||
data : result,
|
||
createdTime : new Date()
|
||
}
|
||
window.localStorage.setItem(UNPOST_KEY,JSON.stringify(data));
|
||
}
|
||
/**
|
||
* 获取尚未同步的post数据
|
||
* @param url 没有就返回所有未同步的数据
|
||
*/
|
||
var getUnPostData = function(url){
|
||
var data = JSON.parse(window.localStorage.getItem(UNPOST_KEY));
|
||
return (data && url ) ? data[url] : data;
|
||
}
|
||
/**
|
||
* 移除未同步的数据
|
||
* @param url 没有就移除所有未同步的数据
|
||
*/
|
||
var removeUnPostData = function(url){
|
||
if(url){
|
||
var data = getUnPostData();
|
||
delete data[url];
|
||
window.localStorage.setItem(UNPOST_KEY,JSON.stringify(data));
|
||
}else{
|
||
window.localStorage.removeItem(UNPOST_KEY);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 同步本地缓存的post数据
|
||
* @param url
|
||
*/
|
||
var syncPostData = function(url,success,error){
|
||
var unPostData = getUnPostData(url).data;
|
||
$.ajax({
|
||
url : url,
|
||
contentType:'application/json',
|
||
data : unPostData,
|
||
type : 'post',
|
||
success : function(){
|
||
success(url);
|
||
},
|
||
error : function(){
|
||
error(url);
|
||
}
|
||
})
|
||
}
|
||
/**
|
||
* 同步所有的数据
|
||
* @param callback
|
||
*/
|
||
var syncAllPostData = function(success,error){
|
||
var unPostData = getUnPostData();
|
||
for(var url in unPostData){
|
||
syncPostData(url,success,error);
|
||
}
|
||
removeUnPostData();
|
||
}
|
||
|
||
//copy from zepto
|
||
function parseArguments(url, data, success, dataType) {
|
||
var hasData = !$.isFunction(data)
|
||
return {
|
||
url: url,
|
||
data: hasData ? data : undefined,
|
||
success: !hasData ? data : $.isFunction(success) ? success : undefined,
|
||
dataType: hasData ? dataType || success : success
|
||
}
|
||
}
|
||
|
||
var get = function(url, data, success, dataType){
|
||
return ajax(parseArguments.apply(null, arguments))
|
||
}
|
||
|
||
var post = function(url, data, success, dataType){
|
||
var options = parseArguments.apply(null, arguments)
|
||
options.type = 'POST'
|
||
return ajax(options)
|
||
}
|
||
|
||
var getJSON = function(url, data, success){
|
||
var options = parseArguments.apply(null, arguments);
|
||
options.dataType = 'json'
|
||
return ajax(options)
|
||
}
|
||
var clear = function(){
|
||
var storage = window.localStorage;
|
||
var keys = [];
|
||
for(var i = 0; i< storage.length; i++){
|
||
var key = storage.key(i);
|
||
key.indexOf(GET_KEY_PREFIX) == 0 && keys.push(key);
|
||
}
|
||
for(var i = 0; i < keys.length; i++){
|
||
storage.removeItem(keys[i]);
|
||
}
|
||
storage.removeItem(UNPOST_KEY);
|
||
}
|
||
return {
|
||
ajax : ajax,
|
||
get : get,
|
||
post : post,
|
||
getJSON : getJSON,
|
||
getUnPostData : getUnPostData,
|
||
removeUnPostData : removeUnPostData,
|
||
syncPostData : syncPostData,
|
||
syncAllPostData : syncAllPostData,
|
||
getCacheData : _getCache,
|
||
saveCacheData : _saveData2local,
|
||
clear : clear
|
||
}
|
||
})(J.$);
|
||
/**
|
||
* 提供一些简单的模板，及artTemplate的渲染
|
||
*/
|
||
J.Template = (function($){
|
||
/**
|
||
* 背景模板
|
||
* @param el selector
|
||
* @param title 显示文本
|
||
* @param icon 图标
|
||
*/
|
||
var background = function(el,title,icon){
|
||
var markup = '<div class="back-mask"><div class="icon '+icon+'"></div><div>'+title+'</div></div>';
|
||
$(el).html(markup);
|
||
}
|
||
|
||
/**
|
||
* 无记录背景模板
|
||
* @param el
|
||
*/
|
||
var no_result = function(el){
|
||
background(el,'没有找到相关数据','drawer');
|
||
}
|
||
/**
|
||
* 加载等待背景模板
|
||
* @param el
|
||
*/
|
||
var loading = function(el){
|
||
background(el,'加载中...','cloud-download');
|
||
}
|
||
|
||
/**
|
||
* 借助artTemplate模板来渲染页面
|
||
* @param containerSelector 目标容器
|
||
* @param templateId artTemplate模板ID
|
||
* @param data 模板数据
|
||
* @param type replace|add 渲染好的文档片段是替换还是添加到目标容器中
|
||
*/
|
||
var render = function(containerSelector,templateId,data,type){
|
||
var el = $(containerSelector),
|
||
type = type || 'replace';//replace add
|
||
if($.type(data) == 'array' && data.length == 0 ){
|
||
no_result(el);
|
||
}else{
|
||
var html = template(templateId,data);
|
||
if(type == 'replace'){
|
||
el.html(html);
|
||
}else{
|
||
el.append(html);
|
||
}
|
||
J.Element.init(html);
|
||
}
|
||
}
|
||
return {
|
||
render : render,
|
||
background : background,
|
||
loading : loading,
|
||
no_result : no_result
|
||
}
|
||
})(J.$);
|
||
|
||
/**
|
||
* 消息组件
|
||
*/
|
||
J.Toast = (function($){
|
||
var toast_type = 'toast',_toast,timer,
|
||
//定义模板
|
||
TEMPLATE = {
|
||
toast : '<a href="#">{value}</a>',
|
||
success : '<a href="#"><i class="icon checkmark-circle"></i>{value}</a>',
|
||
error : '<a href="#"><i class="icon cancel-circle"></i>{value}</a></div>',
|
||
info : '<a href="#"><i class="icon info-2"></i>{value}</a>'
|
||
}
|
||
|
||
var _init = function(){
|
||
//全局只有一个实例
|
||
$('body').append('<div id="jingle_toast"></div>');
|
||
_toast = $('#jingle_toast');
|
||
_subscribeCloseTag();
|
||
}
|
||
|
||
/**
|
||
* 关闭消息提示
|
||
*/
|
||
var hide = function(){
|
||
J.anim(_toast,'scaleOut',function(){
|
||
_toast.hide();
|
||
_toast.empty();
|
||
});
|
||
}
|
||
/**
|
||
* 显示消息提示
|
||
* @param type 类型 toast|success|error|info 空格 + class name 可以实现自定义样式
|
||
* @param text 文字内容
|
||
* @param duration 持续时间 为0则不自动关闭,默认为3000ms
|
||
*/
|
||
var show = function(type,text,duration){
|
||
if(timer) clearTimeout(timer);
|
||
var classname = type.split(/\s/);
|
||
toast_type = classname[0];
|
||
_toast.attr('class',type).html(TEMPLATE[toast_type].replace('{value}',text)).show();
|
||
J.anim(_toast,'scaleIn');
|
||
if(duration !== 0){//为0 不自动关闭
|
||
timer = setTimeout(hide,duration || J.settings.toastDuration);
|
||
}
|
||
}
|
||
var _subscribeCloseTag = function(){
|
||
_toast.on('tap','[data-target="close"]',function(){
|
||
hide();
|
||
})
|
||
}
|
||
_init();
|
||
return {
|
||
show : show,
|
||
hide : hide
|
||
}
|
||
})(J.$);
|
||
/**
|
||
* page转场动画
|
||
* 可自定义css动画
|
||
*/
|
||
J.Transition = (function($){
|
||
var isBack,$current,$target,transitionName,
|
||
animationClass = {
|
||
//[[currentOut,targetIn],[currentOut,targetIn]]
|
||
slide : [['slideLeftOut','slideLeftIn'],['slideRightOut','slideRightIn']],
|
||
cover : [['','slideLeftIn'],['slideRightOut','']],
|
||
slideUp : [['','slideUpIn'],['slideDownOut','']],
|
||
slideDown : [['','slideDownIn'],['slideUpOut','']],
|
||
popup : [['','scaleIn'],['scaleOut','']]
|
||
};
|
||
|
||
var _doTransition = function(){
|
||
//触发 beforepagehide 事件
|
||
$current.trigger('beforepagehide',[isBack]);
|
||
//触发 beforepageshow 事件
|
||
$target.trigger('beforepageshow',[isBack]);
|
||
var c_class = transitionName[0]||'empty' ,t_class = transitionName[1]||'empty';
|
||
$current.bind('webkitAnimationEnd.jingle', _finishTransition).addClass('anim '+ c_class);
|
||
$target.addClass('anim animating '+ t_class);
|
||
}
|
||
var _finishTransition = function() {
|
||
$current.off('webkitAnimationEnd.jingle');
|
||
$target.off('webkitAnimationEnd.jingle');
|
||
//reset class
|
||
$current.attr('class','');
|
||
$target.attr('class','active');
|
||
//add custom events
|
||
!$target.data('init') && $target.trigger('pageinit').data('init',true);
|
||
!$current.data('init') && $current.trigger('pageinit').data('init',true);
|
||
//触发pagehide事件
|
||
$current.trigger('pagehide',[isBack]);
|
||
//触发pageshow事件
|
||
$target.trigger('pageshow',[isBack]);
|
||
|
||
$current.find('article.active').trigger('articlehide');
|
||
$target.find('article.active').trigger('articleshow');
|
||
$current = $target = null;//释放
|
||
}
|
||
|
||
/**
|
||
* 执行转场动画，动画类型取决于目标page上动画配置(返回时取决于当前page)
|
||
* @param current 当前page
|
||
* @param target 目标page
|
||
* @param back 是否为后退
|
||
*/
|
||
var run = function(current,target,back){
|
||
//关闭键盘
|
||
$(':focus').trigger('blur');
|
||
isBack = back;
|
||
$current = $(current);
|
||
$target = $(target);
|
||
var type = isBack?$current.attr('data-transition'):$target.attr('data-transition');
|
||
type = type|| J.settings.transitionType;
|
||
//后退时取相反的动画效果组
|
||
transitionName = isBack ? animationClass[type][1] : animationClass[type][0];
|
||
_doTransition();
|
||
}
|
||
|
||
/**
|
||
* 添加自定义转场动画效果
|
||
* @param name 动画名称
|
||
* @param currentOut 正常情况下当前页面退去的动画class
|
||
* @param targetIn 正常情况下目标页面进入的动画class
|
||
* @param backCurrentOut 后退情况下当前页面退去的动画class
|
||
* @param backCurrentIn 后退情况下目标页面进入的动画class
|
||
*/
|
||
var addAnimation = function(name,currentOut,targetIn,backCurrentOut,backCurrentIn){
|
||
if(animationClass[name]){
|
||
console.error('该转场动画已经存在，请检查你自定义的动画名称(名称不能重复)');
|
||
return;
|
||
}
|
||
animationClass[name] = [[currentOut,targetIn],[backCurrentOut,backCurrentIn]];
|
||
}
|
||
return {
|
||
run : run,
|
||
add : addAnimation
|
||
}
|
||
|
||
})(J.$);
|
||
/**
|
||
* 常用工具类
|
||
*/
|
||
J.Util = (function($){
|
||
var parseHash = function(hash){
|
||
var tag,query,param={};
|
||
var arr = hash.split('?');
|
||
tag = arr[0];
|
||
if(arr.length>1){
|
||
var seg,s;
|
||
query = arr[1];
|
||
seg = query.split('&');
|
||
for(var i=0;i<seg.length;i++){
|
||
if(!seg[i])continue;
|
||
s = seg[i].split('=');
|
||
param[s[0]] = s[1];
|
||
}
|
||
}
|
||
return {
|
||
hash : hash,
|
||
tag : tag,
|
||
query : query,
|
||
param : param
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 格式化date
|
||
* @param date
|
||
* @param format
|
||
*/
|
||
var formatDate = function(date,format){
|
||
var o =
|
||
{
|
||
"M+" : date.getMonth()+1, //month
|
||
"d+" : date.getDate(), //day
|
||
"h+" : date.getHours(), //hour
|
||
"m+" : date.getMinutes(), //minute
|
||
"s+" : date.getSeconds(), //second
|
||
"q+" : Math.floor((date.getMonth()+3)/3), //quarter
|
||
"S" : date.getMilliseconds() //millisecond
|
||
}
|
||
if(/(y+)/.test(format))
|
||
format=format.replace(RegExp.$1,(date.getFullYear()+"").substr(4 - RegExp.$1.length));
|
||
for(var k in o)
|
||
if(new RegExp("("+ k +")").test(format))
|
||
format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
|
||
return format;
|
||
}
|
||
|
||
return {
|
||
parseHash : parseHash,
|
||
formatDate : formatDate
|
||
}
|
||
|
||
})(J.$);
|
||
/**
|
||
* 欢迎界面，可以制作酷炫吊炸天的欢迎界面哦
|
||
* @module Welcome
|
||
*/
|
||
J.Welcome = (function($){
|
||
/**
|
||
* 显示欢迎界面
|
||
*/
|
||
var showWelcome = function(){
|
||
$.ajax({
|
||
url : J.settings.basePagePath+'welcome.html',
|
||
timeout : 5000,
|
||
async : false,
|
||
success : function(html){
|
||
//添加到dom树中
|
||
$('body').append(html);
|
||
new J.Slider({
|
||
selector : '#jingle_welcome',
|
||
onAfterSlide : J.settings.welcomeSlideChange
|
||
});
|
||
}
|
||
})
|
||
}
|
||
/**
|
||
* 关闭欢迎界面
|
||
*/
|
||
var hideWelcome = function(){
|
||
J.anim('#jingle_welcome','slideLeftOut',function(){
|
||
$(this).remove();
|
||
window.localStorage.setItem('hasShowWelcome',true);
|
||
})
|
||
}
|
||
|
||
return {
|
||
show : showWelcome,
|
||
hide : hideWelcome
|
||
}
|
||
})(J.$);
|
||
(function($){
|
||
/*
|
||
* alias func
|
||
* 简化一些常用方法的写法
|
||
** /
|
||
/**
|
||
* 完善zepto的动画函数,让参数变为可选
|
||
*/
|
||
J.anim = function(el,animName,duration,ease,callback){
|
||
var d, e,c;
|
||
var len = arguments.length;
|
||
for(var i = 2;i<len;i++){
|
||
var a = arguments[i];
|
||
var t = $.type(a);
|
||
t == 'number'?(d=a):(t=='string'?(e=a):(t=='function')?(c=a):null);
|
||
}
|
||
$(el).animate(animName,d|| J.settings.transitionTime,e||J.settings.transitionTimingFunc,c);
|
||
}
|
||
/**
|
||
* 显示loading框
|
||
* @param text
|
||
*/
|
||
J.showMask = function(text){
|
||
J.Popup.loading(text);
|
||
}
|
||
/**
|
||
* 关闭loading框
|
||
*/
|
||
J.hideMask = function(){
|
||
J.Popup.close(true);
|
||
}
|
||
/**
|
||
* 显示消息
|
||
* @param text
|
||
* @param type toast|success|error|info
|
||
* @param duration 持续时间，为0则不自动关闭
|
||
*/
|
||
J.showToast = function(text,type,duration){
|
||
type = type || 'toast';
|
||
J.Toast.show(type,text,duration);
|
||
}
|
||
/**
|
||
* 关闭消息提示
|
||
*/
|
||
J.hideToast = function(){
|
||
J.Toast.hide();
|
||
}
|
||
J.alert = function(title,content){
|
||
J.Popup.alert(title,content);
|
||
}
|
||
J.confirm = function(title,content,okCall,cancelCall){
|
||
J.Popup.confirm(title,content,okCall,cancelCall);
|
||
}
|
||
/**
|
||
* 弹出窗口
|
||
* @param options
|
||
*/
|
||
J.popup = function(options){
|
||
J.Popup.show(options);
|
||
}
|
||
/**
|
||
* 关闭窗口
|
||
*/
|
||
J.closePopup = function(){
|
||
J.Popup.close();
|
||
}
|
||
/**
|
||
* 带箭头的弹出框
|
||
* @param html [可选]
|
||
* @param pos [可选] 位置
|
||
* @param arrowDirection [可选] 箭头方向
|
||
* @param onShow [可选] 显示之前执行
|
||
*/
|
||
J.popover = function(html,pos,arrowDirection,onShow){
|
||
J.Popup.popover(html,pos,arrowDirection,onShow);
|
||
}
|
||
/**
|
||
* 自动渲染模板并填充到页面
|
||
* @param containerSelector 欲填充的容器
|
||
* @param templateId 模板ID
|
||
* @param data 数据源
|
||
* @param type [可选] add|replace
|
||
*/
|
||
J.tmpl = function(containerSelector,templateId,data,type){
|
||
J.Template.render(containerSelector,templateId,data,type);
|
||
}
|
||
})(J.$);
|
||
/**
|
||
* 弹出框组件
|
||
*/
|
||
J.Popup = (function($){
|
||
var _popup,_mask,transition,clickMask2close,
|
||
POSITION = {
|
||
'top':{
|
||
top:0,
|
||
left:0,
|
||
right:0
|
||
},
|
||
'top-second':{
|
||
top:'44px',
|
||
left:0,
|
||
right:0
|
||
},
|
||
'center':{
|
||
top:'50%',
|
||
left:'5%',
|
||
right:'5%',
|
||
'border-radius' : '3px'
|
||
},
|
||
'bottom' : {
|
||
bottom:0,
|
||
left:0,
|
||
right:0
|
||
},
|
||
'bottom-second':{
|
||
bottom : '51px',
|
||
left:0,
|
||
right:0
|
||
}
|
||
},
|
||
ANIM = {
|
||
top : ['slideDownIn','slideUpOut'],
|
||
bottom : ['slideUpIn','slideDownOut'],
|
||
defaultAnim : ['bounceIn','bounceOut']
|
||
},
|
||
TEMPLATE = {
|
||
alert : '<div class="popup-title">{title}</div><div class="popup-content">{content}</div><div id="popup_btn_container"><a data-target="closePopup" data-icon="checkmark">{ok}</a></div>',
|
||
confirm : '<div class="popup-title">{title}</div><div class="popup-content">{content}</div><div id="popup_btn_container"><a class="cancel" data-icon="close">{cancel}</a><a data-icon="checkmark">{ok}</a></div>',
|
||
loading : '<i class="icon spinner"></i><p>{title}</p>'
|
||
};
|
||
|
||
/**
|
||
* 全局只有一个popup实例
|
||
* @private
|
||
*/
|
||
var _init = function(){
|
||
$('body').append('<div id="jingle_popup"></div><div id="jingle_popup_mask"></div>');
|
||
_mask = $('#jingle_popup_mask');
|
||
_popup = $('#jingle_popup');
|
||
_subscribeEvents();
|
||
}
|
||
|
||
var show = function(options){
|
||
var settings = {
|
||
height : undefined,//高度
|
||
width : undefined,//宽度
|
||
opacity : 0.3,//透明度
|
||
url : null,//远程加载url
|
||
tplId : null,//加载模板ID
|
||
tplData : null,//模板数据，配合tplId使用
|
||
html : '',//popup内容
|
||
pos : 'center',//位置 {@String top|top-second|center|bottom|bottom-second} {@object css样式}
|
||
clickMask2Close : true,// 是否点击外层遮罩关闭popup
|
||
showCloseBtn : true,// 是否显示关闭按钮
|
||
arrowDirection : undefined,//popover的箭头指向
|
||
animation : true,//是否显示动画
|
||
timingFunc : 'linear',
|
||
duration : 200,//动画执行时间
|
||
onShow : undefined //@event 在popup内容加载完毕，动画开始前触发
|
||
}
|
||
$.extend(settings,options);
|
||
clickMask2close = settings.clickMask2Close;
|
||
_mask.css('opacity',settings.opacity);
|
||
//rest position and class
|
||
_popup.attr({'style':'','class':''});
|
||
settings.width && _popup.width(settings.width);
|
||
settings.height && _popup.height(settings.height);
|
||
var pos_type = $.type(settings.pos);
|
||
if(pos_type == 'object'){// style
|
||
_popup.css(settings.pos);
|
||
transition = ANIM['defaultAnim'];
|
||
}else if(pos_type == 'string'){
|
||
if(POSITION[settings.pos]){ //已经默认的样式
|
||
_popup.css(POSITION[settings.pos])
|
||
var trans_key = settings.pos.indexOf('top')>-1?'top':(settings.pos.indexOf('bottom')>-1?'bottom':'defaultAnim');
|
||
transition = ANIM[trans_key];
|
||
}else{// pos 为 class
|
||
_popup.addClass(settings.pos);
|
||
transition = ANIM['defaultAnim'];
|
||
}
|
||
}else{
|
||
console.error('错误的参数！');
|
||
return;
|
||
}
|
||
_mask.show();
|
||
var html;
|
||
if(settings.html){
|
||
html = settings.html;
|
||
}else if(settings.url){//远程加载
|
||
html = J.Page.loadContent(settings.url);
|
||
}else if(settings.tplId){//加载模板
|
||
html = template(settings.tplId,settings.tplData)
|
||
}
|
||
|
||
//是否显示关闭按钮
|
||
if(settings.showCloseBtn){
|
||
html += '<div id="tag_close_popup" data-target="closePopup" class="icon cancel-circle"></div>';
|
||
}
|
||
//popover 箭头方向
|
||
if(settings.arrowDirection){
|
||
_popup.addClass('arrow '+settings.arrowDirection);
|
||
_popup.css('padding','8px');
|
||
if(settings.arrowDirection=='top'||settings.arrowDirection=='bottom'){
|
||
transition = ANIM[settings.arrowDirection];
|
||
}
|
||
}
|
||
|
||
_popup.html(html).show();
|
||
J.Element.init(_popup);
|
||
//执行onShow事件，可以动态添加内容
|
||
settings.onShow && settings.onShow.call(_popup);
|
||
|
||
//显示获取容器高度，调整至垂直居中
|
||
if(settings.pos == 'center'){
|
||
var height = _popup.height();
|
||
_popup.css('margin-top','-'+height/2+'px')
|
||
}
|
||
if(settings.animation){
|
||
J.anim(_popup,transition[0],settings.duration,settings.timingFunc);
|
||
}
|
||
J.hasPopupOpen = true;
|
||
}
|
||
|
||
/**
|
||
* 关闭弹出框
|
||
* @param noTransition 立即关闭，无动画
|
||
*/
|
||
var hide = function(noTransition){
|
||
_mask.hide();
|
||
if(transition && !noTransition){
|
||
J.anim(_popup,transition[1],200,function(){
|
||
_popup.hide().empty();
|
||
J.hasPopupOpen = false;
|
||
});
|
||
}else{
|
||
_popup.hide().empty();
|
||
J.hasPopupOpen = false;
|
||
}
|
||
|
||
}
|
||
var _subscribeEvents = function(){
|
||
_mask.on('tap',function(){
|
||
clickMask2close && hide();
|
||
});
|
||
_popup.on('tap','[data-target="closePopup"]',function(){hide();});
|
||
}
|
||
|
||
/**
|
||
* alert组件
|
||
* @param title 标题
|
||
* @param content 内容
|
||
*/
|
||
var alert = function(title,content,btnName){
|
||
var markup = TEMPLATE.alert.replace('{title}',title).replace('{content}',content).replace('{ok}',btnName || '确定');
|
||
show({
|
||
html : markup,
|
||
pos : 'center',
|
||
clickMask2Close : false,
|
||
showCloseBtn : false
|
||
});
|
||
}
|
||
|
||
/**
|
||
* confirm 组件
|
||
* @param title 标题
|
||
* @param content 内容
|
||
* @param okCall 确定按钮handler
|
||
* @param cancelCall 取消按钮handler
|
||
*/
|
||
var confirm = function(title,content,okCall,cancelCall){
|
||
var markup = TEMPLATE.confirm.replace('{title}',title).replace('{content}',content).replace('{cancel}','取消').replace('{ok}','确定');
|
||
show({
|
||
html : markup,
|
||
pos : 'center',
|
||
clickMask2Close : false,
|
||
showCloseBtn : false
|
||
});
|
||
$('#popup_btn_container [data-icon="checkmark"]').tap(function(){
|
||
hide();
|
||
okCall.call(this);
|
||
});
|
||
$('#popup_btn_container [data-icon="close"]').tap(function(){
|
||
hide();
|
||
cancelCall.call(this);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 带箭头的弹出框
|
||
* @param html 弹出框内容
|
||
* @param pos 位置
|
||
* @param arrow_direction 箭头方向
|
||
* @param onShow onShow事件
|
||
*/
|
||
var popover = function(html,pos,arrow_direction,onShow){
|
||
show({
|
||
html : html,
|
||
pos : pos,
|
||
showCloseBtn : false,
|
||
arrowDirection : arrow_direction,
|
||
onShow : onShow
|
||
});
|
||
}
|
||
|
||
/**
|
||
* loading组件
|
||
* @param text 文本，默认为“加载中...”
|
||
*/
|
||
var loading = function(text){
|
||
var markup = TEMPLATE.loading.replace('{title}',text||'加载中...');
|
||
show({
|
||
html : markup,
|
||
pos : 'loading',
|
||
opacity :.1,
|
||
animation : true,
|
||
clickMask2Close : false
|
||
});
|
||
}
|
||
|
||
/**
|
||
* actionsheet组件
|
||
* @param buttons 按钮集合
|
||
* [{color:'red',text:'btn',handler:function(){}},{color:'red',text:'btn',handler:function(){}}]
|
||
*/
|
||
var actionsheet = function(buttons){
|
||
var markup = '<div class="actionsheet">';
|
||
$.each(buttons,function(i,n){
|
||
markup += '<button style="background-color: '+ n.color +' !important;">'+ n.text +'</button>';
|
||
});
|
||
markup += '<button class="alizarin">取消</button>';
|
||
markup += '</div>';
|
||
show({
|
||
html : markup,
|
||
pos : 'bottom',
|
||
showCloseBtn : false,
|
||
onShow : function(){
|
||
$(this).find('button').each(function(i,button){
|
||
$(button).on('tap',function(){
|
||
if(buttons[i] && buttons[i].handler){
|
||
buttons[i].handler.call(button);
|
||
}
|
||
hide();
|
||
});
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
_init();
|
||
|
||
return {
|
||
show : show,
|
||
close : hide,
|
||
alert : alert,
|
||
confirm : confirm,
|
||
popover : popover,
|
||
loading : loading,
|
||
actionsheet : actionsheet
|
||
}
|
||
})(J.$);
|
||
/**
|
||
* 高亮组件
|
||
* 在zepto的tap事件里注入了一个延时器，来实现点击态
|
||
*/
|
||
J.Selected = (function($){
|
||
var DELAY = 100,SELECTOR='[data-selected]';
|
||
var _trigger = $.fn.trigger;
|
||
$.fn.trigger = function (event) {
|
||
var $this = $(this), args = arguments, classname;
|
||
if (event === 'tap' || event.type === 'tap') {
|
||
var match = $this.closest(SELECTOR).get(0);
|
||
if(match){
|
||
match = $(match);
|
||
classname = match.data('selected');
|
||
match.addClass(classname);
|
||
setTimeout(function () {
|
||
match.removeClass(classname);
|
||
_trigger.apply($this, args);
|
||
$this = match = null;
|
||
}, DELAY);
|
||
return this;
|
||
}
|
||
}
|
||
_trigger.apply($this, args);
|
||
return this;
|
||
}
|
||
})(J.$);
|
||
/**
|
||
* 数据缓存
|
||
* todo 对数据进行加密
|
||
*/
|
||
J.Cache = (function($){
|
||
var UNPOST_KEY = '_J_P_',
|
||
GET_KEY_PREFIX = '_J_';
|
||
|
||
/**
|
||
* 缓存从服务端获取的数据
|
||
* @param key
|
||
* @param value
|
||
*/
|
||
var save = function(key,value){
|
||
var data = {
|
||
data : value,
|
||
cacheTime : new Date()
|
||
}
|
||
window.localStorage.setItem(GET_KEY_PREFIX+key,JSON.stringify(data));
|
||
}
|
||
/**
|
||
* 获取本地已缓存的数据
|
||
*/
|
||
var get = function(key){
|
||
return JSON.parse(window.localStorage.getItem(GET_KEY_PREFIX+key));
|
||
}
|
||
|
||
/**
|
||
* 缓存本地待提交到服务端的数据(离线操作)
|
||
* @param url
|
||
* @param result
|
||
*/
|
||
var savePost = function(url,result){
|
||
var data = getPost();
|
||
data = data || {};
|
||
data[url] = {
|
||
data : result,
|
||
createdTime : new Date()
|
||
}
|
||
window.localStorage.setItem(UNPOST_KEY,JSON.stringify(data));
|
||
}
|
||
|
||
/**
|
||
* 获取本地尚未提交到服务端的缓存数据
|
||
* @param url 没有就返回所有未同步的数据
|
||
*/
|
||
var getPost = function(url){
|
||
var data = JSON.parse(window.localStorage.getItem(UNPOST_KEY));
|
||
return (data && url ) ? data[url] : data;
|
||
}
|
||
/**
|
||
* 移除未提交的待提交到服务端的缓存数据
|
||
* @param url 没有就移除所有未提交的数据
|
||
*/
|
||
var removePost = function(url){
|
||
if(url){
|
||
var data = getPost();
|
||
delete data[url];
|
||
window.localStorage.setItem(UNPOST_KEY,JSON.stringify(data));
|
||
}else{
|
||
window.localStorage.removeItem(UNPOST_KEY);
|
||
}
|
||
}
|
||
/**
|
||
* 同步本地未提交的数据到服务端
|
||
* * @param url 没有就同步所有未提交的数据
|
||
*/
|
||
var syncPost = function(url,success,error){
|
||
var dataLen,index = 0;
|
||
if($.type(url) == 'string'){
|
||
dataLen = 1;
|
||
sync(url);
|
||
}else{
|
||
var postData = getPost();
|
||
if(!postData)return;
|
||
dataLen = postData.length;
|
||
for(var url in postData){
|
||
sync(url);
|
||
}
|
||
}
|
||
function sync(url){
|
||
var data = getPost(url).data;
|
||
$.ajax({
|
||
url : url,
|
||
contentType:'application/json',
|
||
data : data,
|
||
type : 'post',
|
||
success : function(){
|
||
index++;
|
||
removePost(url);
|
||
if(index == dataLen)success(url);
|
||
},
|
||
error : function(){
|
||
error(url);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 清空本地缓存
|
||
*/
|
||
var clear = function(){
|
||
var storage = window.localStorage;
|
||
for(var key in storage){
|
||
if(key.indexOf(GET_KEY_PREFIX) == 0){
|
||
storage.removeItem(key);
|
||
}
|
||
}
|
||
storage.removeItem(UNPOST_KEY);
|
||
}
|
||
|
||
|
||
return {
|
||
get : get,
|
||
save : save,
|
||
getPost : getPost,
|
||
savePost : savePost,
|
||
removePost : removePost,
|
||
syncPost : syncPost,
|
||
clear : clear
|
||
}
|
||
|
||
})(J.$);
|
||
;(function($){
|
||
/**
|
||
* 日历组件
|
||
* @param selector selector
|
||
* @param options 配置参数
|
||
*/
|
||
var calendar = function(selector,options){
|
||
var defaults = {
|
||
months : ["01月", "02月", "03月", "04月", "05月", "06月",
|
||
"07月", "08月", "09月", "10月", "11月", "12月"],
|
||
days : ["日", "一", "二", "三", "四", "五", "六"],
|
||
swipeable : true,//是否可通过手指滑动
|
||
date : new Date(),//日历当前日期
|
||
onRenderDay : undefined,//渲染单元格时的事件
|
||
onSelect : undefined //选中日期时的事件
|
||
},
|
||
_this = this,
|
||
$el = $(selector),
|
||
$yearText,
|
||
$monthText,
|
||
$calendarBody,
|
||
currentDate,currentYear,currentMonth;
|
||
|
||
var _init = function(){
|
||
_this.settings = $.extend({},defaults,options);
|
||
currentYear = _this.settings.date.getFullYear();
|
||
currentMonth = _this.settings.date.getMonth();
|
||
currentDate = new Date(currentYear,currentMonth,_this.settings.date.getDate());
|
||
_render();
|
||
_subscribeEvents();
|
||
}
|
||
|
||
/**
|
||
* 获取月份第一天是星期几[0-6]
|
||
*/
|
||
var _fisrtDayOfMonth = function(date){
|
||
return ( new Date(date.getFullYear(), date.getMonth(), 1) ).getDay();
|
||
}
|
||
/**
|
||
* 获取月份总天数[1-31]
|
||
*/
|
||
var _daysInMonth = function(date){
|
||
return ( new Date(date.getFullYear(),date.getMonth()+1,0) ).getDate();
|
||
}
|
||
|
||
/**
|
||
* 渲染日历
|
||
* @private
|
||
*/
|
||
var _render = function(){
|
||
var html = '';
|
||
html += '<div class="jingle-calendar">';
|
||
html += _renderNav(currentYear,currentMonth);
|
||
html += _renderHead();
|
||
html += '<div class="jingle-calendar-body">';
|
||
html += _renderBody(currentDate);
|
||
html += '</div></div>'
|
||
$el.html(html);
|
||
var $span = $el.find('span');
|
||
$yearText = $span.eq(0);
|
||
$monthText = $span.eq(1);
|
||
$calendarBody = $el.find('.jingle-calendar-body');
|
||
}
|
||
|
||
var _renderNav = function(year,month){
|
||
var html = '<div class="jingle-calendar-nav">';
|
||
html += '<div> <i class="icon previous" data-year='+year+'></i><span>'+year+'</span><i class="icon next" data-year='+year+'></i></div>';
|
||
html += '<div ><i class="icon previous" data-month='+month+'></i> <span>'+_this.settings.months[month]+'</span><i class="icon next" data-month='+month+'></i></div>';
|
||
html += '</div>';
|
||
return html;
|
||
}
|
||
|
||
var _renderHead = function(){
|
||
var html = '<table><thead><tr>';
|
||
for(var i = 0; i < 7; i++){
|
||
html += '<th>'+_this.settings.days[i]+'</th>';
|
||
}
|
||
html += '</tr></thead></table>'
|
||
return html;
|
||
}
|
||
|
||
var _renderBody = function(date){
|
||
var firstDay = _fisrtDayOfMonth(date),
|
||
days = _daysInMonth(date),
|
||
rows = Math.ceil((firstDay+days) / 7),
|
||
beginDate,
|
||
html = '';
|
||
currentYear = date.getFullYear();
|
||
currentMonth = date.getMonth();
|
||
beginDate = new Date(currentYear,currentMonth,1-firstDay);//日历开始的日期
|
||
html += '<table><tbody>';
|
||
for(var i = 0; i < rows; i++){
|
||
html += '<tr>';
|
||
for(var j = 0; j < 7; j++){
|
||
html += _renderDay(beginDate,currentMonth);
|
||
beginDate.setDate(beginDate.getDate() + 1);
|
||
}
|
||
html += '</tr>';
|
||
}
|
||
html += '</tbody></table>';
|
||
return html;
|
||
}
|
||
var _renderDay = function(date,month){
|
||
var otherMonth = (date.getMonth() !== month);
|
||
var dateStr = _this.format(date);
|
||
var classname = (_this.format(_this.settings.date) == dateStr) ? 'active':'';
|
||
var dayStr = date.getDate();
|
||
if(_this.settings.onRenderDay){
|
||
dayStr = _this.settings.onRenderDay.call(null,dayStr,dateStr);
|
||
}
|
||
return otherMonth ? '<td> </td>' : '<td data-selected="selected" class="'+classname+ '" data-date= '+dateStr+'>'+dayStr+'</td>';
|
||
}
|
||
|
||
var _subscribeEvents = function(){
|
||
var $target,$ctarget;
|
||
$el.on('tap',function(e){
|
||
$target = $(e.target);
|
||
if($target.is('[data-year].next')){
|
||
//后一年
|
||
currentDate.setFullYear(currentDate.getFullYear()+1);
|
||
_this.refresh(currentDate);
|
||
}else if($target.is('[data-year].previous')){
|
||
//前一年
|
||
currentDate.setFullYear(currentDate.getFullYear()-1);
|
||
_this.refresh(currentDate);
|
||
}else if($target.is('[data-month].next')){
|
||
//后一月
|
||
currentDate.setMonth(currentDate.getMonth()+1);
|
||
_this.refresh(currentDate);
|
||
}else if($target.is('[data-month].previous')){
|
||
//前一月
|
||
currentDate.setMonth(currentDate.getMonth()-1);
|
||
_this.refresh(currentDate);
|
||
}
|
||
$ctarget = $target.closest('td');
|
||
if(!$target.is('td') && $ctarget.length > 0){
|
||
$target = $ctarget;
|
||
}
|
||
if($target.is('td')){
|
||
var dateStr = $target.data('date');
|
||
if(dateStr && _this.settings.onSelect){
|
||
_this.settings.onSelect.call(_this,dateStr)
|
||
}
|
||
}
|
||
|
||
});
|
||
$el.on('swipeLeft',function(){
|
||
currentDate.setMonth(currentDate.getMonth()+1);
|
||
_this.refresh(currentDate);
|
||
});
|
||
$el.on('swipeRight',function(){
|
||
currentDate.setMonth(currentDate.getMonth()-1);
|
||
_this.refresh(currentDate);
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 刷新日历为指定日期
|
||
* @param date 指定日期
|
||
*/
|
||
this.refresh = function(date){
|
||
var oldDate = new Date(currentYear,currentMonth,1),
|
||
newDate = new Date(date.getFullYear(),date.getMonth(),1),
|
||
transition = undefined,$table;
|
||
|
||
if(oldDate.getTime() == newDate.getTime())return;
|
||
transition = oldDate<newDate ? 'slideLeftRound' : 'slideRightRound';
|
||
|
||
$yearText.text(date.getFullYear());
|
||
$monthText.text(this.settings.months[date.getMonth()]);
|
||
var newbody = _renderBody(date);
|
||
J.anim($calendarBody,transition,function(){
|
||
$calendarBody.html(newbody);
|
||
});
|
||
|
||
}
|
||
_init();
|
||
}
|
||
/**
|
||
* 字符串转化为日期对象，只支持yyyy-MM-dd 和 yyyy/MM/dd
|
||
* @param date
|
||
* @return {*}
|
||
*/
|
||
calendar.prototype.parse = function(date){
|
||
var dateRE = /^(\d{4})(?:\-|\/)(\d{1,2})(?:\-|\/)(\d{1,2})$/;
|
||
return dateRE.test(date) ? new Date(parseInt(RegExp.$1, 10), parseInt(RegExp.$2, 10) - 1, parseInt(RegExp.$3, 10)) : null;
|
||
}
|
||
/**
|
||
* 格式化日期 yyyy-MM-dd
|
||
* @return {String}
|
||
*/
|
||
calendar.prototype.format = function(date){
|
||
var y = date.getFullYear(),m = date.getMonth()+1,d = date.getDate();
|
||
m = (m<10)?('0'+m):m;
|
||
d = (d<10)?('0'+d):d;
|
||
return y + '-' + m + '-' + d;
|
||
}
|
||
J.Calendar = calendar;
|
||
})(J.$);
|
||
/**
|
||
* 哥屋恩动组件(iscroll)
|
||
*/
|
||
;(function($){
|
||
var scrollCache = {},index = 1;
|
||
J.Scroll = function(selector,opts){
|
||
var scroll,scrollId,$el = $(selector),
|
||
options = {
|
||
hScroll : false,
|
||
bounce : false,
|
||
lockDirection : true,
|
||
useTransform: true,
|
||
useTransition: false,
|
||
checkDOMChanges: false,
|
||
onBeforeScrollStart: function (e) {
|
||
var target = e.target;
|
||
while (target.nodeType != 1) target = target.parentNode;
|
||
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
|
||
e.preventDefault();
|
||
}
|
||
};
|
||
scrollId = $el.data('_jscroll_');
|
||
//滚动组件使用频繁，缓存起来节省开销
|
||
if(scrollId && scrollCache[scrollId]){
|
||
scroll = scrollCache[scrollId];
|
||
$.extend(scroll.scroller.options,opts)
|
||
scroll.scroller.refresh();
|
||
return scroll;
|
||
}else{
|
||
scrollId = '_jscroll_'+index++;
|
||
$el.data('_jscroll_',scrollId);
|
||
$.extend(options,opts);
|
||
scroller = new iScroll($el[0],options);
|
||
return scrollCache[scrollId] = {
|
||
scroller : scroller,
|
||
destroy : function(){
|
||
scroller.destroy();
|
||
delete scrollCache[scrollId];
|
||
}
|
||
};
|
||
};
|
||
}
|
||
})(J.$);
|
||
|
||
|
||
/**
|
||
* 幻灯片组件
|
||
*/
|
||
;(function($){
|
||
function slider(selector,showDots){
|
||
var afterSlide = function(){},
|
||
beforeSlide = function(){return true},
|
||
gestureStarted = false,
|
||
index = 0,
|
||
speed = 200,
|
||
wrapper,
|
||
dots,
|
||
container,
|
||
slides,
|
||
slideNum,
|
||
slideWidth,
|
||
deltaX,
|
||
autoPlay
|
||
interval = 0;
|
||
var _this = this;
|
||
|
||
if($.isPlainObject(selector)){
|
||
wrapper = $(selector.selector);
|
||
showDots = selector.showDots;
|
||
beforeSlide = selector.onBeforeSlide || beforeSlide;
|
||
afterSlide = selector.onAfterSlide || afterSlide;
|
||
autoPlay = selector.autoPlay;
|
||
interval = selector.interval || 3000;
|
||
}else{
|
||
wrapper = $(selector);
|
||
}
|
||
/**
|
||
* 初始化容器大小
|
||
*/
|
||
var _init = function() {
|
||
container = wrapper.children().first();
|
||
slides = container.children();
|
||
slideNum = slides.length;
|
||
slideWidth = wrapper.offset().width;
|
||
container.css('width',slideNum * slideWidth);
|
||
slides.css({
|
||
'width':slideWidth,
|
||
'float':'left'
|
||
}).show();
|
||
if(showDots == undefined)showDots = true;
|
||
showDots && _initDots();
|
||
_slide(0, 0);
|
||
afterSlide(0);
|
||
autoPlay && _autoPlay();
|
||
};
|
||
|
||
var _autoPlay = function(){
|
||
setTimeout(function(){
|
||
if(index == slideNum - 1){
|
||
_slide(0);
|
||
}else{
|
||
_this.next();
|
||
}
|
||
_autoPlay();
|
||
},interval);
|
||
}
|
||
|
||
var _initDots = function(){
|
||
dots = wrapper.find('.dots');
|
||
if(dots.length>0){
|
||
dots.show();
|
||
}else{
|
||
var dotsWidth = slideNum*30+20+2;
|
||
var html = '<div class="dots"><ul>';
|
||
for(var i=0;i<slideNum;i++){
|
||
html +='<li index="'+i+'"';
|
||
if(i == 0){
|
||
html += 'class="active"';
|
||
}
|
||
html += '><a href="#"></a></li>';
|
||
}
|
||
html += '</ul></div>';
|
||
wrapper.append(html);
|
||
dots = wrapper.find('.dots');
|
||
dots.children().css('width',dotsWidth+'px');
|
||
dots.find('li').on('tap',function(){
|
||
var index = $(this).attr('index');
|
||
_slide(parseInt(index), speed);
|
||
})
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 滑动到指定卡片
|
||
* @param i
|
||
* @param duration
|
||
* @private
|
||
*/
|
||
var _slide = function(i, duration) {
|
||
duration = duration || speed;
|
||
container.css({
|
||
'-webkit-transition-duration':duration + 'ms',
|
||
'-webkit-transform':'translate3D(' + -(i * slideWidth) + 'px,0,0)'
|
||
});
|
||
if(index != i){
|
||
index = i;
|
||
if(dots) $(dots.find('li').get(index)).addClass('active').siblings().removeClass('active');
|
||
afterSlide(index);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 绑定滑动事件
|
||
*/
|
||
var _bindEvents = function() {
|
||
container.on('touchstart',_touchStart,false);
|
||
container.on('touchmove',_touchMove,false);
|
||
container.on('touchend',_touchEnd,false);
|
||
};
|
||
|
||
var _touchStart = function(event) {
|
||
var e = event.touches[0];
|
||
start = {
|
||
pageX: e.pageX,
|
||
pageY: e.pageY,
|
||
time: Number(new Date())
|
||
};
|
||
isScrolling = undefined;
|
||
deltaX = 0;
|
||
container[0].style.webkitTransitionDuration = 0;
|
||
gestureStarted = true;
|
||
};
|
||
|
||
var _touchMove = function(event) {
|
||
if(!gestureStarted)return;
|
||
var e = event.touches[0];
|
||
deltaX = e.pageX - start.pageX;
|
||
if ( typeof isScrolling == 'undefined') {
|
||
//根据X、Y轴的偏移量判断用户的意图是左右滑动还是上下滑动
|
||
isScrolling = Math.abs(deltaX) < Math.abs(e.pageY - start.pageY)
|
||
}
|
||
if (!isScrolling) {
|
||
event.preventDefault();
|
||
//判定是否达到了边界即第一个右滑、最后一个左滑
|
||
var isPastBounds = !index && deltaX > 0 || index == slideNum - 1 && deltaX < 0;
|
||
if(isPastBounds)return;
|
||
var pos = (deltaX - index * slideWidth);
|
||
container[0].style.webkitTransform = 'translate3D('+pos+'px,0,0)';
|
||
}
|
||
};
|
||
|
||
var _touchEnd = function(e) {
|
||
//判定是否跳转到下一个卡片
|
||
//滑动时间小于250ms或者滑动X轴的距离大于屏幕宽度的1/3，则直接跳转到下一个卡片
|
||
var isValidSlide = (Number(new Date()) - start.time < 250 && Math.abs(deltaX) > 20) || Math.abs(deltaX) > slideWidth/3;
|
||
//判定是否达到了边界即第一个右滑、最后一个左滑
|
||
var isPastBounds = !index && deltaX > 0 || index == slideNum - 1 && deltaX < 0;
|
||
if (!isScrolling) {
|
||
if(beforeSlide(index,deltaX)){
|
||
_slide( index + ( isValidSlide && !isPastBounds ? (deltaX < 0 ? 1 : -1) : 0 ), speed );
|
||
}else{
|
||
_slide(index);
|
||
}
|
||
}
|
||
gestureStarted = false;
|
||
};
|
||
|
||
|
||
_init();
|
||
_bindEvents();
|
||
|
||
this.refresh = function(){
|
||
container.attr('style','');
|
||
_init();
|
||
};
|
||
|
||
this.prev = function() {
|
||
if (index) _slide(index-1, speed);
|
||
};
|
||
|
||
this.next = function() {
|
||
if(index < slideNum-1){
|
||
_slide(index+1, speed);
|
||
}
|
||
};
|
||
this.index = function(i) {
|
||
_slide(i);
|
||
};
|
||
}
|
||
J.Slider = slider;
|
||
})(J.$);
|
||
/**
|
||
* 上拉/下拉组件
|
||
*/
|
||
;(function($){
|
||
var refreshCache = {},index = 1;
|
||
function Refresh(selector,type,callback){
|
||
var iscroll, scroller,refreshEl,iconEl,labelEl,topOffset,isPullDown,
|
||
options = {
|
||
selector : undefined,
|
||
type : 'pullDown',//pullDown|pullUp 默认为pullDown
|
||
minPullHeight : 10,//拉动的像素相对值，超过才会翻转
|
||
pullText: "下拉刷新...",
|
||
releaseText: "松开立即刷新...",
|
||
refreshText: "刷新中...",
|
||
refreshTip : false,//下拉时显示的文本，比如：最后更新时间:2013-....
|
||
onPullIcon : 'arrow-down-2',
|
||
onReleaseIcon : 'icon-reverse',
|
||
onRefreshIcon : 'spinner',
|
||
callback : undefined
|
||
};
|
||
//装载配置
|
||
if(typeof selector === 'object'){
|
||
$.extend(options,selector);
|
||
}else{
|
||
options.selector = selector;
|
||
options.type = type;
|
||
options.callback = callback;
|
||
if(type === 'pullUp'){
|
||
$.extend(options,{
|
||
pullText: "上拉加载更多...",
|
||
releaseText: "松开开立即加载...",
|
||
refreshText: "加载中...",
|
||
onPullIcon : 'arrow-up-3'
|
||
})
|
||
}
|
||
}
|
||
isPullDown = options.type === 'pullDown' ? true : false;
|
||
|
||
/**
|
||
* 初始化dom节点
|
||
* @param opts
|
||
* @private
|
||
*/
|
||
var _init = function(opts){
|
||
scroller = $(opts.selector).children()[0];
|
||
var refreshTpl = '<div class="refresh-container"><span class="refresh-icon icon '+opts.onPullIcon
|
||
+'"></span><span class="refresh-label">'
|
||
+opts.pullText+'</span>'
|
||
+(opts.refreshTip?'<div class="refresh-tip">'+opts.refreshTip+'</div>':'')+'</div>';
|
||
if(isPullDown){
|
||
refreshEl = $(refreshTpl).prependTo(scroller);
|
||
}else{
|
||
refreshEl = $(refreshTpl).appendTo(scroller);
|
||
}
|
||
topOffset = refreshEl.height();
|
||
iconEl = refreshEl.find('.refresh-icon');
|
||
labelEl = refreshEl.find('.refresh-label');
|
||
}
|
||
|
||
/**
|
||
* 构造iscroll组件，并绑定滑动事件
|
||
* @param opts
|
||
* @private
|
||
*/
|
||
var _excuteScroll = function(opts){
|
||
return J.Scroll(opts.selector,{
|
||
topOffset:isPullDown?topOffset:0,
|
||
bounce : true,
|
||
onScrollMove : function(){
|
||
if (this.y > opts.minPullHeight && isPullDown && !iconEl.hasClass(opts.onReleaseIcon)) {
|
||
iconEl.addClass(opts.onReleaseIcon);
|
||
labelEl.html(opts.releaseText);
|
||
this.minScrollY = 0;
|
||
} else if (this.y < opts.minPullHeight && isPullDown && iconEl.hasClass(opts.onReleaseIcon)) {
|
||
iconEl.removeClass(opts.onReleaseIcon);
|
||
labelEl.html(opts.pullText);
|
||
this.minScrollY = -topOffset;
|
||
}else if (this.y < (this.maxScrollY - opts.minPullHeight) && !isPullDown && !iconEl.hasClass(opts.onReleaseIcon)) {
|
||
iconEl.addClass(opts.onReleaseIcon);
|
||
labelEl.html(opts.releaseText);
|
||
this.maxScrollY = this.maxScrollY;
|
||
} else if (this.y > (this.maxScrollY + opts.minPullHeight) && !isPullDown && iconEl.hasClass(opts.onReleaseIcon)) {
|
||
iconEl.removeClass(opts.onReleaseIcon);
|
||
labelEl.html(opts.pullText);
|
||
this.maxScrollY = topOffset;
|
||
}
|
||
},
|
||
onScrollEnd : function(){
|
||
if(iconEl.hasClass(opts.onReleaseIcon)){
|
||
iconEl.removeClass(opts.onReleaseIcon).removeClass(opts.onPullIcon).addClass(opts.onRefreshIcon);
|
||
labelEl.html(opts.refreshText);
|
||
var _this = this;
|
||
setTimeout(function(){//解决在chrome下onRefresh的时候文本无法更改的问题。奇怪的问题！
|
||
opts.callback.call(_this);
|
||
},1);
|
||
|
||
}
|
||
},
|
||
onRefresh: function () {
|
||
iconEl.removeClass(opts.onRefreshIcon).addClass(opts.onPullIcon);
|
||
labelEl.html(opts.pullText);
|
||
}
|
||
});
|
||
}
|
||
|
||
//run
|
||
_init(options);
|
||
iscroll = _excuteScroll(options);
|
||
return iscroll;
|
||
|
||
}
|
||
|
||
/**
|
||
* 刷新组件
|
||
* @param selector selector
|
||
* @param type 类型 pullDown(下拉) pullUp(上拉)
|
||
* @param callback 回调函数
|
||
*/
|
||
J.Refresh = function(selector,type,callback){
|
||
var el,jRefreshId;
|
||
if(selector.selector){
|
||
el = $(selector.selector)
|
||
}else{
|
||
el = $(selector);
|
||
}
|
||
jRefreshId = el.data('_jrefresh_');
|
||
//因上拉下拉可能会使用的比较频繁，故缓存起来节省开销,亦可防止重复绑定
|
||
if(jRefreshId && refreshCache[jRefreshId]){
|
||
return refreshCache[jRefreshId];
|
||
}else{
|
||
jRefreshId = '_jrefresh_'+index++;
|
||
el.data('_jrefresh_',jRefreshId);
|
||
var refresh = new Refresh(selector,type,callback);
|
||
return refreshCache[jRefreshId] = {
|
||
scroller : refresh.scroller,
|
||
destroy : function(){
|
||
delete refreshCache[jRefreshId];
|
||
refresh.scroller.destroy();
|
||
$('.refresh-container',selector).remove();
|
||
}
|
||
};
|
||
}
|
||
}
|
||
})(J.$); |