ITPub博客
首页 博客 专栏 学院 社区 技术栈
发博

首页 > 应用开发 > C/C++ > php直播源码，自定义数据添加弹出框

php直播源码，自定义数据添加弹出框

原创 C/C++ 作者：zhibo系统开发 时间：2021-01-15 14:06:52 0 删除 编辑

php直播源码，自定义数据添加弹出框相关的代码


/* 这个点击可以长时间有效 */
$('#myTable tbody').on("click", "i[data-toggle='ykenan']", function () {
/* 得到 datatable 的总行数 */
var recordsTotal = $myTable.DataTable().page.info().recordsTotal;
/* 得到 datatable 的全部数据 */
var fnGetData = $myTable.dataTable().fnGetData();
/* 得到点击时候的 table 表格的第几行 */
    var table_x = $(this).parents("td").parent().parent().find("tr").index($(this).parents("td").parent()[0]);
/* 得到点击时候的 table 表格的第几列 */
    var table_y = $(this).parents("td").index();
/* 得到点击时候的返回数据加载到 datatable 中真正数据的第几行 */
    var index_x = $myTable.DataTable().row($(this).parents("td").parents("tr")).index();
/* 得到点击时候的返回数据加载到 datatable 中真正数据的第几列 */
    var index_y = $myTable.DataTable().column($(this).parents("td")).index();
/* 查看 table 和数据索引的关系, 这个用来解决排序导致 table 中的索引和真实数据中的索引不一样的问题 */
    console.log("table: " + table_x + "," + table_y + ";" + "data: " + index_x + "," + index_y + ";");
    var $_span = $(this).parents("td").children("span");
    /* 判断是否添加条件, 根据实际情况写 */
    if ($_span.length === 1) {
        /* 得到点击需要的 i 标签 */
        var $i = $(this);
        /* 对 $i 添加父标签 */
        $i.wrap("<span></span>");
        /* 设置 $i 父标签的属性 */
        $i.parents("span").attr("style", "position: relative;");
        /* 在 $i 后面添加标签, 一边存放内容 */
        $i.after("<span></span>");
        /* 得到添加 $i 后面的标签来存放内容 */
        var $i1 = $(this).parents("td").children("span").children("span");
        /* 先设置 $i1 的标签的属性以便于得到高度数据 */
        $i1.attr("style", "position: absolute;padding: 5px 20px;width: max-content;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;max-width: 500px;");
        /* 添加内容, 这样才会有高度 */
        // $i1.html($myTable.DataTable().column(index_y).data()[index_x]);
/* 添加需要弹出框的列的数据 */
        if(index_y === 1) {
            $i1.html(fnGetData[index_x].one);
        } else if(index_y === 2) {
            $i1.html(fnGetData[index_x].two);
        } else if(index_y === 3) {
            $i1.html(fnGetData[index_x].three);
        } else if(index_y === 4) {
            $i1.html(fnGetData[index_x].four);
        } else if(index_y === 5) {
            $i1.html(fnGetData[index_x].five);
        } else if(index_y === 6) {
            $i1.html(fnGetData[index_x].six);
        } else if(index_y === 7) {
            $i1.html(fnGetData[index_x].seven);
        }
        /* 得到该页的第几个分页, 索引从 0 开始 */
        var page = $myTable.DataTable().page.info().page;
        /* 得到分页的总页数 */
        var pages = $myTable.DataTable().page.info().pages;
        if(page !== pages - 1) {
            /* 判断高度进行设置从设属性 y = 381 - 30(x), y = 381 - 30(11 - x) */
            if (table_x <= 5) {
                /* 上面向下显示 */
                var height_one = 381 - 25 * table_x;
                /* 自动显示高度 */
                if ($i1.height() <= height_one) {
                    if (index_y < 5) {
                        $i1.attr("style", "position: absolute; top: -8px;left: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;");
                    } else if (index_y >= 5) {
                        $i1.attr("style", "position: absolute; top: -8px;right: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;");
                    }
                } else {
                    if (index_y < 5) {
                        $i1.attr("style", "position: absolute; top: -8px;left: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;height:" + height_one + "px;overflow-y: auto;");
                    } else if (index_y >= 5) {
                        $i1.attr("style", "position: absolute; top: -8px;right: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;height:" + height_one + "px;overflow-y: auto;");
                    }
                }
            } else {
                /* 下面向上显示 */
                var height_two = 381 - 25 * (11 - table_x);
                /* 自动显示高度 */
                if ($i1.height() <= height_two) {
                    if (index_y < 5) {
                        $i1.attr("style", "position: absolute; bottom: -8px;left: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;");
                    } else if (index_y >= 5) {
                        $i1.attr("style", "position: absolute; bottom: -8px;right: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;");
                    }
                } else {
                    if (index_y < 5) {
                        $i1.attr("style", "position: absolute; bottom: -8px;left: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;height:" + height_two + "px;overflow-y: auto;");
                    } else if (index_y >= 5) {
                        $i1.attr("style", "position: absolute; bottom: -8px;right: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;height:" + height_two + "px;overflow-y: auto;");
                    }
                }
            }
        }else {
            if ($i1.height() <= height_one) {
                if (index_y < 5) {
                    $i1.attr("style", "position: absolute; top: -8px;left: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;");
                } else if (index_y >= 5) {
                    $i1.attr("style", "position: absolute; top: -8px;right: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;");
                }
            } else {
                if (index_y < 5) {
                    $i1.attr("style", "position: absolute; top: -8px;left: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;height:112px;overflow-y: auto;");
                } else if (index_y >= 5) {
                    $i1.attr("style", "position: absolute; top: -8px;right: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;height:112px;overflow-y: auto;");
                }
            }
        }
        $i1.hide();
        $i1.show(300);
        $i.toggleClass("fa-plus-square fa-minus-square");
        /* 添加 $1 的点击事件 */
        $i.click(function () {
            $(this).toggleClass("fa-plus-square fa-minus-square");
            if ($(this).hasClass("fa-minus-square")) {
                $i1.show(300);
            } else {
                $i1.hide(250);
            }
        });
    }
});/* 点击结束 */


以上就是 php直播源码，自定义数据添加弹出框相关的代码，更多内容欢迎关注之后的文章

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/69978258/viewspace-2750261/，如需转载，请注明出处，否则将追究法律责任。

0
0
上一篇： 直播app源代码，全局组件开发页面引用
下一篇： 直播短视频源码，js获取日期段的所有日期
请登录后发表评论 登录
全部评论
zhibo系统开发

注册时间：2020-07-02

  • 博文量
    193
  • 访问量
    82104

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备09055130号-4  北京市公安局海淀分局网监中心备案编号：11010802021510

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员