創建一個jQuery UI插件：IIFE＆返回對象

我試圖創建一個允許用戶在div#canvas上繪製矩形的小jQueryUI插件。該插件擴展了ui.mouse並負責附加助手，以便可視化繪製矩形的過程，但實際上並未渲染。創建一個jQuery UI插件：IIFE＆返回對象

相反，它應該返回一個boxProperties對象，但我一直無法做到這一點。我對IIFE相當陌生，並沒有完全掌握封閉，但我懷疑解決方案存在於某處。我嘗試了一些東西，但缺乏適當的知識無法實現任何目標。

美中不足的是，div#canvas（其中矩形繪製），實際上是一個Marionette.CollectionView和矩形本身將是Marionette.ItemView動態添加到的CollectionView，將盡快他們繪製的渲染他們。

我應該添加到我的代碼中，以便只要繪製矩形，就會返回一個boxProperties對象，以便我可以將它傳遞給矩形ItemView以獲取其渲染？

這裏是我的插件代碼

(function($, undefined){ 
    $.widget('nc.boxMaker', $.ui.mouse, { 
     version: '0.0.1', 

     options: { 
      distance: 60 
     }, 

     _create: function() { 
      el = this.element; 
      screenOffset = el.offset(); 
      screenOffset.left = Math.round(screenOffset.left); 
      screenOffset.top = Math.round(screenOffset.top); 
      this._mouseInit(); 
     }, 

     _mouseStart: function(event) { 
      this.coords = [event.pageX - screenOffset.left, event.pageY - screenOffset.top]; 
      this.boxHelper = $(document.createElement('div')); 

      this.boxHelper.css({ 
       "border":'1px dotted black', 
       "z-index": 100, 
       "position": "absolute", 
       "left": this.coords[0], 
       "top": this.coords[1], 
       "width": 10, 
       "height": 10 
      }); 
      el.append(this.boxHelper); 
     }, 

     _mouseDrag: function(event) { 
      var x1 = this.coords[0], y1 = this.coords[1], 
       x2 = event.pageX - screenOffset.left, y2 = event.pageY - screenOffset.top; 
      if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; } 
      if (y1 > y2) { var tmp1 = y2; y2 = y1; y1 = tmp1; } 
      boxProperties = {left: x1, top: y1, width: x2-x1, height: y2-y1}; 
      this.boxHelper.css(boxProperties); 
     }, 

     _mouseStop: function(event) { 
      this.boxHelper.remove(); 
      return boxProperties; 
     } 

    }); 

})(jQuery);

來源

2013-11-22 IgnorantUser

在我使用jQuery的UI _trigger method

_mouseStop: function(event) { 
     this.boxHelper.remove(); 
     console.log("about to trigger view event!") 
     this._trigger("stoppedDrawing", event, boxProperties); 
    }

所以，只要_mouseStop方法被調用結束後，我們會刪除幫手矩形，和觸發類型爲"stoppedDrawing"的事件並通過boxProperties。請注意，完整的事件類型將爲"boxmakerstoppeddrawing"，因爲我已經命名了我的jquery-ui插件boxMaker。

現在回到我的Marionette.CollectionView我初始化視圖

initialize: function() { 
    this.$el.boxMaker(); 

    },

然後添加我的事件

events: { 
    'boxmakerstoppeddrawing' : 'drawingHandler' 
    },

由於我計算的東西，我有我的itemViewOptions一個功能，即返回boxProperties對象

itemViewOptions: function() { 
    return boxProperties; 
    }

L AST但並非最不重要的，我有我drawingHandler，這需要創建矩形模型的實例，與boxProperties，並將其添加到集合（這需要其附加的護理）

drawingHandler: function() { 
    var rectangle = new Rectangle(); 
    this.collection.add(rectangle); 
    }

來源

2013-11-25 11:03:41 IgnorantUser

做ü發佈插件的護理？我想實現相同的功能，例如。用戶可以使用鼠標在畫布上創建一個矩形，然後通過一些變量爲其分配寬度和高度。當變量的值被更新時，該矩形被重繪。 –

創建一個jQuery UI插件：IIFE＆返回對象

回答

相關問題