jQuery UI Dialog - ne peut pas voir le closetext

Question

Je suis en train de faire un simple dialogue - pas de titre que le mot « Fermer » et le X dans le coin en haut à droite. Mon texte, etc. va ensuite passer dessous.

Cependant, je bidouille avec elle je ne peux jamais obtenir l'attribut closeText à afficher - je peux le voir dans FireBug mais il n'apparaît pas, ou quelques caractères apparaissent sous le graphique X.

Answer 1

Il semble que vous n'avez pas inclus les fichiers nécessaires jQuery UI CSS, ou il y a des chemins mal réglés. Jetez un oeil à un exemple de travail en utilisant firebug et vérifiez pour vous assurer que tous les fichiers requis sont téléchargés correctement et que vos chemins sont corrects.

Answer 2

En fait, le problème est le CSS de l'interface utilisateur jQuery et jQuery Dialog lui-même.

L'interface utilisateur jQuery Dialog effectue les opérations suivantes avec tout ce que vous passez comme closeText.

• il crée un <span></span> qui contient vos closeText
• ensembles les styles ui-icon et ui-icon-closethick 'sur elle

La durée est en fait toujours créé, peu importe si vous passez closeText ou non. Il est utilisé pour afficher l'image -closing-image x.

Vous voyez maintenant dans la valeur par défaut jQuery CSS de l'interface utilisateur, nous trouvons pour ui-icon

... 
text-indent: -99999px; 
width: 16px; 
height: 16px; 
... 

Ainsi jQuery définit le texte, mais le navigateur ne sera jamais le montrer (text-indent: -99999px) et la région trop petite pour tout texte.

Alors ce que je faisais est

//open dialog 
$("#dialog").dialog({ closeText: 'Close me' }); 

//get the automagically created div which represents the dialog 
//then get the span which has `ui-icon-closethick` class set (== contains closeText) 
var closeSpan = $("div[role='dialog'] span.ui-icon-closethick"); 

//prepend a span with closeText to the closing-image 
closeSpan.parent().before(
    '<span style="float:right;margin-right:25px">'+ 
    closeSpan.text()+ 
    '</span>' 
); 

Cocher cette http://jsbin.com/ibibe/ pour un exemple de travail

Answer 3

ce fil est un peu vieux ... trouvé via Google lors de la recherche d'une solution à ce problème.

comme la gigue a expliqué, le problème est dans la façon dont CSS gère jQuery UI l'option closetext.

ce à partir de jQueryUI @ jqueryui.com/demos/dialog/#option-closeText

(closetext) Indique le texte du bouton de fermeture. Notez que le texte est proche visiblement caché lors de l'utilisation d'un thème standard .

Ce que je fait est la suivante:

// added a class to the dialog 
$('.my-selector').dialog({dialogClass:'myclass'}); 

// jQuery UI CSS sets span.ui-icon to 
// .ui-icon {display: block; text-indent:-99999px; overflow: hidden; background-repeat: no-repeat; } 
// and .ui-icon { width: 16px; height:16px; background-image: url(....); } 
// so unset default settings using the added class as selector: 
$('div.myclass span.ui-icon').css({'display': 'inline', 'width': '100%', 'height':'100%', 'text-indent': 0,'overflow': 'visible'}); 

// now get the width of span.ui-icon 
var uiIconSpanWidth = $('div.myclass span.ui-icon').width(); 

// calculate negative 'text-indent' 
var offset = 5; // set offset 
var textIndent = -(uiIconSpanWidth + offset); 
textIndent = textIndent + 'px'; 

// reset css using textIndent as the value for the text-indent property 
// (.. added 'line-height' and set its value to match the 'height' property so that the text is aligned in the middle..): 
$('div.myclass span.ui-icon').css({'display': 'block', 'width': '16px', 'height': '16px', 'text-indent': textIndent, 'line-height': '16px',}); 

a fonctionné pour moi.espérons que cette aide

exemple: http://jsbin.com/iyewa5

Answer 4

Il suffit de le faire (type comme il est, où que vous voulez créer une boîte de dialogue),

$('.my-selector').dialog({closeText: 'Close'}); 
$('span.ui-icon').css({'text-indent': '20px','overflow': 'visible', 'line-height': '16px'}); 
$('.ui-dialog-titlebar-close').css({'text-decoration':'none', 'right':'45px', 'height':'21px', 'width': '20px'}); 
$('.ui-widget').css({'font-size': '12px'}); 

Ici, je modifiant les propriétés CSS de l'API par jQuery .

Answer 5

Il suffit d'utiliser ce CSS pour afficher l'icône près:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 
    position: relative; 
    right: 6px; 
    top: 4px; 
} 

.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { 
    padding: 0px; 
    text-indent: 4px; 
    margin-left: 18px; 
position: relative; 
}