2012-01-09 70 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();} 
    } 
}); 

我認爲你可以很容易修改上述功能的代碼來實現用於顯示和您在網站上使用隱藏相同的效果。