如何更改Dojo TabContainer行为，只需打开外部链接，而不是显示ContentPane？ [英] How to change Dojo TabContainer behaviour to simply open an external link instead of showing a ContentPane?

问题描述

我正在使用具有几个不同的 ContentPane 孩子的 TabContainer 。每个人都配备了一个 href param以获取当选择选项卡时显示的外部AJAX内容：

I am working with a TabContainer having several different ContentPane children. Each of them is equipped with a href param to fetch external AJAX content shown when a tab is being selected:

dojo.addOnLoad(function() {
    var tc_nav = new dijit.layout.TabContainer({
        style: 'width: 98%;',
        doLayout: false
    }, 'tc_nav');

    var cp1 = new dijit.layout.ContentPane({
        title: 'Test 1',
        href: 'ajax?test1',
        style: 'padding: 10px;',
        selected: true
    });

    dojo.connect(cp1, 'onShow', function() {
        cp1.refresh();
    });

    /*
     * ...
     */

    tc_nav.addChild(cp1);

    /*
     * ...
     */

    tc_nav.startup();
});

现在我想集成其他应用程序之间的选项卡，而不是加载内容成为 ContentPane 该标签应该遵循同一窗口中的简单链接（例如< a href =http://www.google .com /> Link< / a> ），留下包含js / dojo应用的页面。我没有找到满意的解决方案，也没有找到符合这个要求的dojo小部件。什么是最好的方法？

Now I want to integrate a tab among the others which should be different in its behaviour: Instead of loading content into a ContentPane the tab should follow a simple link in the same window (like a <a href="http://www.google.com/">Link</a>), leaving the page containing the js/dojo app. I didn't find any satisfying solution yet, nor a dojo widget matching this requirement. What would be the best approach?

作为一个不愉快的解决方法，我创建了一个覆盖 onShow 事件触发一个 window.location.href ='...'; ：

As an unpleasant workaround I created an overridden onShow event firing a window.location.href = '...';:

var cp2 = new dijit.layout.ContentPane({
    title: 'Test 2',
    style: 'padding: 10px;'
});

dojo.connect(cp2, 'onShow', function() {
    window.location.href = 'http://www.google.com/';
});

此解决方法的一个令人讨厌的缺点是事实是 ContentPane 首先被加载，然后设置 window.location.href ，这导致一个非常特别的懒惰重载效应，从而导致糟糕的用户体验。我想避免这个中间步骤。

An annoying disadvantage of this workaround is the fact the ContentPane is loaded first and afterwards the window.location.href is set, which leads to a quite peculiar lazy reload effect and consequently to a bad user experience. I would like to avoid this intermediate step.

推荐答案

满足上述要求的可能的解决方法是覆盖 onClick 事件的 ContentPane 的 controlButton ：

A possible workaround to meet the above mentioned requirements is to override the onClick event of the ContentPane's controlButton:

/*
 * ...
 */

var cp2 = new dijit.layout.ContentPane({
    title: 'Test 2',
    style: 'padding: 10px;'
});

/*
 * ...
 */

tc_nav.addChild(cp2);

/*
 * ...
 */

tc_nav.startup();

/*
 * ...
 */

cp2.controlButton.onClick = function() {
    window.location.href = 'http://www.google.com/';
};

请注意，不要在 onClick 事件（例如通过 dojo.connect（cp2.controlButton，'onClick'，function（）{/ * ... * /}）; ），而是覆盖它，否则将首先调用 ContentPane 的内容。

Please note not to attach another function to the onClick event (e. g. by dojo.connect(cp2.controlButton, 'onClick', function() { /* ... */ });), but rather to override it, otherwise the ContentPane's content would be called up first.

请注意， TabContainer 的 startup（）函数必须首先调用以使 controlButton 对象可访问。

Please note further the TabContainer's startup() function has to be invoked first to make the controlButton object accessible.

这篇关于如何更改Dojo TabContainer行为，只需打开外部链接，而不是显示ContentPane？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！