====== 关于独立数字键盘 ======
因为是独立的数字键盘,所以
1 对应的输入框 type="number" 比 type="text" 更好;
2 加上 readonly="readonly" 在focus的时候不会太弹出手机自带的键盘。
====== 关于jquery-ajax请求 ======
====== 关于vue.js的使用 ======
使用模板
requirejs.config({
baseUrl: "/",
paths: {
'jquery': 'js/jquery/jquery-2.2.3.min',
'Vue': 'js/vue/vue.min',
'VueRouter': 'js/vue/vue-router.min',
'Util': 'js/common/util',
'text': 'js/common/text',
'FastClick': 'js/common/fastclick',
'jquery-ajax-plugin': 'js/jquery/jquery-ajax-plugin'
},
shim: {
'query-ajax-plugin': ['jquery'] //如果引用的jquery插件的时候,需要shim jquery
},
waitSeconds: 0 //设置require加载超时时间为0,表示永不超时
});
requirejs(['jquery', 'Vue', 'VueRouter', 'FastClick', 'Util',
'text!html/common/popup.html',
'text!html/login/first.html',
'text!html/login/second.html',
'text!html/login/third.html',
'jquery-ajax-plugin'], function ($, Vue, VueRouter, FastClick, Util,
popup, firstH, secondH, thirdH) {
//先注册组件
var popupCompHmtl = Vue.extend({
template: popup
});
Vue.component('popup-component', popupCompHmtl);
//获取必要变量
var websiteURL = Util.getURL();
//注册各个模块
var _v = null;
var firstHtml = Vue.extend({
template: firstH,
data: function () {
return {}
},
created: function () {
_v = this;
},
ready: function () {
FastClick.attach(document.body);
$("head title").html($("header p").html());
Util.showHeader();
//需要初始化的数据的ajax,请写在这里,而不是create方法里,
//原因:create的时候,页面还没被完全加载到,所有popup component这个组件都没被加载到,会影响显示效果的。
},
methods: {
method1: function() {
},
method2: function () {
}
}
...
...
var App = Vue.extend({});
Vue.use(VueRouter);
var router = new VueRouter();
router.map({
'/first': {
component: firstHtml
},
'/second': {
component: secondHtml
},
'/third': {
component: thirdHtml
}
})
router.start(App, '#main');
});
====== jquery插件 ======
加了一套loadingToast框架,在所有的ajax请求发起前 都会先有 loadingToast,结束后会自动关掉loadingToast
同时在如果收到结果有特殊字段的时候 做同一处理。
;(function ($) {
//备份jquery的ajax方法
var _ajax = $.ajax;
//重写jquery的ajax方法
$.ajax = function (opt) {
//备份opt中error和success方法
var fn = {
error: function (XMLHttpRequest, textStatus, errorThrown) {
},
success: function (data, textStatus) {
}
}
if (opt.error) {
fn.error = opt.error;
}
if (opt.success) {
fn.success = opt.success;
}
//扩展增强处理
var _opt = $.extend(opt, {
error: function (XMLHttpRequest, textStatus, errorThrown) {
//超时
if (textStatus == 'timeout') {
$("#toastContent").html("请求超时,请稍后重新尝试");
$("#toast").show();
setTimeout(function () {
$("#toast").hide();
}, 2000);
} else {
//错误方法增强处理
fn.error(XMLHttpRequest, textStatus, errorThrown);
}
},
success: function (data, textStatus) {
//成功回调方法增强处理
if (!data) {
$("#toastContent").html("哎呀,调用后端系统出错了");
$("#toast").show();
setTimeout(function () {
$("#toast").hide();
}, 2000);
} else if (!data.success && !!data.needLoginURL) {
$("#toastContent").html(data.resultMsg);
$("#toast").show();
setTimeout(function () {
$("#toast").hide();
window.location = data.needLoginURL + "?returnURL=" + encodeURIComponent(document.location.href);
}, 2000);
} else if (!data.success && !data.needLoginURL) {
if (!!data.resultMsg) {
//由于历史问题dialog2 是指的的 一个按钮的 dialog对应的是showDialog1
if (data.displayType == "showDialog1") {
$("#dialog2Content").html(data.resultMsg);
$('#dialog2').show().on('click', '.weui_btn_dialog', function () {
$('#dialog2').off('click').hide();
});
//由于历史问题dialog1 是指的的 一个按钮的 dialog对应的是showDialog2
} else if (data.displayType == "showDialog2") {
$("#dialog1Content").html(data.resultMsg);
$("#dialog1").show().on('click', '.weui_btn_dialog', function () {
$("#dialog1").off('click').hide();
});
} else {
$("#toastContent").html(data.resultMsg);
$("#toast").show();
setTimeout(function () {
$("#toast").hide();
}, 2000);
}
} else {
$("#toastContent").html("哎呀,调用后端系统出错了");
$("#toast").show();
setTimeout(function () {
$("#toast").hide();
}, 2000);
}
} else {
fn.success(data, textStatus);
}
},
beforeSend: function (XHR) {
//提交前回调方法
$('#loadingToast').show();
setTimeout(function () {
$('#loadingToast').hide();
}, 9000);
},
complete: function (XHR, TS) {
//请求完成后回调函数 (请求成功或失败之后均调用)。
$('#loadingToast').hide();
}
});
_ajax(_opt);
};
})(jQuery);