jQuery UI对话框标题中的图标 [英] Icons in jQuery UI dialog title

问题描述

我使用下面的代码创建一个jQuery对话框。默认情况下，在标题栏上有一个关闭图标，但我想在标题栏中添加一些其他图标以及不同的功能。

用于对话框是：

  $（document）。ready（function（）{
 $ ）.dialog（{
 title：Dialog Title，
 height：400，
 width：500 
}）; 
} 
  

我使用以下.css和.js文件：

 < link type =text / csshref =jquery-ui-1.7.3.custom.css =stylesheet/& 
< script type =text / javascriptsrc =jquery-1.3.2.js>< / script> 
< script type =text / javascriptsrc =jquery-ui-1.7.3.custom.min.js>< / script> 
  

解决方案

您可以在 title 选项。因此，使用现有的jQuery UI图标精灵，我们可以使用此Javascript：

---

对于jQuery UI 1.10.0 < h3>

您需要根据 _title 函数。 com / ticket / 6016> Bug＃6016 ，以确保 title 属性不会转义。

  var dialog = $（＃dialog）。dialog 
 
 dialog.data（uiDialog）._ title = function（title）{
 title.html（this.options.title）; 
}; 
 
 dialog.dialog（'option'，'title'，'< span class =ui-icon ui-icon-home>< / span> Example Dialog'）; 
  

对于旧版本

  $（＃dialog）。dialog（{
 title：'< span class =ui-icon ui-icon-home>< / span> Example Dialog'
}）; 
  
 
 
 
 
 
 
 b 
 
  .ui对话框.ui-dialog-title .ui-icon {
 float：left; 
 margin-right：4px; 
} 
  
在对话框的标题中添加图标。您可以在此处查看完整的jQuery UI图标集： http://jqueryui.com/themeroller/  
 
 
 
要查看此工作方式，请参阅： http://jsfiddle.net/XkSu9/ （jQuery UI 1.10+）或 http://www.jsfiddle.net/yijiang/UYMJH/ （旧版本） p> 
I'm using the code below to create a jQuery dialog box. By default there is a close icon on title bar, but I want to add some of the other icons in title bar as well for different functionality.

The code used for the dialog box is: 
$("document").ready(function () {
    $("#dialog").dialog({
        title: "Dialog Title",
        height: 400,
        width: 500
    });
});
I'm using following .css and .js files:
<link type="text/css" href="jquery-ui-1.7.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.3.custom.min.js"></script>

解决方案
You can define HTML in the title option when creating the dialog box. Therefore, using the existing jQuery UI icon sprites, we can use this Javascript: 



For jQuery UI 1.10.0

You need to override the undocumented _title function, according to Bug #6016 to ensure that the title attribute is not escaped. 
var dialog = $("#dialog").dialog();

dialog.data( "uiDialog" )._title = function(title) {
    title.html( this.options.title );
};

dialog.dialog('option', 'title', '<span class="ui-icon ui-icon-home"></span> Example Dialog');


For older versions

$("#dialog").dialog({
    title: '<span class="ui-icon ui-icon-home"></span> Example Dialog'
});




And this CSS
.ui-dialog .ui-dialog-title .ui-icon {
    float: left;
    margin-right: 4px;
}
To add an icon to the title of the dialog. You can see the complete set of jQuery UI icons here: http://jqueryui.com/themeroller/

To see this working, live, see: http://jsfiddle.net/XkSu9/ (jQuery UI 1.10+) or http://www.jsfiddle.net/yijiang/UYMJH/ (old version)

                        
这篇关于jQuery UI对话框标题中的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！