Question

如何覆盖jQuery UI的默认功能，以便每当我为对话框设置新标题时，它会在其前面添加xxx？因此，$("#any_dialog_id").dialog("option", "title", "yyy")会将标题设置为xxxyyy。

$().ready(function(){

    $("#dialog").dialog();

    $(".ui-dialog-title").before("xxx");

    // I add the line //
    $("#any_dialog_id").dialog("option", "title", "yyy"); 

});

但他显示yyyxxx而非xxxyyy

我必须做些什么才能让它发挥作用？

...谢谢

Answer 1

有很多方法可以做到这一点。最简单的方法是每次调用打开对话框时都行$(".ui-dialog-title").before("xxx"); AFTER 。您不能只运行一次并期望它在以后的对话调用中重新运行。

另一种方法是修改jquery代码。但我强烈反对这样做。

如果我真的想系统地应用前缀，我会为我做一个帮助函数或包装器并直接调用它而不是jquery对话框。

以下是您可能会做的一个示例，我也包含了一个jsfiddle链接（http://jsfiddle.net/stdw6j5q/1/）：

HTML：

<div id="idDiv_MyDialog">Hi 1!</div>
<div id="idDiv_MyDialog2">Hi 2!</div>
<div id="idDiv_MyDialog3">Hi 3!</div>
<div id="idDiv_MyDialog4">Hi 4!</div>

JAVASCRIPT：

jDialog = function(options) {
  // THE WRAPPER TAKES TWO EXTRA OPTIONS TO IDENTIFY THE DIALOG AND THE TITLE PREFIX TO USE
  // I SET A DEFAULT SELECTOR IF NOTHING IS PASSED IN
  var _dialog = options && options.dialog ? options.dialog : '#idDiv_MyDialog'; 
  // HERE YOU CAN SET A DEFAULT PREFIX
  var _titlePrefix = options && options.titlePrefix ? options.titlePrefix : 'XYZ: '; 
  // UPDATE THE TITLE OPTION
  options.title = _titlePrefix + options.title; 
  // PASS THROUGH ALL YOUR NORMAL OPTIONS TO THE DIALOG
  $(_dialog).dialog(options); 
  // THIS RETURNS A HANDLE/REFERENCE TO THE DIALOG CREATED
  return $(_dialog); 
}

$(function() {

  // CALL YOUR WRAPPER WHEN YOU NEED TO CREATE/MOD THE DIALOG
  $myDialog1 = jDialog({
      title: 'Hey Jude', 
      close: function(event, ui) { $myDialog2.dialog('open'); } 
    });
  $myDialog2 = jDialog({
      dialog: '#idDiv_MyDialog2',  
      title: 'Don\'t let me down', 
      autoOpen: false, 
      close: function(event, ui) { $myDialog3.dialog('open'); }
    });
  $myDialog3 = jDialog({
      dialog: '#idDiv_MyDialog3',  
      title: 'Take a sad song', 
      autoOpen: false, 
      close: function(event, ui) { $myDialog4dialog('open'); } 
    });
  $myDialog4 = jDialog({
      dialog: '#idDiv_MyDialog4',  
      title: 'And make it better', 
      autoOpen: false 
    });
});

Answer 2

只要创建添加标题的对话框，就可以设置要运行的事件。

$(document).on('dialogcreate', function(){ // let it bubble up
   $(".ui-dialog-title", this).before("xxx"); // add "xxx" before the title of this dialog
});

jQuery UI对话框标题任务

2 个答案: