首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQueryUI效应与jqGrid

jQueryUI效应与jqGrid
EN

Stack Overflow用户
提问于 2012-01-09 07:21:52
回答 1查看 1.8K关注 0票数 2

我有一个网站建立使用jQuery和jQueryUI。所有对话框都使用相同的效果来显示和隐藏。但是,我无法在那些由jqGrid的editGridRow和viewGridRow方法创建的对话框上设置效果。我想知道是否有什么可以为jqGrid创建的对话框添加显示/隐藏效果。

-更新

感谢奥列格在处理jqGrid时的技巧。我已经成功地更改了我的网站,以使对话框显示具有一致的效果。简而言之,我需要删除/更新对话框的内联样式,并且应该在效果之后创建tinymce。以下是一些代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(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();
                }
            }
        });
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-01-09 09:24:31

这是个好问题!

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

例如,The demo使用以下代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$.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();}
    }
});

我认为你可以很容易地修改上述函数的代码,以实现与你在网站上使用的显示和隐藏相同的效果。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8785085

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文