当前位置： 文江博客话题详情

jquery Resizeable 在 Firefox 中出现故障

发布于 2024-09-29 07:59:11 字数 8827 浏览 5 评论 0原文

在我的网页中，我有一个表格，我希望它的第一列可以调整大小。它在 IE8 中工作正常，但在 Mozilla 上它在文档的右下角显示调整大小图标。这是代码

$(".resizable").resizable({
            maxHeight: 25,
            maxWidth: 350,
            minHeight: 25,
            minWidth: 150
        });

这是它在 IE8 中的显示方式 alt text

这是它在 Firefox 中的显示方式 alt text

请参阅右下角的调整大小图标

<table cellspacing="0">
    <thead>
        <tr>
            <th class="resizable ui-resizable">Task Number<div class="ui-resizable-handle ui-resizable-e" unselectable="on" style="-moz-user-select: none;"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on" style="-moz-user-select: none;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; -moz-user-select: none;" unselectable="on"></div></th>
            <th>Start Date</th>
            <th>Duration</th>
            <th style="width: 100px;">DeadLine</th>
            <th>Parent TaskID</th>

        </tr>
    </thead>
    <tbody>


             <tr class="1" id="row-0" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                          &nbsp;

                    </div>
                    TaskN

                </td>
                <td style="text-align: center;">
                <input type="text" value="01/12/2010" style="text-align: center;" name="StartDate[0]" id="StartDate_0_" class="DatePicker 11 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="7" name="Duration[0]" id="Duration_0_" class="DurationChange 11">

                </td>
                <td></td>
                <td></td>
             </tr>





             <tr class="2" id="row-1" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                          &nbsp;

                    </div>
                    TaskP

                </td>
                <td style="text-align: center;">
                <input type="text" value="01/11/2010" style="text-align: center;" name="StartDate[1]" id="StartDate_1_" class="DatePicker 12 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="7" name="Duration[1]" id="Duration_1_" class="DurationChange 12">

                </td>
                <td></td>
                <td></td>
             </tr>





             <tr class="3" id="row-2" style="color: blue;">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                            <span lang="on" class="navigator">&nbsp;</span>


                    </div>
                    Task12

                </td>
                <td style="text-align: center;">
                16/12/2010

                </td>
                <td>
                5

                </td>
                <td>18/11/2010</td>
                <td></td>
             </tr>





             <tr class="3.1" id="row-3" style="color: orange;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                            <span lang="on" class="navigator">&nbsp;</span>


                    </div>
                    Task2

                </td>
                <td style="text-align: center;">
                10/12/2010

                </td>
                <td>
                5

                </td>
                <td>19/09/2010</td>
                <td>1</td>
             </tr>





             <tr class="3.1.1" id="row-4" style="color: red;">
                <td width="150">
                    <div style="width: 42px;" class="wrapper">

                            <span lang="on" class="navigator">&nbsp;</span>


                    </div>
                    Task3

                </td>
                <td style="text-align: center;">
                22/12/2010

                </td>
                <td>
                1

                </td>
                <td></td>
                <td>2</td>
             </tr>





             <tr class="3.1.1.1" id="row-5" style="color: red;">
                <td width="150">
                    <div style="width: 56px;" class="wrapper">

                          &nbsp;

                    </div>
                    Task9

                </td>
                <td style="text-align: center;">
                <input type="text" value="30/10/2010" style="text-align: center;" name="StartDate[5]" id="StartDate_5_" class="DatePicker 9 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="34" name="Duration[5]" id="Duration_5_" class="DurationChange 9">

                </td>
                <td></td>
                <td>3</td>
             </tr>





             <tr class="3.1.2" id="row-6" style="color: orange;">
                <td width="150">
                    <div style="width: 42px;" class="wrapper">

                          &nbsp;

                    </div>
                    Task10

                </td>
                <td style="text-align: center;">
                <input type="text" value="30/10/2010" style="text-align: center;" name="StartDate[6]" id="StartDate_6_" class="DatePicker 10 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="12" name="Duration[6]" id="Duration_6_" class="DurationChange 10">

                </td>
                <td>04/10/2010</td>
                <td>2</td>
             </tr>





             <tr class="3.2" id="row-7" style="color: red;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                          &nbsp;

                    </div>
                    task5

                </td>
                <td style="text-align: center;">
                <input type="text" value="25/10/2010" style="text-align: center;" name="StartDate[7]" id="StartDate_7_" class="DatePicker 5 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="3" name="Duration[7]" id="Duration_7_" class="DurationChange 5">

                </td>
                <td></td>
                <td>1</td>
             </tr>





             <tr class="3.3" id="row-8" style="color: orange;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                          &nbsp;

                    </div>
                    001

                </td>
                <td style="text-align: center;">
                <input type="text" value="19/10/2010" style="text-align: center;" name="StartDate[8]" id="StartDate_8_" class="DatePicker 7 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="5" name="Duration[8]" id="Duration_8_" class="DurationChange 7">

                </td>
                <td>23/10/2010</td>
                <td>1</td>
             </tr>





             <tr class="4" id="row-9" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                          &nbsp;

                    </div>
                    Task4

                </td>
                <td style="text-align: center;">
                15/01/2011

                </td>
                <td>
                5

                </td>
                <td></td>
                <td></td>
             </tr>




    </tbody>
    </table>
