jQuery UI 对话框 - 看不到 closeText答案

【问题标题】：jQuery UI Dialog - Cannot see the closeTextjQuery UI 对话框 - 看不到 closeText
【发布时间】：2010-12-19 22:18:20
【问题描述】：

我正在尝试制作一个简单的对话框 - 没有标题，只有“关闭”这个词和右上角的 X。然后我的文字等将放在下面。

但是我摆弄它，我无法显示 closeText 属性 - 我可以在 FireBug 中看到它，但它要么不出现，要么在 X 图形下出现几个字符。

【问题讨论】：

你能发布你的代码吗？您希望“关闭”一词出现在 X 附近的标题栏中吗？如果是这样，我认为这是不可能的。

标签： jquery user-interface dialog

【解决方案1】：

其实问题出在 jQuery UI CSS 和 jQuery Dialog 本身。

jQuery UI 对话框使用您作为closeText 传入的任何内容执行以下操作。

它会创建一个<span></span>，其中包含您的closeText
设置样式ui-icon和ui-icon-closethick'就可以了

无论你是否传入closeText，实际上总是会创建跨度。用于显示x-close-image。

现在查看我们为 ui-icon 找到的默认 jQuery UI CSS

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

因此 jQuery 设置了文本，但浏览器永远不会显示它 (text-indent: -99999px) 并且区域太小，无法显示任何文本。

所以我做的是

//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>'
);

查看此http://jsbin.com/ibibe/ 以获取工作示例

【讨论】：

然后在您评估它是否适合您时考虑接受我的回答

【解决方案2】：

这个帖子有点老了......在搜索这个问题的解决方案时通过谷歌找到。

就像 jitter 解释的那样，问题在于 jQuery UI CSS 如何处理 closeText 选项。

来自 jQueryUI @ jqueryui.com/demos/dialog/#option-closeText

(closeText) 指定关闭按钮的文本。 请注意，关闭文本是使用标准时明显隐藏主题。

我所做的是：

// 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',});

为我工作。希望这会有所帮助

示例：http://jsbin.com/iyewa5

【讨论】：

【解决方案3】：

只需执行此操作（按原样键入，无论您想创建一个对话框），

$('.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'});

这里我通过 jQuery 编辑 API 的 CSS 属性。

【讨论】：

【解决方案4】：

听起来您没有包含必要的 jQuery UI CSS 文件，或者某些路径设置不正确。查看一个使用 firebug 的工作示例并检查以确保所有必需的文件都已正确下载并且您的路径正确。

【讨论】：

谢谢，您能否指出一个工作示例 - 我找不到似乎使用 closeText 属性的教程或网站。
查看 jitter 的例子。他已经得到了你的答案：）

【解决方案5】：

只需使用这个 CSS 来显示关闭图标：

.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;
}

【讨论】：