改造Thickbox使之能接受用户输入

最新推荐文章于 2022-11-17 19:20:11 发布

claylee

最新推荐文章于 2022-11-17 19:20:11 发布

阅读量782

点赞数

CC 4.0 BY-SA版权

文章标签： xmlhttprequest function input idea button textbox

本文链接：https://blog.youkuaiyun.com/claylee/article/details/7457392

本文介绍如何改造ThickBox控件以实现用户输入功能。通过添加输入框和按钮，并定义回调函数，使其能接收用户输入并执行相应操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间用了 ThickBox控件模拟弹出模态的对话框。但是这个控件有点局限性，只能展现，没法接受用户的输入。现在需要在某些流转的节点中间弹出对话框，接收用户的输入——可能是一段文字、或者选择判断。ThickBox见拙了。
改造一下ThickBox吧，应该比自己重写的代价小。虽然可能结构会比较蹩脚，但是很多时候，进度不由人。先实现简单的需求，只要一个对话框，接收用户输入一段文字。
1、约定弹出的窗体的结构：一个TextBox，一个'OK' Button(.b-ok)，一个'Cancel' Button(.b-cnl)。
2、给OK 和 Cancel按钮绑定事件
3、如何处理OK 和 Cancel事件交给具体业务了，你是要接收文本还是要过滤文本或者判断用户输入。

在ThickBox 的TB_SHOW方法里面添加两个参数，用来接收OK和Cancel的回调方法
为了能在窗体关闭的时候也执行Cancel的回调，定义一个全局变量，以便把Cancel回调在需要关闭的时候被调用。

var TB_callbackClose = null; //定义全局变量，接收 callbackClose 方法
function tb_show(caption, url, imageGroup, callbackYes, callbackClose) {//function called when the user clicks on a thickbox link 
  try {
        TB_callbackClose = callbackClose;
        //其他代码

callbackYes: ButtonOK的回调
callbackClose: 由于cancel按钮只有一个功能——关闭窗体，所以这个的回调干脆就叫CallbackClose

在弹出窗体之后，给按钮的click事件绑定回调方法

                $("#TB_ajaxContent").load(url += "&random=" + (new Date().getTime()), function () {//to do a post change this load method
                    tb_position();
                    $("#TB_load").remove();
                    tb_init("#TB_ajaxContent a.thickbox");
                    $("#TB_window").css({ display: "block" });


                    /*以下的两个回调要求弹出的窗体里面有"class"为 .result-yes 或者 .result-no 的input*/
                    $("#TB_window .result-yes").click(callbackYes);
                    $("#TB_window .result-no").click(tb_remove);//这里给buttonCancel绑定的是窗体关闭方法
                });

在窗体关闭的时候，触发 callbackClose

function tb_remove() {
    .
    .
    .
    if (TB_callbackClose != null) // 窗体关闭时执行的回调
        TB_callbackClose();
    return false;
}

至此，改造完成。

使用（这里传入了一个ButtonOK的回调 confInputIdea）：

tb_show('退件原因', 'CaseOpr/BackReason2.aspx?KeepThis=true&width=370&height=330&Recno=' + $("input[id$='hfSJDBH']").val(), '',confInputIdea);

confInputIdea 如下：

confInputIdea = function () {
        var _idea = $("#txtTjyy").val();//这里的#txtTjyy就是弹出窗体当中的用户输入文本框，取到的文本_idea直接参与计算
        $.ajax({
            url: "CaseOpr/realCasehandle.ashx",
            type: "post",
            data: "Recno=" + $("input[id$='hfSJDBH']").val() + "&oprType=sendBack&curWorkId=" + $("input[id$='hfWorkerId']").val() + "&backReason=" + _idea,
            cache: false,
            error: function (XMLHttpRequest, textStatus) {
                alert(XMLHttpRequest.responseText);
            },
            success: function (html) {
                tb_remove();
                if (html != "") {
                    alert(html);
                }
                else
                    window.location.href = "Default.aspx";
            }
        });
    }