REDIMENCIONAR TOOLTIP E TABS EM JQUERYUI
Boa noite amigos!!
Alguém aqui no forum trabalha com essa biblioteca jQueryUI que poderia me dar uma ajuda? Estou utilizando a função $(document).tooltip(); para substituir a forma antiga como eu usava antes, o problema é que não sei como ajustar o tamanho do tooltip que está muito grande, já procurei alguma propriedade para redimencionar em CSS, mas não encontro nada. Estou com o mesmo problema para ajustar as guias de uma tab usando a função tabs():
Código do Tooltip():
$(document).tooltip();
Código da Tabs():
$(document).ready(function(){
// $([Ô]#tabs[Ô]).tabs();
$( [Ô]#tabs[Ô] ).tabs({
event: [Ô]mouseover[Ô]
}).addClass( [Ô]ui-tabs-vertical ui-helper-clearfix[Ô] );
$( [Ô]#tabs li[Ô] ).removeClass( [Ô]ui-corner-top[Ô] ).addClass( [Ô]ui-corner-left[Ô] );
});
Em que parte posso estar fazendo o ajuste desses dois recursos da biblioteca jQueryUI?
Grata!
Alguém aqui no forum trabalha com essa biblioteca jQueryUI que poderia me dar uma ajuda? Estou utilizando a função $(document).tooltip(); para substituir a forma antiga como eu usava antes, o problema é que não sei como ajustar o tamanho do tooltip que está muito grande, já procurei alguma propriedade para redimencionar em CSS, mas não encontro nada. Estou com o mesmo problema para ajustar as guias de uma tab usando a função tabs():
Código do Tooltip():
$(document).tooltip();
Código da Tabs():
$(document).ready(function(){
// $([Ô]#tabs[Ô]).tabs();
$( [Ô]#tabs[Ô] ).tabs({
event: [Ô]mouseover[Ô]
}).addClass( [Ô]ui-tabs-vertical ui-helper-clearfix[Ô] );
$( [Ô]#tabs li[Ô] ).removeClass( [Ô]ui-corner-top[Ô] ).addClass( [Ô]ui-corner-left[Ô] );
});
Em que parte posso estar fazendo o ajuste desses dois recursos da biblioteca jQueryUI?
Grata!
Você não precisa controlar adição e exclusão de classes manualmente para exibir tooltips, basta usar a propriedade [Ô]title[Ô] de qualquer elemento, veja nesse fiddler fiz um exemplo pra você. Além disso, o conteúdo de cada tooltip pode ser customizado com qualquer coisa, incluindo imagens, links, botões, campos, enfim qualquer HMTL, veja este exemplo
Oi Kerplunk!!!
Eu sempre tenho dificuldades para trabalhar com a biblioteca jQueryUI. Os meus tooltips sempre saem muito grantes e à s vezes acontece de replicar o conteúdo do tÃtulo abaixo do elemento. Fiz um exemplo teste para você ver, no final, abaixo da tabela ele replica os valores do tÃtulo das <td> e o tooltip sai muito largo tomando conta de toda a largura da página.
Anexei a imagem da tabela funcionando para você dar uma olhada onde eu estou errando e o meu código abaixo:
HTML:
<!DOCUMENT html>
<html lang=[Ô]pt-BR[Ô]>
<head>
<meta charset=[Ô]UTF-8[Ô] />
<link rel=[Ô]stylesheet[Ô] type=[Ô]text/css[Ô] href=[Ô]css/jquery-ui.theme.css[Ô] media=[Ô]all[Ô] />
<link rel=[Ô]stylesheet[Ô] type=[Ô]text/css[Ô] href=[Ô]css/estilo.css[Ô] media=[Ô]all[Ô] />
<script type=[Ô]text/javascript[Ô] src=[Ô]js/jquery-1.11.3.js[Ô]></script>
<script type=[Ô]text/javascript[Ô] src=[Ô]js/jquery-ui.js[Ô]></script>
<script type=[Ô]text/javascript[Ô] src=[Ô]js/jquery-codigo.js[Ô]></script>
</head>
<body>
<table>
<caption>Tabela Exemplo</caption>
<thead>
<tr><th>Coluna1</th><th>Coluna2</th><th>Coluna3</th></tr>
</thead>
<tbody>
<tr><td title=[Ô]Valor1.1[Ô]>Valor1.1</td><td title=[Ô]Valor2.1[Ô]>Valor2.1</td><td title=[Ô]Valor3.1[Ô]>Valor3.1</td></tr>
<tr><td title=[Ô]Valor1.2[Ô]>Valor1.2</td><td title=[Ô]Valor2.2[Ô]>Valor2.2</td><td title=[Ô]Valor3.2[Ô]>Valor3.2</td></tr>
<tr><td title=[Ô]Valor1.3[Ô]>Valor1.3</td><td title=[Ô]Valor2.3[Ô]>Valor2.3</td><td title=[Ô]Valor3.3[Ô]>Valor3.3</td></tr>
<tr><td title=[Ô]Valor1.4[Ô]>Valor1.4</td><td title=[Ô]Valor2.4[Ô]>Valor2.4</td><td title=[Ô]Valor3.4[Ô]>Valor3.4</td></tr>
<tr><td title=[Ô]Valor1.5[Ô]>Valor1.5</td><td title=[Ô]Valor2.5[Ô]>Valor2.5</td><td title=[Ô]Valor3.5[Ô]>Valor3.5</td></tr>
<tr><td title=[Ô]Valor1.6[Ô]>Valor1.6</td><td title=[Ô]Valor2.6[Ô]>Valor2.6</td><td title=[Ô]Valor3.6[Ô]>Valor3.6</td></tr>
<tr><td title=[Ô]Valor1.7[Ô]>Valor1.7</td><td title=[Ô]Valor2.7[Ô]>Valor2.7</td><td title=[Ô]Valor3.7[Ô]>Valor3.7</td></tr>
<tr><td title=[Ô]Valor1.8[Ô]>Valor1.8</td><td title=[Ô]Valor2.8[Ô]>Valor2.8</td><td title=[Ô]Valor3.8[Ô]>Valor3.8</td></tr>
<tr><td title=[Ô]Valor1.9[Ô]>Valor1.9</td><td title=[Ô]Valor2.9[Ô]>Valor2.9</td><td title=[Ô]Valor3.9[Ô]>Valor3.9</td></tr>
<tr><td title=[Ô]Valor1.10[Ô]>Valor1.10</td><td title=[Ô]Valor2.10[Ô]>Valor2.10</td><td title=[Ô]Valor3.10[Ô]>Valor3.10</td></tr>
</tbody>
<tfoot>
<tr><th>Rodapé</th></tr>
</tfoot>
</table>
</body>
</html>
SCRIPT:
$(document).ready(function(){
$([Ô]td[Ô]).tooltip();
});
CSS:
@charset [Ô]UTF-8[Ô];
table{
/* border: 1px solid black; */
box-shadow: 10px 10px 10px gray;
width: 300px;
}
caption{
border-radius: 4px;
background-color: yellow;
text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006;
color: red;
font-weight: bolder;
}
thead{
background-color: green;
color: white;
}
tbody{
background-color: orange;
color: white;
}
tfoot{
background-color: brown;
color: white;
}
td{
text-align: center;
}
Obrigada!
Eu sempre tenho dificuldades para trabalhar com a biblioteca jQueryUI. Os meus tooltips sempre saem muito grantes e à s vezes acontece de replicar o conteúdo do tÃtulo abaixo do elemento. Fiz um exemplo teste para você ver, no final, abaixo da tabela ele replica os valores do tÃtulo das <td> e o tooltip sai muito largo tomando conta de toda a largura da página.
Anexei a imagem da tabela funcionando para você dar uma olhada onde eu estou errando e o meu código abaixo:
HTML:
<!DOCUMENT html>
<html lang=[Ô]pt-BR[Ô]>
<head>
<meta charset=[Ô]UTF-8[Ô] />
<link rel=[Ô]stylesheet[Ô] type=[Ô]text/css[Ô] href=[Ô]css/jquery-ui.theme.css[Ô] media=[Ô]all[Ô] />
<link rel=[Ô]stylesheet[Ô] type=[Ô]text/css[Ô] href=[Ô]css/estilo.css[Ô] media=[Ô]all[Ô] />
<script type=[Ô]text/javascript[Ô] src=[Ô]js/jquery-1.11.3.js[Ô]></script>
<script type=[Ô]text/javascript[Ô] src=[Ô]js/jquery-ui.js[Ô]></script>
<script type=[Ô]text/javascript[Ô] src=[Ô]js/jquery-codigo.js[Ô]></script>
</head>
<body>
<table>
<caption>Tabela Exemplo</caption>
<thead>
<tr><th>Coluna1</th><th>Coluna2</th><th>Coluna3</th></tr>
</thead>
<tbody>
<tr><td title=[Ô]Valor1.1[Ô]>Valor1.1</td><td title=[Ô]Valor2.1[Ô]>Valor2.1</td><td title=[Ô]Valor3.1[Ô]>Valor3.1</td></tr>
<tr><td title=[Ô]Valor1.2[Ô]>Valor1.2</td><td title=[Ô]Valor2.2[Ô]>Valor2.2</td><td title=[Ô]Valor3.2[Ô]>Valor3.2</td></tr>
<tr><td title=[Ô]Valor1.3[Ô]>Valor1.3</td><td title=[Ô]Valor2.3[Ô]>Valor2.3</td><td title=[Ô]Valor3.3[Ô]>Valor3.3</td></tr>
<tr><td title=[Ô]Valor1.4[Ô]>Valor1.4</td><td title=[Ô]Valor2.4[Ô]>Valor2.4</td><td title=[Ô]Valor3.4[Ô]>Valor3.4</td></tr>
<tr><td title=[Ô]Valor1.5[Ô]>Valor1.5</td><td title=[Ô]Valor2.5[Ô]>Valor2.5</td><td title=[Ô]Valor3.5[Ô]>Valor3.5</td></tr>
<tr><td title=[Ô]Valor1.6[Ô]>Valor1.6</td><td title=[Ô]Valor2.6[Ô]>Valor2.6</td><td title=[Ô]Valor3.6[Ô]>Valor3.6</td></tr>
<tr><td title=[Ô]Valor1.7[Ô]>Valor1.7</td><td title=[Ô]Valor2.7[Ô]>Valor2.7</td><td title=[Ô]Valor3.7[Ô]>Valor3.7</td></tr>
<tr><td title=[Ô]Valor1.8[Ô]>Valor1.8</td><td title=[Ô]Valor2.8[Ô]>Valor2.8</td><td title=[Ô]Valor3.8[Ô]>Valor3.8</td></tr>
<tr><td title=[Ô]Valor1.9[Ô]>Valor1.9</td><td title=[Ô]Valor2.9[Ô]>Valor2.9</td><td title=[Ô]Valor3.9[Ô]>Valor3.9</td></tr>
<tr><td title=[Ô]Valor1.10[Ô]>Valor1.10</td><td title=[Ô]Valor2.10[Ô]>Valor2.10</td><td title=[Ô]Valor3.10[Ô]>Valor3.10</td></tr>
</tbody>
<tfoot>
<tr><th>Rodapé</th></tr>
</tfoot>
</table>
</body>
</html>
SCRIPT:
$(document).ready(function(){
$([Ô]td[Ô]).tooltip();
});
CSS:
@charset [Ô]UTF-8[Ô];
table{
/* border: 1px solid black; */
box-shadow: 10px 10px 10px gray;
width: 300px;
}
caption{
border-radius: 4px;
background-color: yellow;
text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006;
color: red;
font-weight: bolder;
}
thead{
background-color: green;
color: white;
}
tbody{
background-color: orange;
color: white;
}
tfoot{
background-color: brown;
color: white;
}
td{
text-align: center;
}
Obrigada!
Se você está usando estilos diferentes aà é outro assunto. Como o caso é que você fez um estilo customizado para sua tabela, os estilos dos tooltips, serão também os mesmos dos elementos [Ô]pai[Ô] que os contém. O ideal seria você aplicar à sua tabela os estilos já padronizados do tema escolhido, contidos na folha de estilos [Ô]JQuery-ui.theme.css[Ô]. Mas para facilitar, pode-se estender o JQuery, criando uma função que faça a formatação da tabela automaticamente. Fiz um exemplo no Fiddle. Ele formata a tabela conforme o estilo o tema do JQueryUI que você esteja usando, mantendo assim uma coerência de estilo na sua página. Se você quiser realmente modificar o estilo da tabela, modifique no CSS do fiddle e atualize na sua aplicação.
Olá Kerplunk!
Eu usei um estilo próprio porque não sabia que era possÃvel também formatar outros elementos que eu criar com o tema escolhido do jQueryUI. Vendo o seu exemplo vi como você fez e ficou muito legal e o meu passou a funcionar. Outra coisa, referente ao tamanho do tooltip que ficava muito largo, quando segui o seu exemplo foi que eu descobri o que fazia ele ficar com a largura desproporcional e não organizado como o seu. Foi o arquivo CSS que eu usei do tema que escolhi. Na pasta vem vários arquivos, então eu usei um que seria o correto, mas quando fazia isso, a largura do tooltip ficava desproporcional e também não era possÃvel usar Ãcones com a propriedade icons do Widget button(), mas apenas a formatação.
Eu coloquei aqui a imagem contendo a relação de arquivos CSS de um tema, quais desses arquivos eu posso descartar e qual é o correto?
Outra dúvida que fiquei ao ver o seu exemplo foi em alguns códigos. Não entendi essa parte:
(function ($) {
$.fn.styleTable = function (options) {
Por que você usou um $ na passagem de parâmetro e o que significa $.fn? Isso é Ajax?
Nessa linha:
$this = $(this);
Seria a mesma coisa de declarar uma variável usando var e dando um nome a ela? var tb = $(this);
No final da função você fechou assim })(jQuery);, isso é sempre usado em qual momento?
Desculpe as perguntas, é porque quero melhorar em jQuery, gosto dessa linguagem tanto quanto o jQueryUI, passo horas olhando a documentação no site, mas preciso pequisar em diversas fontes até entender bem algum conceito.
Obrigada pela paciência!!
Eu usei um estilo próprio porque não sabia que era possÃvel também formatar outros elementos que eu criar com o tema escolhido do jQueryUI. Vendo o seu exemplo vi como você fez e ficou muito legal e o meu passou a funcionar. Outra coisa, referente ao tamanho do tooltip que ficava muito largo, quando segui o seu exemplo foi que eu descobri o que fazia ele ficar com a largura desproporcional e não organizado como o seu. Foi o arquivo CSS que eu usei do tema que escolhi. Na pasta vem vários arquivos, então eu usei um que seria o correto, mas quando fazia isso, a largura do tooltip ficava desproporcional e também não era possÃvel usar Ãcones com a propriedade icons do Widget button(), mas apenas a formatação.
Eu coloquei aqui a imagem contendo a relação de arquivos CSS de um tema, quais desses arquivos eu posso descartar e qual é o correto?
Outra dúvida que fiquei ao ver o seu exemplo foi em alguns códigos. Não entendi essa parte:
(function ($) {
$.fn.styleTable = function (options) {
Por que você usou um $ na passagem de parâmetro e o que significa $.fn? Isso é Ajax?
Nessa linha:
$this = $(this);
Seria a mesma coisa de declarar uma variável usando var e dando um nome a ela? var tb = $(this);
No final da função você fechou assim })(jQuery);, isso é sempre usado em qual momento?
Desculpe as perguntas, é porque quero melhorar em jQuery, gosto dessa linguagem tanto quanto o jQueryUI, passo horas olhando a documentação no site, mas preciso pequisar em diversas fontes até entender bem algum conceito.
Obrigada pela paciência!!
Bem, JQuery não é uma linguagem e sim um framework de funcionalidades escrito em Javascript e como tal é extensÃvel, ou seja, pode agregar novas funções. é o que a função que você viu que termina com [Ô](JQuery)[Ô] é, uma função que estende o Framework, e por isso que posso usá-la da maneira como usei. Se observar, vai ver que no evento de document.load, além de aplicar as tabs e tooltips, também aplico o método [Ô]styleTable[Ô] ao elemento de ID [Ô]tabela1[Ô], representado pela linha:
Essa linha seria o mesmo que dizer:
JQuery, no elemento que tem ID [Ô]tabela1[Ô], aplique a função styleTable.
Onde [Ô]JQuery[Ô], é representado pelo [Ô]dolar[Ô], elemento de ID tabela1, representado por [Ô]#tabela1[Ô] e em seguida o nome do método que é um método que estendi com a function que te causou a dúvida.
A linha [Ô]$this = $(this)[Ô], não seria o mesmo que o que você propõe. $this, é nada menos que um nome de variável, [Ô]$[Ô] é um caractere aceito para nomenclatura de variáveis. Já [Ô]$(this)[Ô] se refere ao elemento corrente no método [Ô]each[Ô] logo acima, que se refere à tabela, passada pelo método que expliquei acima, styleTable.
O fechamento do método de extensão, é simplesmente para adicionar o método ao framework do JQuery e o mesmo estar visÃvel para outros membros(elementos).
$([Ô]#tabela1[Ô]).styleTable();
Essa linha seria o mesmo que dizer:
JQuery, no elemento que tem ID [Ô]tabela1[Ô], aplique a função styleTable.
Onde [Ô]JQuery[Ô], é representado pelo [Ô]dolar[Ô], elemento de ID tabela1, representado por [Ô]#tabela1[Ô] e em seguida o nome do método que é um método que estendi com a function que te causou a dúvida.
A linha [Ô]$this = $(this)[Ô], não seria o mesmo que o que você propõe. $this, é nada menos que um nome de variável, [Ô]$[Ô] é um caractere aceito para nomenclatura de variáveis. Já [Ô]$(this)[Ô] se refere ao elemento corrente no método [Ô]each[Ô] logo acima, que se refere à tabela, passada pelo método que expliquei acima, styleTable.
O fechamento do método de extensão, é simplesmente para adicionar o método ao framework do JQuery e o mesmo estar visÃvel para outros membros(elementos).
Alguns chamam de plugin e outros de Framework, mas prefiro considerar então como você explicou, denominar de Framework.
Vamos ver se eu entendi:
1) O jQuery e jQueryUI são dois tipos distintos de Framework, porém o jQueryUI seria uma extensão da jQuery com a finalidade de facilitar estilos de elementos com um visual mais amigável para usuário e falicitando a vida do desenvolvedor em vez de criar estilos CSS? Como no meu caso, além de usar ele, eu tinha criado um estilo para aplicar na minha tabela sendo que o jQueryUI também fornece esse recurso?
2) Sobre a linha: $this = $(this), você falou que o cifrão seria a representação de uma variável, eu criando a linha var nomevariavel = valor; também não seria uma definição de variável?
3) Em relação a linha $([Ô]table[Ô]).styleTable(); essa função função no seu código ela é nativa do jQuery e não uma que você definiu?
4) Na linha (function ($) { essa parte não entendi qual o significado do cifrão [Ô]dólar[Ô], na passagem de parâmetro.
5) No código abaixo, eu estou estendendo a função já existente do jQuery tooltip() atribuindo um estilo CSS?
(function($){
$.fn.tooltip = function() {
this.css({ background: [ô]yellow[ô] });
};
})(jQuery);
Sobre a relação de arquivos que inclui na imagem, você sabe me dizer qual arquivo CSS eu devo considerar?
Vamos ver se eu entendi:
1) O jQuery e jQueryUI são dois tipos distintos de Framework, porém o jQueryUI seria uma extensão da jQuery com a finalidade de facilitar estilos de elementos com um visual mais amigável para usuário e falicitando a vida do desenvolvedor em vez de criar estilos CSS? Como no meu caso, além de usar ele, eu tinha criado um estilo para aplicar na minha tabela sendo que o jQueryUI também fornece esse recurso?
2) Sobre a linha: $this = $(this), você falou que o cifrão seria a representação de uma variável, eu criando a linha var nomevariavel = valor; também não seria uma definição de variável?
3) Em relação a linha $([Ô]table[Ô]).styleTable(); essa função função no seu código ela é nativa do jQuery e não uma que você definiu?
4) Na linha (function ($) { essa parte não entendi qual o significado do cifrão [Ô]dólar[Ô], na passagem de parâmetro.
5) No código abaixo, eu estou estendendo a função já existente do jQuery tooltip() atribuindo um estilo CSS?
(function($){
$.fn.tooltip = function() {
this.css({ background: [ô]yellow[ô] });
};
})(jQuery);
Sobre a relação de arquivos que inclui na imagem, você sabe me dizer qual arquivo CSS eu devo considerar?
1 - Sim, o JQueryUI é um compilado CSS que fornece praticamente todo e qualquer estilo que for necessário. Além de diversas funcionalidades, como as demonstradas no site.
2 - Sim, $this é o mesmo que XXXthis ou HHHthis. [Ô]$[Ô] é um caractere válido para criação de variáveis, como qualquer outro caractere.
3 - styleTable, é uma function criada e o código dela está presente no exemplo que passei no fiddle. $fn.styleTable = function...... é a função em si.
4 - O dólar é a representação do JQuery, eu o passo como argumento, disponibilizando para o resto da function.
5 - Nem um nem outro, você estaria substituindo a função tooltip pelo código dentro das chaves.
2 - Sim, $this é o mesmo que XXXthis ou HHHthis. [Ô]$[Ô] é um caractere válido para criação de variáveis, como qualquer outro caractere.
3 - styleTable, é uma function criada e o código dela está presente no exemplo que passei no fiddle. $fn.styleTable = function...... é a função em si.
4 - O dólar é a representação do JQuery, eu o passo como argumento, disponibilizando para o resto da function.
5 - Nem um nem outro, você estaria substituindo a função tooltip pelo código dentro das chaves.
Kerpluk? Só tire a minha última dúvida referente a listagem que postei aqui. Dentre os vários arquivos que é baixado no arquivo compactado, qual CSS eu posso considerar?
Desculpe pelas mil perguntas que faço.
Grata!
Desculpe pelas mil perguntas que faço.
Grata!
O ideal é referenciar todos os minificados, que contêm [Ô]min[Ô] no final do nome. Se você baixou o pacote e eles estão ali, tem um motivo. é que se pode fazer uma versão personalizada do JQueryUI e ele pode incluir ou não alguns arquivos. Além do JQueryUI, também é necessário referenciar o JQuery, pois um não funciona sem o outro. E pelas perguntas, sem problemas. Pergunte à vontade.
Obrigada Kerplunk pela ajuda!
Tópico encerrado , respostas não são mais permitidas