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

Aisin丿Gioro

1. mini.ux.Viewer = function (options) {
   
2.     mini.ux.Viewer.superclass.constructor.call(this);
   
3.     var defaults = {
   
4.         footToolbar: [
   
5.             'zoomIn',
   
6.             'zoomOut',
   
7.             'prev',
   
8.             'fullscreen',
   
9.             'next',
   
10.             'actualSize',
    
11.             'rotateRight'
    
12.         ],
    
13.         icons: {
    
14.             maximize: 'fa fa-window-maximize',
    
15.             close: 'fa fa-close',
    
16.             zoomIn: 'fa fa-search-plus',
    
17.             zoomOut: 'fa fa-search-minus',
    
18.             prev: 'fa fa-arrow-left',
    
19.             next: 'fa fa-arrow-right',
    
20.             fullscreen: 'fa fa-photo',
    
21.             actualSize: 'fa fa-arrows-alt',
    
22.             rotateLeft: 'fa fa-rotate-left',
    
23.             rotateRight: 'fa fa-rotate-right'
    
24.         },
    
25.         ratioThreshold: 0.1,
    
26.     };
    
27.     this.options = $.extend(true, {}, defaults, options);
    
28.     if (options && $.isArray(options.footToolbar)) {
    
29.         this.options.footToolbar = options.footToolbar;
    
30.     }
    
31.     this.imageData = {};
    
32.     this.isRotated = false;
    
33.     this.rotateAngle = 0;
    
34.     this.init();
    
35. };
    
36. mini.extend(mini.ux.Viewer, mini.Panel, {
    
37.     uiCls: "mini-ux-window",
    
38.     init: function(){
    
39.         this.initComponents();
    
40.         this.bindEvents();
    
41.         this.resize();
    
42.         this.loadImg(rootPath + "static/admin/images/login/bg.jpg");
    
43.     },
    
44.     initComponents: function () {
    
45.         var footer = this.creatDOM();
    
46. 
    
47.         this.set({
    
48.             style: "width: 100%;height:100%",
    
49.             borderStyle: "border: 0",
    
50.             bodyStyle: "position: relative;padding:0",
    
51.             footerStyle: "text-align: center",
    
52.             showHeader: false,
    
53.             showToolbar: false,
    
54.             showFooter: true,
    
55.             allowResize: false,
    
56.             footer: footer
    
57.         });
    
58.     },
    
59.     creatDOM: function () {
    
60.         var btnsTpl = {
    
61.             maximize: '<a name="maximize" class="mini-button m-l-xs m-l-xs m-r-xs" iconCls="' + this.options.icons.maximize + '" tooltip="maximize"></a>',
    
62.             close: '<a name="close" class="mini-button m-l-xs m-l-xs m-r-xs" iconCls="' + this.options.icons.close + '" tooltip="close"></a>',
    
63.             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>',
    
64.             zoomOut: '<a name="zoomOut" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.zoomOut + '" tooltip="zoom-out"></a>',
    
65.             prev: '<a name="prev" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.prev + '" tooltip="prev"></a>',
    
66.             next: '<a name="next" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.next + '" tooltip="next"></a>',
    
67.             fullscreen: '<a name="fullscreen" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.fullscreen + '" tooltip="fullscreen"></a>',
    
68.             actualSize: '<a name="actualSize" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.actualSize + '" tooltip="actual-size"></a>',
    
69.             rotateLeft: '<a name="rotateLeft" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.rotateLeft + '" tooltip="rotate-left"></a>',
    
70.             rotateRight: '<a name="rotateRight" class="mini-button m-l-xs m-r-xs" iconCls="' + this.options.icons.rotateRight + '" tooltip="rotate-right"></a>'
    
71.         };
    
72. 
    
73.         var toolbarHtml = this.creatBtns(this.options.footToolbar, btnsTpl);
    
74.         return toolbarHtml;
    
75.     },
    
76.     creatBtns: function (toolbar, btns) {
    
77.         var btnsStr = '';
    
78. 
    
79.         $.each(toolbar, function (index, item) {
    
80.             btnsStr += btns[item];
    
81.         });
    
82. 
    
83.         return btnsStr;
    
84.     },

复制代码

1. bindEvents: function () {
   
2.         var that = this;
   
3. 
   
4.         this.maximizeBtn = mini.getbyName('maximize', this);
   
5.         this.zoomInBtn = mini.getbyName('zoomIn', this);
   
6.         this.zoomOutBtn = mini.getbyName('zoomOut', this);
   
7.         this.fullscreenBtn = mini.getbyName('fullscreen', this);
   
8.         this.actualSizeBtn = mini.getbyName('actualSize', this);
   
9.         this.rotateLeftBtn = mini.getbyName('rotateLeft', this);
   
10.         this.rotateRightBtn = mini.getbyName('rotateRight', this);
    
11. 
    
12.         this.$stage.off('wheel mousewheel DOMMouseScroll').on('wheel mousewheel DOMMouseScroll', function (e) {
    
13.             that.wheel(e);
    
14.         });
    
15. 
    
16.         this.zoomInBtn.on('click', function (e) {
    
17.             that.zoom(that.options.ratioThreshold * 3, {
    
18.                 x: that.$stage.width() / 2,
    
19.                 y: that.$stage.height() / 2
    
20.             }, e);
    
21.         });
    
22.         this.zoomOutBtn.on('click', function (e) {
    
23.             that.zoom(-that.options.ratioThreshold * 3, {
    
24.                 x: that.$stage.width() / 2,
    
25.                 y: that.$stage.height() / 2
    
26.             }, e);
    
27.         });
    
28.         this.actualSizeBtn.on('click', function (e) {
    
29.             that.zoomTo(1, {
    
30.                 x: that.$stage.width() / 2,
    
31.                 y: that.$stage.height() / 2
    
32.             }, e);
    
33.         });
    
34.         this.fullscreenBtn.on('click', function (e) {
    
35.             that.fullscreen();
    
36.         });
    
37.         this.rotateLeftBtn.on('click', function (e) {
    
38.             that.rotate(-90);
    
39.         });
    
40.         this.rotateRightBtn.on('click', function (e) {
    
41.             that.rotate(90);
    
42.         });
    
43. 
    
44.         $(document).off('keydown').on('keydown', function (e) {
    
45.             that.keydown(e);
    
46.         });
    
47.     },

复制代码

为什么我给按钮绑定点击事件获取不到按钮组件？footer的按钮直接换成字符串拼接的形式就可以获取

felt

直接发做好例子，发html上来

deepblue1974

html没有解析为minui对象,所以get不到的.建用在在init中用new mini.xxxx 创建mini对象

mini.parse();