原文

in my web page i have a table and i want its first column to be resizeable. it works fine in IE8 but on Mozilla it shows resize icon in bottom right corner of the document. this is the code

$(".resizable").resizable({
            maxHeight: 25,
            maxWidth: 350,
            minHeight: 25,
            minWidth: 150
        });

here is how it shows up in IE8 alt text

here is how it shows up in Firefox alt text

plz see the resize icon on bottom right corner

<table cellspacing="0">
    <thead>
        <tr>
            <th class="resizable ui-resizable">Task Number<div class="ui-resizable-handle ui-resizable-e" unselectable="on" style="-moz-user-select: none;"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on" style="-moz-user-select: none;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; -moz-user-select: none;" unselectable="on"></div></th>
            <th>Start Date</th>
            <th>Duration</th>
            <th style="width: 100px;">DeadLine</th>
            <th>Parent TaskID</th>

        </tr>
    </thead>
    <tbody>


             <tr class="1" id="row-0" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                           

                    </div>
                    TaskN

                </td>
                <td style="text-align: center;">
                <input type="text" value="01/12/2010" style="text-align: center;" name="StartDate[0]" id="StartDate_0_" class="DatePicker 11 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="7" name="Duration[0]" id="Duration_0_" class="DurationChange 11">

                </td>
                <td></td>
                <td></td>
             </tr>





             <tr class="2" id="row-1" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                           

                    </div>
                    TaskP

                </td>
                <td style="text-align: center;">
                <input type="text" value="01/11/2010" style="text-align: center;" name="StartDate[1]" id="StartDate_1_" class="DatePicker 12 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="7" name="Duration[1]" id="Duration_1_" class="DurationChange 12">

                </td>
                <td></td>
                <td></td>
             </tr>





             <tr class="3" id="row-2" style="color: blue;">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                            <span lang="on" class="navigator"> </span>


                    </div>
                    Task12

                </td>
                <td style="text-align: center;">
                16/12/2010

                </td>
                <td>
                5

                </td>
                <td>18/11/2010</td>
                <td></td>
             </tr>





             <tr class="3.1" id="row-3" style="color: orange;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                            <span lang="on" class="navigator"> </span>


                    </div>
                    Task2

                </td>
                <td style="text-align: center;">
                10/12/2010

                </td>
                <td>
                5

                </td>
                <td>19/09/2010</td>
                <td>1</td>
             </tr>





             <tr class="3.1.1" id="row-4" style="color: red;">
                <td width="150">
                    <div style="width: 42px;" class="wrapper">

                            <span lang="on" class="navigator"> </span>


                    </div>
                    Task3

                </td>
                <td style="text-align: center;">
                22/12/2010

                </td>
                <td>
                1

                </td>
                <td></td>
                <td>2</td>
             </tr>





             <tr class="3.1.1.1" id="row-5" style="color: red;">
                <td width="150">
                    <div style="width: 56px;" class="wrapper">

                           

                    </div>
                    Task9

                </td>
                <td style="text-align: center;">
                <input type="text" value="30/10/2010" style="text-align: center;" name="StartDate[5]" id="StartDate_5_" class="DatePicker 9 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="34" name="Duration[5]" id="Duration_5_" class="DurationChange 9">

                </td>
                <td></td>
                <td>3</td>
             </tr>





             <tr class="3.1.2" id="row-6" style="color: orange;">
                <td width="150">
                    <div style="width: 42px;" class="wrapper">

                           

                    </div>
                    Task10

                </td>
                <td style="text-align: center;">
                <input type="text" value="30/10/2010" style="text-align: center;" name="StartDate[6]" id="StartDate_6_" class="DatePicker 10 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="12" name="Duration[6]" id="Duration_6_" class="DurationChange 10">

                </td>
                <td>04/10/2010</td>
                <td>2</td>
             </tr>





             <tr class="3.2" id="row-7" style="color: red;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                           

                    </div>
                    task5

                </td>
                <td style="text-align: center;">
                <input type="text" value="25/10/2010" style="text-align: center;" name="StartDate[7]" id="StartDate_7_" class="DatePicker 5 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="3" name="Duration[7]" id="Duration_7_" class="DurationChange 5">

                </td>
                <td></td>
                <td>1</td>
             </tr>





             <tr class="3.3" id="row-8" style="color: orange;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                           

                    </div>
                    001

                </td>
                <td style="text-align: center;">
                <input type="text" value="19/10/2010" style="text-align: center;" name="StartDate[8]" id="StartDate_8_" class="DatePicker 7 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="5" name="Duration[8]" id="Duration_8_" class="DurationChange 7">

                </td>
                <td>23/10/2010</td>
                <td>1</td>
             </tr>





             <tr class="4" id="row-9" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                           

                    </div>
                    Task4

                </td>
                <td style="text-align: center;">
                15/01/2011

                </td>
                <td>
                5

                </td>
                <td></td>
                <td></td>
             </tr>




    </tbody>
    </table>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

