码迷,mamicode.com
首页 > 其他好文 > 详细

来看看怎么通过a标签打开一个对话框

时间:2015-09-26 22:43:40      阅读:479      评论:0      收藏:0      [点我收藏+]

标签:a标签   对话框   

前言:也许这是一个很简单的动作,你似乎觉得这没什么,的确,在我完成了这个功能后,我觉得也很简单。

技术分享

弹出框后面是一个table,点击单元格中的修改连接,就可以弹出对话框,并且能够将数据传递到页面前端。

页面

<a href="${ctx}/project/editProjectReback/${deal_item.id}" target="dialog" width="600">修改</a>

注意:
1. 参数target
2. width

js封装

//dialogs
    $("a[target=dialog]", $p).each(function(){
        $(this).click(function(event){
            var $this = $(this);
            var title = $this.attr("title") || $this.text();
            var options = {};
            var w = $this.attr("width");
            var h = $this.attr("height");
            if (w) options.width = w;
            if (h) options.height = h;
            options.title = title;
            options.contentType = "ajax";
            options.showButton = eval($this.attr("showButton") || "false");
            options.showCancel = eval($this.attr("showCancel") || "false");
            options.showOk = eval($this.attr("showOk") || "false");
            options.type = "wee";
            options.onopen = eval($this.attr("onopen") ||  function() {});
            options.boxid = "pop_ajax_dialog";

            var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first"));
            YUNM.debug(url);
            if (!url.isFinishedTm()) {
                $.showErr($this.attr("warn") || YUNM.msg("alertSelectMsg"));
                return false;
            }
            $.weeboxs.open(url, options);
            return false;
        });

注意:
1. 此处仍然借用了DWZ的代码,通过将a标签上的参数传递给weebox弹出框。
2. url,用来使weebox内部通过ajax请求发送到服务端。

页面初始化时

让以上代码执行以下就好

weebox内部

else if (self.options.contentType == "ajax") {
                self.ajaxurl = self._content;
                self.setContent(‘<div class="dialog-loading"></div>‘);
                self.show();

                $.ajax({
                    type : "post",
                    url : self.ajaxurl,
                    success : function(data) {
                        self._content = data;
                        self.setContent(self._content);
                        self.onopen();
                        self.focus();
                        if (self.options.position == ‘center‘) {
                            self.setCenterPosition();
                        }
                    },
                    error : YUNM.ajaxError
                })
            } 

注意:这里使用ajax请求获取到服务端数据

jfinal

    @Before(DealsInterceptor.class)
    public void editProjectReback() {

        if (dealItem != null) {
            setAttr("deal_item", dealItem);

            render("add_reback.jsp");
        }
    }

render到对应的页面,并且将参数“deal_item”传递到页面上。

add_reback.jsp

<textarea class="form-control required" rows="3" placeholder="报内容" name="description">${deal_item.description}</textarea>

结语:这串处理对我的整个项目有了很大的启示,接下来,我也将要对我原来的项目做法进行一些修改。

版权声明:本站博客均为qing_gee原创文章,若您需要引用、转载,只需要注明来源及原文链接即可。

来看看怎么通过a标签打开一个对话框

标签:a标签   对话框   

原文地址:http://blog.csdn.net/qing_gee/article/details/48752317

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!