Question

我在jQuery UI标签小部件中使用Sticky Headers插件遇到了一些奇怪的行为。我试图将粘性标题附加到选项卡内的包装元素，但标题的位置不正确。它从小部件的顶部开始，当我滚动表格时向下移动？

以下说明了问题。选择选项卡“Two”并滚动表格时，标题会在窗口小部件中垂直移动。

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p><span>test1</span>
 <pre><code>$( "#tabs" ).tabs(); </code></pre>

    </div>
    <div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        <div id='mywrapper' style='height:200px;overflow-y:scroll;'>
        <table class="tablesorter">
            <thead>
                <tr>
                    <th>AlphaNumeric</th>
                    <th class='filter-select'>Numeric</th>
                    <th>Animals</th>
                    <th>Sites</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>abc 123</td>
                    <td>10</td>
                    <td>Koala</td>
                    <td>http://www.google.com</td>
                </tr>
                <tr>
                    <td>abc 1</td>
                    <td>234</td>
                    <td>Ox</td>
                    <td>http://www.yahoo.com</td>
                </tr>
                <tr>
                    <td>abc 9</td>
                    <td>10</td>
                    <td>Girafee</td>
                    <td>http://www.facebook.com</td>
                </tr>
                <tr>
                    <td>zyx 24</td>
                    <td>767</td>
                    <td>Bison</td>
                    <td>http://www.whitehouse.gov/</td>
                </tr>
                <tr>
                    <td>abc 11</td>
                    <td>3</td>
                    <td>Chimp</td>
                    <td>http://www.ucla.edu/</td>
                </tr>
                <tr>
                    <td>abc 2</td>
                    <td>56</td>
                    <td>Elephant</td>
                    <td>http://www.wikipedia.org/</td>
                </tr>
                <tr>
                    <td>abc 9</td>
                    <td>155</td>
                    <td>Lion</td>
                    <td>http://www.nytimes.com/</td>
                </tr>
                <tr>
                    <td>ABC 10</td>
                    <td>87</td>
                    <td>Zebra</td>
                    <td>http://www.google.com</td>
                </tr>
                <tr>
                    <td>zyx 1</td>
                    <td>999</td>
                    <td>Koala</td>
                    <td>http://www.mit.edu/</td>
                </tr>
                <tr>
                    <td>zyx 12</td>
                    <td>0</td>
                    <td>Llama</td>
                    <td>http://www.nasa.gov/</td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>
    <div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span>test3</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
$("#tabs").tabs({
    activate: function (event, ui) {
        var $t = ui.newPanel.find('table');
        if ($t.length) {
            if ($t[0].config) {
                $t.trigger('applyWidgets');
            } else {
                $t.tablesorter({
                    theme: 'blue',
                    widgets: ["zebra", "filter", "stickyheaders"],
                    widgetOptions: {
                        stickyHeaders_attachTo: "#mywrapper"
                    }
                });
            }
        }
    }
});

任何帮助都将不胜感激。

Answer 1

看起来问题是#mywrapper元素缺少position:relative;定义。粘性标头正在使用position:absolute，因此它最终会根据#tabs元素计算其位置，position:relative元素是唯一分配了<div id='mywrapper' style='height:200px;overflow-y:scroll;position:relative;'>的父元素（通过jQuery标签小部件）（updated demo）。

QProcess *process = new QProcess(this);
QString program = QDir::currentPath() + "/PARROT/Console1.exe";
process->start(program);

在jQuery UI选项卡中的tablesorter stickyheaders

1 个答案: