手柄的jQuery插件close方法

我是新來的jQuery插件，並試圖瞭解它，我創建了一個小工具，用於顯示一個對話框，widget的_create()方法執行以下操作：手柄的jQuery插件close方法

添加一個面具對話框隱藏在用戶屏幕。添加一個關閉「按鈕」，這是與點擊事件顯示對話框向用戶處理一個div

當我點擊關閉DIV我可以用下面的命令刪除小部件實例 -

$(this).parent().remove();

我沒有找到一種方法來隱藏我在_create方法中創建的屏幕遮罩div。

代碼爲創建和關閉方法如下 -

_create: function() { 
      var handle = this; 
      if (this.options.Height == 0) this.options.Height = this.element.height(); 
      if (this.options.Width == 0) this.options.Width = this.element.width(); 
      $(document.body).css({ margin: 0, padding: 0 }); 
      this.wrapper = $("<div class='wrapperClass'>").css({ 
       'height': this.options.Height, 
       'width': this.options.Width, 
       'position': 'absolute', 
       'left': '50%', 
       'margin-left': -1 * this.options.Width/2, 
       'top': '50%', 
       'margin-top': -1 * this.options.Height/2, 
       'border': '3px solid red', 
       'border-radius': this.options.Radius, 
       'z-index': this.options.Zindex 
      }); 
      //create the screen masking background 
      this.maskScreen = $('<div />').css({ 'height': '100%', 'width': '100%', 'position': 'absolute', 'top': 0, 'left': 0, 'background-color': this.options.bgColor, 'z-index': this.options.Zindex - 1, 'display': 'block', 'opacity': this.options.bgOpacity, 'margin': 0, 'padding': 0 }); 
      $('body').append(this.maskScreen); 
      this.element.css('display', 'block'); 
      this.wrapper.html(this.element); 
      $('body').append(this.wrapper); 
      if (this.options.addClose) this._addClose(); 
     }, 
     _addClose: function() { 
      this.closeButton = $('<div />') 
      //add close class 
      .addClass("closeClass").css("z-index", this.options.Zindex + 1); 
      this.closeButton.on("click", function() { 

       $(this).parent().remove(); 

      }); 
      this.wrapper.append(this.closeButton); 
     },

如何可以引用屏幕遮蔽div我在_create()方法創造出來的？

來源

2015-01-05 Shai

也許用這個呢？ https://github.com/malsup/blockui – John

我已經添加了屏幕蒙版div的類，然後我刪除它與$（'。myMask'）。remove（）是否有方法引用關閉div通過小部件對象？ – Shai

UM，'$（this）.parent（）。remove（）;'是刪除元素，而不是刪除它。你真的應該使用「銷燬」$（foo）.myWidget（「destroy」）;' – epascarello

你應該使用jQueryUI的小部件_destroy方法做清理你，這樣你可以把自己所有您在_create方法添加的變量和因素，並刪除他們都在正確的順序恢復環境就像它一樣。

在這種情況下，您的closeButton應該簡單地調用您的小部件實例的_destroy方法，而不是自己進行任何刪除。

如果你可以發佈一個工作jsFiddle，我會告訴你實際的代碼。

來源

2015-01-05 14:36:09

謝謝 http://jsfiddle.net/gm43bpud/2/ – Shai

我問了一個* *工作** jsFiddle，至少可以點擊按鈕。這是*不*工作。在這裏看看演示的來源：http://jqueryui.com/widget/ –

該按鈕在我的VS2013中工作... 我想我理解你發給我的鏈接，我仍然無法確定我怎麼能夠**從一個新創建的div的點擊事件引用/銷燬**窗口小部件 – Shai

手柄的jQuery插件close方法

回答

相關問題