2012-01-09 42 views
2

我有一个使用jQuery和jQueryUI构建的网站。所有对话框都使用相同的效果进行显示和隐藏。不过,我无法对由jqGrid的editGridRow和viewGridRow方法创建的那些对话框设置效果。我想知道是否有任何东西给jqGrid创建的对话框添加显示/隐藏效果。jQueryUI效果和jqGrid

----更新

感谢Oleg为他处理jqGrid的技巧。我已成功更改我的网站,以便在对话显示方面产生一致的效果。总之,我需要删除/更新对话框的内联风格,并且应该在效果之后创建tinymce。以下是一些代码:

$(function() { 
     var cssLeft; 
     var cssTop; 

     $.extend($.jgrid, { 
      showModal: function (h) { 
       if (cssLeft) { 
        h.w.css("left", cssLeft).css("top", cssTop); 
       } 
       h.w.show("fold", function() { 
        var htmlEditor = $("#item", h.w); 
        if (htmlEditor) { 
         htmlEditor.tinymce({ 
          script_url: "/Scripts/tinymce.3.4.5/tiny_mce.js", 
          mode: "none", 
          theme: "advanced", 
          plugins: "autolink,lists,layer,advhr,advimage,advlink,emotions,inlinepopups,insertdatetime,media,searchreplace,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras", 
          theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect", 
          theme_advanced_buttons2: "cut,copy,paste,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,|,forecolor,backcolor", 
          theme_advanced_buttons3: "hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,media,advhr,|,fullscreen", 
          theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,blockquote,pagebreak,|,insertfile,insertimage", 
          theme_advanced_toolbar_location: "top", 
          theme_advanced_toolbar_align: "left", 
          theme_advanced_resizing: true, 
          theme_advanced_statusbar: false 
         }); 
        } 
       }); 
      }, 
      closeModal: function (h) { 
       if (!cssLeft) { 
        cssLeft = h.w.css("left"); 
        cssTop = h.w.css("top"); 
       } 
       h.w.css("left", "inherit").css("top", "inherit"); 
       h.w.hide("blind").attr("aria-hidden", "true"); 
       var htmlEditor = $("#item", h.w); 
       if (htmlEditor) { 
        if (htmlEditor.tinymce()) { 
         htmlEditor.tinymce().remove(); 
        } 
       } 
       if (h.o) { 
        h.o.remove(); 
       } 
      } 
     }); 

回答

2

这是一个很好的问题!

内部jqGrid使用jqModal这将作为jqGrid的一部分(作为模块jqModal.js)。要实现动画效果,您可以覆盖$.jgrid.showModal$.jgrid.closeModal方法。

The demo例如使用下面的代码

$.extend($.jgrid, { 
    showModal : function(h) { 
     h.w.show("slow"); 
    }, 
    closeModal : function(h) { 
     h.w.hide("slow").attr("aria-hidden", "true"); 
     if(h.o) {h.o.remove();} 
    } 
}); 

我认为你可以很容易修改上述功能的代码来实现用于显示和您在网站上使用隐藏相同的效果。