É possível abrir uma caixa de diálogo jQuery UI sem uma barra de título?
254
Eu acho que a melhor solução é usar a opção dialogClass
.
Uma extração dos documentos da interface do usuário do jquery:
durante o init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });
ou se você quiser depois do init. :
$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');
Então, eu criei algum diálogo com a opção dialogClass = 'noTitleStuff' e o css assim:
.noTitleStuff .ui-dialog-titlebar {display:none}
tão simples !! mas levei 1 dia para pensar por que meu método de perfuração id-> anterior não estava funcionando. De fato, quando você chama o .dialog()
método div, você transforma-se filho de outro div (o verdadeiro diálogo div) e, possivelmente, um 'irmão' do titlebar
div, por isso é muito difícil tentar encontrar o último a partir do primeiro.
Eu descobri uma correção para remover dinamicamente a barra de título.
Isso removerá todos os elementos com a classe 'ui-dialog-titlebar' após a renderização da caixa de diálogo.
fonte
#example .ui-dialog-titlebar...
. Funcionará de qualquer maneira; mas o Javascript definirá o CSS eventualmente, então não vejo o benefício de não fazê-lo no CSS, para começar. Ele realmente não faz muita diferença - o que você está mais confortável com :)Eu acredito que você pode ocultá-lo com CSS:
Como alternativa, você pode aplicar isso a diálogos específicos com a
dialogClass
opção:Confira " Theming " na caixa de diálogo. A sugestão acima utiliza a
dialogClass
opção, que parece estar saindo em favor de um novo método.fonte
Eu uso isso em meus projetos
fonte
$(document).ready(function() { $('#video').click(function(){ $( "#dialog" ).dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header'); }); });
$("#myDialog").dialog('open').siblings('.ui-dialog-titlebar').remove();
é a melhor resposta na minha opinião +1 para esta linha de código$("#myDialog").prev().hide()
ou$("#myDialog").prev(".ui-dialog-titlebar").hide()
.Isso funcionou para mim:
fonte
Tente usar
Isso ocultará todos os títulos das caixas de diálogo
fonte
Na verdade, existe ainda outra maneira de fazer isso, usando o diálogo
widget
diretamente:Você pode obter o Dialog Widget assim
e então faça
para ocultar
titlebar
apenas dentro desse diálogoe em uma única linha de código (eu gosto de encadeamento):
Não é necessário adicionar uma classe extra à caixa de diálogo dessa maneira, basta ir diretamente a ela. Workss bem para mim.
fonte
Acho mais eficiente e mais legível usar o evento open e ocultar a barra de título a partir daí. Não gosto de usar pesquisas de nome de classe de página global.
Simples.
fonte
Você pode usar o jquery para ocultar a barra de título após usar o dialogClass ao inicializar o diálogo.
durante o init:
Usando esse método, você não precisa alterar seu arquivo css, e isso também é dinâmico.
fonte
Eu gosto de substituir os widgets jQuery.
Agora você pode configurar se deseja mostrar a barra de título ou não
fonte
Se você tiver várias caixas de diálogo, poderá usar o seguinte:
fonte
Essa é a maneira mais fácil de fazer isso e ela removerá apenas a barra de título nessa caixa de diálogo específica;
fonte
A única coisa que descobri ao ocultar a barra de título do Dialog é que, mesmo que a exibição seja nenhuma, os leitores de tela ainda a capturam e a leem. Se você já adicionou sua própria barra de título, ela lerá ambas, causando confusão.
O que fiz foi removido do DOM usando
$(selector).remove()
. Agora, os leitores de tela (e todos os outros) não o verão porque não existe mais.fonte
Tente isto
substituir
divid
por correspondenteid
fonte
Este próximo formulário me corrigiu o problema.
fonte
Eu acho que a maneira mais limpa de fazer isso seria criar um novo widget myDialog, consistindo no widget de diálogo menos o código de barras do título. A exclusão do código de barras do título parece direta.
https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js
fonte
Isso funcionou para eu ocultar a barra de título da caixa de diálogo:
fonte
É assim que isso pode ser feito.
Vá para a pasta de temas -> base -> abra jquery.ui.dialog.css
Encontrar
Seguimentos
se você não quiser exibir titleBar, simplesmente defina display: none como eu fiz a seguir.
Da mesma forma para o título também.
Agora vem o botão Fechar, você também pode definir nenhum ou definir seu
Fiz muita pesquisa, mas nada depois tive essa ideia em mente. No entanto, isso afetará todo o aplicativo para não ter botão de fechar, barra de título para a caixa de diálogo, mas você também pode superar isso usando jquery e adicionando e configurando css via jquery
aqui está a sintaxe para isso
fonte
.dialogs()
e apenas 1 ou mais dessas configurações, existem rotas alternativas do que aplicar globalmente as configurações dessa maneira.Para mim, eu ainda queria usar os cantos redimensionáveis, só não queria ver as linhas diagonais. eu usei
Acabei de perceber que estava comentando a pergunta errada. Fazendo jus ao meu xará :(
fonte
Você já tentou a solução dos documentos da jQuery UI? https://api.jqueryui.com/dialog/#method-open
Como se costuma dizer, você pode fazer assim ...
Em CSS:
Em JS:
fonte
Você pode remover a barra com o ícone fechar com as técnicas descritas acima e, em seguida, adicionar um ícone fechar.
CSS:
HTML:
// anexa esta div à div que contém seu conteúdo
JS:
fonte
vá para o seu jquery-ui.js (no meu caso, jquery-ui-1.10.3.custom.js) e procure por this._createTitlebar (); e comente.
agora qualquer um dos seus diálogos aparecerá com cabeçalhos. Se você deseja personalizar o cabeçalho, vá para _createTitlebar (); e edite o código dentro.
de
fonte