Recently, I am writing a project framework and writing a JQueryMessageBox class to use the dialog() in jquery ui to display the message box. In order to make the method easy to call, an automatic judgment page is added to determine whether ui.js and ui.css are added. The code is as follows:
//If ui.js is not included, reference if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ $(""<script src='/js/jquery-ui-1.8.11.custom.min.js' type='text/javascript' />").appendTo('head'); }} //If css is not loaded, load if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) {{ $('<link href=""/css/jquery-ui-1.8.14.custom.css"" rel=""stylesheet"" type=""text/css"" />').appendTo('head'); //dialog() script }}However, the CSS code will not be loaded immediately, so there will be no style when displaying the dialog (it is OK in IE9, because even if CSS is downloaded after downloading it in IE9, the page elements will be redrawn, while IE8 will not). The solution to this problem can be done using ajax. When the css is loaded, the dialog will be displayed, so that it can be displayed with the style. The code is as follows:
if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) { $.ajax({ url: '/css/jquery-ui-1.8.14.custom.css', success: function(data) { //Create a style element and append it to the head//Replace the path of images in $('<style type="text/css">' + data.replace(/url/(images/g, 'url(/css/images') + '</style>').appendTo('head'); //dialog() script; } }); } else { //dialog() script; }