问题:kendo那么高端大气上档次的后台前端开发框架,竞然没有菊花控件真是让人大跌眼镜。
解决办法:亲手集成一个菊花控件。代码如下:
/*******************************
*
* author : codec007
* date : 20150306
* email : mailzy@vip.qq.com
* pluginname : LoadingMask
*
******************************/
(function ($) {
// shorten references to variables. this is better for uglification
var kendo = window.kendo,
ui = kendo.ui,
widget = ui.Widget;
var loadingMask = widget.extend({
// initialization code goes here
init: function (element, options) {
// base call to initialize widget
kendo.ui.Widget.fn.init.call(this, element, options);
},
show: function () {
var that = this,
container = that.element;
var mask = container.find(".k-loading-mask"),
support = kendo.support,
browser = support.browser,
isRtl, leftRight, webkitCorrection, containerScrollLeft;
isRtl = support.isRtl(container);
leftRight = isRtl ? "right" : "left";
containerScrollLeft = container.scrollLeft();
webkitCorrection = browser.webkit ? (!isRtl ? 0 : container[0].scrollWidth - container.width() - 2 * containerScrollLeft) : 0;
$("<div class='k-loading-mask'><span class='k-loading-text'>" + that.options.text + "</span><div class='k-loading-image'/><div class='k-loading-color'/></div>")
.width("100%").height("100%")
.css("top", container.scrollTop())
.css(leftRight, Math.abs(containerScrollLeft) + webkitCorrection)
.appendTo(container);
},
hide: function () {
var that = this;
that.element.find(".k-loading-mask").remove();
},
options: {
// the name is what it will appear as off the kendo namespace(i.e. kendo.ui.MyWidget).
// The jQuery plugin would be jQuery.fn.kendoMyWidget.
name: "LoadingMask",
// other options go here
text: '加载中...'
}
});
kendo.ui.plugin(loadingMask);
})(window.kendo.jQuery);
调用代码:
在指定的区域展示菊花
$("#loginForm").kendoLoadingMask().data("kendoLoadingMask").show();
让菊花消失
$("#loginForm").data("kendoLoadingMask").hide();
效果图:我用的此套皮肤的菊花是条型的