书间行客 2024-10-06 07:59:11

我通过将 div 放入 td 并将可调整大小的类分配给 td 而不是 td 本身解决了这个问题。现在在 IE 和 Firefox 中都可以正常工作

i solved this problem by putting the div in td and assigning resizable class to td instead of td itself. its now working fine both in IE and firefox

回复 原文
淡忘如思 2024-10-06 07:59:11

我的猜测是你的表标记是无效的，但是 IE 愿意让你逃脱。 Firefox 对于表格标记更加严格。 如果您向我们展示完整的标记，我们将能够更好地帮助您。 （当然，我很可能是错的。）

更新 您还没有提到您的 DOCTYPE，但根据 W3C 验证器服务。有几个问题，但最相关的是 th 不能包含 div。大多数浏览器在遇到这些东西时会将它们重新定位到表格之外。验证器说它是有效的 HTML4，除了属性上的一些小问题，所以...

编辑 将其设为社区 wiki，因为它还没有答案，我必须继续做其他事情。祝你好运。

My guess is that your table markup is invalid, but in a way that IE is willing to let you get away with. Firefox is more strict about table markup. If you'll show us the full markup, we'll be able to help you better. (And of course, I may well be wrong.)

Update You haven't mentioned your DOCTYPE, but the markup is invalid in HTML5 according to the W3C Validator Service. There are several issues, but the most relevant is that th cannot contain a div. Most browsers will relocate those things outside the table when they run into them. The validator says it's valid HTML4 barring some niggles with attributes, though, so...

Edit Made this a community wiki because it doesn't have an answer (yet) and I have to move on to doing other things. Good luck with it.

回复 原文
多情癖 2024-10-06 07:59:11

穆罕默德的答案有效，在 th 中放置一个 div 并使其可调整大小。

jQuery 团队已知此问题：
http://bugs.jqueryui.com/ticket/8120

他们无法真正修复它，因为这实际上是 Firefox 本身的一个未解决的问题：
https://bugzilla.mozilla.org/show_bug.cgi?id=63895

Muhammed's answer works, put a div inside the th and make that resizable.

This issue is known to the jQuery team:
http://bugs.jqueryui.com/ticket/8120

They can't really fix it because it's actually an open issue in Firefox itself:
https://bugzilla.mozilla.org/show_bug.cgi?id=63895

回复 原文
夜声 2024-10-06 07:59:11

我已经为 Mozilla 调整了大小。

jsfiddle.net/tanawat/FVr5g/

I have fiexd resizable for Mozilla.

jsfiddle.net/tanawat/FVr5g/

回复 原文
~没有更多了~

关于作者

放低过去

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

missyouangeled

文章 0 评论 0

三生一梦

文章 0 评论 0

压抑⊿情绪

文章 0 评论 0

天涯离梦残月幽梦

文章 0 评论 0

指尖微凉心微凉

文章 0 评论 0

☆獨立☆

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文