Fatal编程技术网
  • jquery/
  • Jquery 需要集体讨论一些关于高性能溢出检测器的想法吗

Jquery 需要集体讨论一些关于高性能溢出检测器的想法吗

jquery html css internet-explorer

Jquery 需要集体讨论一些关于高性能溢出检测器的想法吗,jquery,html,css,internet-explorer,Jquery,Html,Css,Internet Explorer,问题: 我有一个很大的表，大概有20列，150行。用户可以调整列的大小（想想excel）。每个单元格都有溢出：隐藏集 当文本在任何给定的单元格中溢出时，我想给用户一个提示，说明正在发生这种情况 限制条件： 这必须在IE6上运行良好。也就是说，如果你在IE6上这么做，你就不会想在使用它的时候杀人 前言：我不知道这在IE6中将如何（或是否）执行 可能还有其他方法可以做到这一点，但您可以使用嵌套元素并比较它们的“视线外”属性： <html> <head>

问题: 我有一个很大的表，大概有20列，150行。用户可以调整列的大小（想想excel）。每个单元格都有溢出：隐藏集

  • 当文本在任何给定的单元格中溢出时，我想给用户一个提示，说明正在发生这种情况
限制条件：

  • 这必须在IE6上运行良好。也就是说，如果你在IE6上这么做，你就不会想在使用它的时候杀人
前言：我不知道这在IE6中将如何（或是否）执行

可能还有其他方法可以做到这一点，但您可以使用嵌套元素并比较它们的“视线外”属性：

 <html>
    <head>
        <style type="text/css">
            td { width: 80px; border: 1px solid #000; }
            td div { height: 20px; overflow: hidden; }
            .highlight { background-color: #efe; }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td><div><span>A B C</div></span></td>
                <td><div><span>D E F G H I J</span></div></td>
                <td><div><span>K L M</span></div></td>
            </tr>
            <tr>
                <td><div><span>N O P</span></div></td>
                <td><div><span>Q R S</span></div></td>
                <td><div><span>T U V W X Y Z</span></div></td>
            </tr>
        </table>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready
            (
                function()
                {
                    $("td div").each
                    (
                        function()
                        {
                            var collapsedHeight = $(this).attr("offsetHeight");
                            var actualHeight = $("span", this).attr("offsetHeight");

                            // if the inner span is taller than the div, make the div green
                            if (actualHeight > collapsedHeight)
                                $(this).addClass("highlight");
                        }
                    );
                }
            );
        </script>
    </body>
 </html>


td{宽度：80px；边框：1px实心#000；}
td div{高度：20px；溢出：隐藏；}
.突出显示{背景色：#efe；}
A、B、C
D E F G H I J
K L M
不适用
Q R S
T U V W X Y Z
$（文件）。准备好了吗
(
函数（）
{
$（“td部门”）。每个
(
函数（）
{
var collapsedHeight=$（this.attr（“offsetHeight”）；
var actualHeight=$（“span”，this）.attr（“offsetHeight”）；
//如果内部跨距高于div，则将div设置为绿色
如果（实际高度>折叠高度）
$（此）.addClass（“突出显示”）；
}
);
}
);
前言：我不知道这在IE6中将如何（或是否）执行

可能还有其他方法可以做到这一点，但您可以使用嵌套元素并比较它们的“视线外”属性：

 <html>
    <head>
        <style type="text/css">
            td { width: 80px; border: 1px solid #000; }
            td div { height: 20px; overflow: hidden; }
            .highlight { background-color: #efe; }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td><div><span>A B C</div></span></td>
                <td><div><span>D E F G H I J</span></div></td>
                <td><div><span>K L M</span></div></td>
            </tr>
            <tr>
                <td><div><span>N O P</span></div></td>
                <td><div><span>Q R S</span></div></td>
                <td><div><span>T U V W X Y Z</span></div></td>
            </tr>
        </table>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready
            (
                function()
                {
                    $("td div").each
                    (
                        function()
                        {
                            var collapsedHeight = $(this).attr("offsetHeight");
                            var actualHeight = $("span", this).attr("offsetHeight");

                            // if the inner span is taller than the div, make the div green
                            if (actualHeight > collapsedHeight)
                                $(this).addClass("highlight");
                        }
                    );
                }
            );
        </script>
    </body>
 </html>


td{宽度：80px；边框：1px实心#000；}
td div{高度：20px；溢出：隐藏；}
.突出显示{背景色：#efe；}
A、B、C
D E F G H I J
K L M
不适用
Q R S
T U V W X Y Z
$（文件）。准备好了吗
(
函数（）
{
$（“td部门”）。每个
(
函数（）
{
var collapsedHeight=$（this.attr（“offsetHeight”）；
var actualHeight=$（“span”，this）.attr（“offsetHeight”）；
//如果内部跨距高于div，则将div设置为绿色
如果（实际高度>折叠高度）
$（此）.addClass（“突出显示”）；
}
);
}
);
我认为最好的方法是通过（例如）每次用户向单元格输入数据时写入自定义属性来分摊溢出检测

因此，您将使用类似于
Lobstrosity
的方法，但不是最初计算溢出，而是每次单元格的输入更改时计算溢出。这有一个明显的缺点，即不适用于预填充的单元格，在这种情况下，您必须在程序启动时为所有填充的单元格计算它

另一个核心选项是固定单元格维度（换句话说，假设单元格维度在页面生成时已知）并计算服务器端页面生成时的溢出（假设您使用的是服务器端语言）。这很有意思，但很有效。

我认为最好的方法是通过（例如）每次用户向单元格输入数据时写入自定义属性来分摊溢出检测

因此，您将使用类似于
Lobstrosity
的方法，但不是最初计算溢出，而是每次单元格的输入更改时计算溢出。这有一个明显的缺点，即不适用于预填充的单元格，在这种情况下，您必须在程序启动时为所有填充的单元格计算它

另一个核心选项是固定单元格维度（换句话说，假设单元格维度在页面生成时已知）并计算服务器端页面生成时的溢出（假设您使用的是服务器端语言）。这是我最后使用的。它仅适用于IE，但在这种情况下也可以：

将此css规则添加到具有overflow:hidden的容器

text-overflow:ellipsis;
这就是我最后使用的。它仅适用于IE，但在这种情况下也可以：

将此css规则添加到具有overflow:hidden的容器

text-overflow:ellipsis;
IE6。。。真正地我猜有人会在发展它的同时杀死一个人。不杀死你的东西会让你更强大。IE6。。。真正地我猜有人会在发展过程中杀死一个人。不杀死你的东西会让你更强大。