2012-01-09 12 views
2

jQueryとjQueryUIを使用して構築されたサイトがあります。すべてのダイアログは、表示と非表示に同じエフェクトを使用しています。しかし、私はjqGridのeditGridRowメソッドとviewGridRowメソッドによって作成されたダイアログに効果を設定できません。 jqGridで作成されたダイアログに表示/非表示の効果を追加するものがあるかどうかは疑問です。 jqGridに対処する彼のトリックのため jQueryUIエフェクトとjqGrid

----更新

おかげオレグ。私は正常にダイアログの表示に一貫した効果を持って私のウェブサイトを変更しました。要するに、ダイアログのインラインスタイルを削除/更新する必要があり、効果の後に作成する必要があります。いくつかのコードがあります:

$(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はを使用します。これは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();} 
    } 
}); 

を使用しています私はあなたが簡単にあなたのサイト上で使用する表示と非表示のため、同様の効果を実現するために、上記の関数のコードを変更することができると思います。

関連する問題