2012-05-28 113 views
2

任何人都知道在後端使用javascript監聽magento選項卡的方式,比如說每次有人點擊編輯客戶頁面上的標籤時都想做點什麼。 adminhtml/tabs.js有:Magento:Tab點擊事件

tabMouseClick : function(event) { 
    var tab = Event.findElement(event, 'a'); 

    // go directly to specified url or switch tab 
    if ((tab.href.indexOf('#') != tab.href.length-1) 
     && !(Element.hasClassName(tab, 'ajax')) 
    ) { 
     location.href = tab.href; 
    } 
    else { 
     this.showTabContent(tab); 
    } 
    Event.stop(event); 
}, 

但沒有用,任何人有什麼想法?

Event.observe("product_info_tabs", "click", function() 
{ alert(1); 
}); 

沒有做任何事情或者:我使用標準的原型JS觀察員也試過。該解決方案不應修改核心,因爲這會在升級和未來的magento版本中增加許多問題。

+1

請更精確地定義「無用」。您發佈的'varienTabs'處理程序通常是_is_聽取標籤點擊的地方。 –

+0

據我可以看到這個類用於呈現界面,我找不到用來接收點擊標籤事件的東西。 – changeling

+0

「用於接收點擊的東西」已經存在,您只需將代碼添加到「tabMouseClick」處理程序。例如:在你的帖子的'if/else'塊之前插入'alert(「tab被點擊」)'行,以查看這個行爲。 –

回答

2

要監聽後端Magento選項卡(varienTabs)上的點擊,您只需要將自定義觀察者添加到現有的觀察者。使用你的榜樣(「編輯客戶網頁」,在後端),這將是:

var myTabs = $$("#customer_info_tabs li a.tab-item-link"); 
for (var i = 0; i < myTabs.length; i++) { 
    Event.observe(myTabs[i], "click", function (event) { 
     var tab = Event.findElement(event, "a"); 
     // insert your custom code here 
     alert(tab.id); 
     Event.stop(event); 
    }); 
} 

要實現自定義的觀察者不改變核心文件(突破可升級),您可以覆蓋相應的管理控制器動作。

例如,覆蓋Mage_Adminhtml_CustomerController::editAction()

<!-- app/code/local/My/Adminhtml/etc/config.xml --> 
<config> 
    <modules> 
     <My_Adminhtml> 
      <version>0.1.0</version> 
     </My_Adminhtml> 
    </modules> 
    <admin> 
     <routers> 
      <adminhtml> 
       <args> 
        <modules> 
         <My_Adminhtml before="Mage_Adminhtml">My_Adminhtml</My_Adminhtml> 
        </modules> 
       </args> 
      </adminhtml> 
     </routers> 
    </admin> 
</config> 

接下來,定義您的自定義管理器:

// app/code/local/My/Adminhtml/controllers/CustomerController.php 
require 'Mage/Adminhtml/controllers/CustomerController.php'; 
class My_Adminhtml_CustomerController extends Mage_Adminhtml_CustomerController 
{ 
    public editAction() 
    { 
     // copy of Mage_Adminhtml_CustomerController::editAction() code here 
    } 
} 

最後,在重寫的行動,創建一個包含自定義觀察者腳本一個額外的文本塊將該塊附加到佈局。例如在editAction末尾插入這樣的事情:

: 
    $this->loadLayout(); 
    $oBlock = $this->getLayout()->createBlock('core/text')->setText(' 
     <script type="text/javascript"> 
      var myTabs = $$("#customer_info_tabs li a.tab-item-link"); 
      for (var i = 0; i < myTabs.length; i++) { 
       Event.observe(myTabs[i], "click", function (event) { 
        var tab = Event.findElement(event, "a"); 
        alert(tab.id); 
        Event.stop(event); 
       }); 
      } 
     </script> 
    '); 
    $this->getLayout()->getBlock('left')->append($oBlock); 
    $this->renderLayout(); 
    : 
+0

完美,非常感謝。 – changeling

0

舊的答案,但因爲我在這裏: Magento的內部觸發事件時,將顯示TEH標籤。 您可以簡單地勾住該事件。

varienGlobalEvents.attachEventHandler('showTab', function(arg){ 
      console.log(arg.tab); 
     });  

也不需要通過覆蓋控制器注入。 只需添加yoru自定義佈局指令,並相應地加載js。