[RESOLVIDO]TabView YUI Yahoo não recriar objeto

17 de novembro de 2011 7 respostas

camila.java 17 de novembro de 2011

Bom dia,

Estou desenvolvendo uma aplicação utilizando a api da yahoo YAHOO.widget.TabView.
Estou com o seguinte problema, ao remover uma tab ele da um reload nas outras tabs, acho que é por causa do new YAHOO.widget.TabView(‘demo’); que executo para obter a tabView. Quando isso acontece, perco as informações que estavam nas abas.

É possivel obter a tabView criada sem utilizar o new YAHOO.widget.TabView(‘demo’);???

Meu código de remover

function removeTab() {

	var tabView = new YAHOO.widget.TabView('demo');
	var activeTab = tabView.get('activeTab');
	if (activeTab != "Tab LI"){
		if (activeTab) {
			tabView.removeTab(activeTab);
		}
	}
	
}

Tenho esse mesmo problema ao criar abas dinamicas, código para criar abas

unction addTabs(labelText, url, ids) {
	var tabView = new YAHOO.widget.TabView('demo');
	tabView.addTab( new YAHOO.widget.Tab({ label: labelText, content: '<iframe name="formularios" src="' + url + '" frameBorder="0" width="100%" height="800"  scrolling="yes"></iframe>', id: ids, active:true }));
 
}

Obrigada

7 Respostas

windsofhell 17 de nov. de 2011

Eu acho que o problema eh que vc esta criando uma nova instancia do TabView dentro das funcoes de remover e adicionar tabs.

Se vc ver o exemplo disso no site da YUI, vc tera:

<script type="text/javascript"> 
     var tabView = new YAHOO.widget.TabView('demo'); 
</script>

Isso cria um instancia global do TabView.
Depois vc define a funcao que vai remove a tab selecionada:

<script type="text/javascript"> 
    var removeTab = function() { 
        tabView.removeTab(tabView.get('activeTab')); 
    }; 
</script>

Repare que tabView nao esta sendo definido dentro da funcao removeTab.

Entao o seu codigo deveria fazer algo assim:

var tabView = new YAHOO.widget.TabView('demo');  

function removeTab() {
    var activeTab = tabView.get('activeTab');  
    if (activeTab != "Tab LI"){  
        if (activeTab) {  
            tabView.removeTab(activeTab);  
        }  
    }        
}  

function addTabs(labelText, url, ids) {  
    tabView.addTab( new YAHOO.widget.Tab({ 
                   label: labelText, 
                   content: '<iframe name="formularios" src="' + url + '" frameBorder="0" width="100%" height="800"  scrolling="yes"></iframe>', 
                  id: ids, 
                  active:true
    }));    
}

//Daniel

camila.java 17 de nov. de 2011

Daniel,

Eu removo a tab atraves de um link

<a href='#' onClick="removeTab()" >Fechar aba Ativa</a>

Não sei muito de Html e javascript, mais como eu iria relacionar o evento removeTab ao link, já que no exemplo tenho uma variavel removeTab e não uma função?

windsofhell 17 de nov. de 2011

Fiz um exemplo completo para vc, copia em uma pagina e roda no seu browser.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Removing Tabs</title>

<style type="text/css">
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/tabview/tabview-min.js"></script>

<!--begin custom header content for this example-->
<style type="text/css">
.yui-navset button {
    position:absolute;
    top:0;
    right:0;
}
</style>
</head>
<body class="yui-skin-sam">
<div id="demo" class="yui-navset">
    <ul class="yui-nav">
        <li><a href="#tab1"><em>Tab One Label</em></a></li>
        <li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>            
    <div class="yui-content">
        <div id="tab1"><p>Tab One Content</p></div>
        <div id="tab2"><p>Tab Two Content</p></div>
        <div id="tab3"><p>Tab Three Content</p></div>
    </div>
</div>
<a href="#" id="removeTab" onclick="javascript:MYWEBAPP.tabManager.removeTab();"/>Delete</a>

<script>
var MYWEBAPP = MYWEBAPP || {};
MYWEBAPP.tabManager = (function() {

	var tabView;

	return {	
	
		initTabs: function() {
			tabView = new YAHOO.widget.TabView('demo');  	
		},
	
		removeTab: function() {
		   var activeTab = tabView.get('activeTab');
			if (activeTab) {
				tabView.removeTab(activeTab);
			}
		}
	};
}());
MYWEBAPP.tabManager.initTabs();
</script>
</body>
</html>

PS: modifiquei um pouco o javascript, implementando Namespace pattern e defini a tabView private e criei uma funcao initTabs para inicializar a tab widget.

PS2: Se vc nao quiser adicionar o codigo para executar removeTab no HTML, vc colocar fazer algo do tipo, no final do seu script:

var removelink = document.getElementById("removeTab");
if(removelink) {
	removelink.onclick = function() { 
		MYWEBAPP.tabManager.removeTab(); 
	}
}

Da um toque se funcionou. E coloca “RESOLVIDO” na frente do topico.

//Daniel

camila.java 17 de nov. de 2011

Testei o código aqui e funcionou, porém como estou criando as abas dinamicas ele não consegue obter a aba selecionada corretamente.

camila.java 17 de nov. de 2011

É possivel descobrir se o objeto TabView existe? Tem alguma função tipo get para obte-la?

acho que assim resolveria meu problema

windsofhell 17 de nov. de 2011

Ola,

eu fiz um rapido teste aqui e esta funcionando obter a tab selecionada, eu criei uma funcao para adicionar tabs, ai eu fiz:

MYWEBAPP.tabManager.addTabs("GUJ","http://www.guj.com.br","gujFrame");
MYWEBAPP.tabManager.addTabs("GUJ2","http://www.guj.com.br","gujFrame2");

Eu consigo selecionar e deletar a tab sem problemas.

Para saber se a tabview esta inicializada nao eh tao dificil, nesse codigo que eu fiz, vc tem a property “tabView” que eh a instancia de TabView. Eh soh testar essa propriedade:

if(tabView) {
   // faz alguma coisa.
}

Voce tem poderia criar mais uma funcao publica que retorna se a tabview esta inicializada:

isTabViewInitialized: function() {
     return ( tabView ? true : false);
}

Ai vc consegue usar fora da “classe”

if(!MYWEBAPP.tabManager.isTabViewInitialized()) {
     MYWEBAPP.tabManager.initTabs();
}

//Daniel

camila.java 17 de nov. de 2011

Vlw Daniel brigada, salvou o dia!

Criado 17 de novembro de 2011

Ultima resposta 17 de nov. de 2011

Respostas 7

Participantes 2

7 Respostas

Topicos relacionados