自定义扩展miniui组件遇到的问题 - jQuery MiniUI

mini.ux.Viewer = function (options) {
mini.ux.Viewer.superclass.constructor.call(this);
var defaults = {
footToolbar: [
'zoomIn',
'zoomOut',
'prev',
'fullscreen',
'next',
'actualSize',
'rotateRight'
],
icons: {
maximize: 'fa fa-window-maximize',
close: 'fa fa-close',
zoomIn: 'fa fa-search-plus',
zoomOut: 'fa fa-search-minus',
prev: 'fa fa-arrow-left',
next: 'fa fa-arrow-right',
fullscreen: 'fa fa-photo',
actualSize: 'fa fa-arrows-alt',
rotateLeft: 'fa fa-rotate-left',
rotateRight: 'fa fa-rotate-right'
},
ratioThreshold: 0.1,
};
this.options = $.extend(true, {}, defaults, options);
if (options && $.isArray(options.footToolbar)) {
this.options.footToolbar = options.footToolbar;
}
this.imageData = {};
this.isRotated = false;
this.rotateAngle = 0;
this.init();
};
mini.extend(mini.ux.Viewer, mini.Panel, {
uiCls: "mini-ux-window",
init: function(){
this.initComponents();
this.bindEvents();
this.resize();
this.loadImg(rootPath + "static/admin/images/login/bg.jpg");
},
initComponents: function () {
var footer = this.creatDOM();
this.set({
style: "width: 100%;height:100%",
borderStyle: "border: 0",
bodyStyle: "position: relative;padding:0",
footerStyle: "text-align: center",
showHeader: false,
showToolbar: false,
showFooter: true,
allowResize: false,
footer: footer
});
},
creatDOM: function () {
var btnsTpl = {
maximize: '<a name="maximize" class="mini-button m-l-xs m-l-xs m-r-xs" iconCls="' + this.options.icons.maximize + '" tooltip="maximize"></a>',
close: '<a name="close" class="mini-button m-l-xs m-l-xs m-r-xs" iconCls="' + this.options.icons.close + '" tooltip="close"></a>',
zoomIn: '<a name="zoomIn" class="mini-button m-l-xs m-l-xs m-r-xs" iconCls="' + this.options.icons.zoomIn + '" tooltip="zoom-in"></a>',
zoomOut: '<a name="zoomOut" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.zoomOut + '" tooltip="zoom-out"></a>',
prev: '<a name="prev" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.prev + '" tooltip="prev"></a>',
next: '<a name="next" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.next + '" tooltip="next"></a>',
fullscreen: '<a name="fullscreen" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.fullscreen + '" tooltip="fullscreen"></a>',
actualSize: '<a name="actualSize" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.actualSize + '" tooltip="actual-size"></a>',
rotateLeft: '<a name="rotateLeft" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.rotateLeft + '" tooltip="rotate-left"></a>',
rotateRight: '<a name="rotateRight" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.rotateRight + '" tooltip="rotate-right"></a>'
};
var toolbarHtml = this.creatBtns(this.options.footToolbar, btnsTpl);
return toolbarHtml;
},
creatBtns: function (toolbar, btns) {
var btnsStr = '';
$.each(toolbar, function (index, item) {
btnsStr += btns[item];
});
return btnsStr;
},

复制代码

bindEvents: function () {
var that = this;
this.maximizeBtn = mini.getbyName('maximize', this);
this.zoomInBtn = mini.getbyName('zoomIn', this);
this.zoomOutBtn = mini.getbyName('zoomOut', this);
this.fullscreenBtn = mini.getbyName('fullscreen', this);
this.actualSizeBtn = mini.getbyName('actualSize', this);
this.rotateLeftBtn = mini.getbyName('rotateLeft', this);
this.rotateRightBtn = mini.getbyName('rotateRight', this);
this.$stage.off('wheel mousewheel DOMMouseScroll').on('wheel mousewheel DOMMouseScroll', function (e) {
that.wheel(e);
});
this.zoomInBtn.on('click', function (e) {
that.zoom(that.options.ratioThreshold * 3, {
x: that.$stage.width() / 2,
y: that.$stage.height() / 2
}, e);
});
this.zoomOutBtn.on('click', function (e) {
that.zoom(-that.options.ratioThreshold * 3, {
x: that.$stage.width() / 2,
y: that.$stage.height() / 2
}, e);
});
this.actualSizeBtn.on('click', function (e) {
that.zoomTo(1, {
x: that.$stage.width() / 2,
y: that.$stage.height() / 2
}, e);
});
this.fullscreenBtn.on('click', function (e) {
that.fullscreen();
});
this.rotateLeftBtn.on('click', function (e) {
that.rotate(-90);
});
this.rotateRightBtn.on('click', function (e) {
that.rotate(90);
});
$(document).off('keydown').on('keydown', function (e) {
that.keydown(e);
});
},

复制代码