0

この Fiddle デモを見ると、http://jsfiddle.net/Zj2Vq/1/動作していますが、私が本当に望んでいるのは、私が残したのとまったく同じ位置 (タブ「1」) にスクロールすることです。前回（したがって、黄色/クリックされた行は必ずしも最初の行とは限りません）。代わりに、クリックされた行までスクロールしていますが、アクティブ/クリックされた行を表示する前に、もう少しコンテキストが必要です。

HTML:

<div id="tabsMain">

<!-- The menu line of the three tabs -->
<ul>
    <li id="tab_one">
        <a href="#one">one</a>
    </li>
    <li>
        <a href="#two">two</a>
    </li>
    <li>
        <a href="#three">three</a>
    </li>
</ul>

<!-- Tab "one" -->
<div id='one'>
    <table>
        <tr><td><div data-id='1000' class='edit'>Line 1</div></td></tr>
        <tr><td><div data-id='1001' class='edit'>Line 2</div></td></tr>
        <tr><td><div data-id='1002' class='edit'>Line 3</div></td></tr>
        <tr><td><div data-id='1003' class='edit'>Line 4</div></td></tr>
        <tr><td><div data-id='1004' class='edit'>Line 5</div></td></tr>
        <tr><td><div data-id='1005' class='edit'>Line 6</div></td></tr>
        <tr><td><div data-id='1006' class='edit'>Line 7</div></td></tr>
        <tr><td><div data-id='1007' class='edit'>Line 8</div></td></tr>
        <tr><td><div data-id='1008' class='edit'>Line 9</div></td></tr>
        <tr><td><div data-id='1009' class='edit'>Line 10</div></td></tr>
        <tr><td><div data-id='1120' class='edit'>Line 11</div></td></tr>
        <tr><td><div data-id='1121' class='edit'>Line 12</div></td></tr>
        <tr><td><div data-id='1122' class='edit'>Line 13</div></td></tr>
        <tr><td><div data-id='1123' class='edit'>Line 14</div></td></tr>
        <tr><td><div data-id='2001' class='edit'>Line 15</div></td></tr>
        <tr><td><div data-id='2003' class='edit'>Line 16</div></td></tr>
        <tr><td><div data-id='3000' class='edit'>Line 17</div></td></tr>
        <tr><td><div data-id='3001' class='edit'>Line 18</div></td></tr>
        <tr><td><div data-id='3002' class='edit'>Line 19</div></td></tr>
        <tr><td><div data-id='3003' class='edit'>Line 20</div></td></tr>
        <tr><td><div data-id='3004' class='edit'>Line 21</div></td></tr>
        <tr><td><div data-id='3005' class='edit'>Line 22</div></td></tr>
        <tr><td><div data-id='3006' class='edit'>Line 23</div></td></tr>
        <tr><td><div data-id='3007' class='edit'>Line 24</div></td></tr>
        <tr><td><div data-id='3008' class='edit'>Line 25</div></td></tr>
        <tr><td><div data-id='3009' class='edit'>Line 26</div></td></tr>
        <tr><td><div data-id='4120' class='edit'>Line 27</div></td></tr>
        <tr><td><div data-id='4121' class='edit'>Line 28</div></td></tr>
        <tr><td><div data-id='4122' class='edit'>Line 29</div></td></tr>
        <tr><td><div data-id='4123' class='edit'>Line 30</div></td></tr>
        <tr><td><div data-id='5001' class='edit'>Line 31</div></td></tr>
        <tr><td><div data-id='5003' class='edit'>Line 32</div></td></tr>
    </table>
</div>

<!-- Two -->
<div id='two'>
    Tab two will do some stuff ...
</div>

<!-- Three -->
<div id='three'>
    Tab three will do some other stuff ...
</div>

</div>

jQuery:

$(function () {

$("#tabsMain").tabs({
    // Populate a variable with the current/active tab
    activate: function (event, ui) {
        oldTabIndex = ui.oldTab.index();
    }
});
});


// --------------------------------------------------------------------
// Return to same vertical position when clicking the view tab
// but only if we come from the 2nd tab

$("#tab_one").click(function (event) {
if (oldTabIndex == 1) {
    if ($("#selectedRow").length > 0) {
        $('html, body').animate({
            scrollTop: $("#selectedRow").offset().top
        }, 500);
    }
}
});

// --------------------------------------------------------------------
// Highlight current row and set selection color and ID attribute

var bgcolor;
var yellow = "rgb(255, 255, 0)";

$("table tr").hover(

function () { // hover-in
  bgcolor = $(this).css("background-color");
  if (bgcolor != yellow) {
    $(this).css("background-color", "khaki");
  }
},
function () { // hover-out
  bgcolor = $(this).css("background-color");
  if (bgcolor === yellow) {
    $(this).css("background-color", "yellow");
  } else {
    $(this).css("background-color", "");
  }
});

$("table tr").click(function () {
$("table tr").each(function () {
    $(this).css("background-color", "");
    $(this).removeAttr('id');
});
$(this).css("background-color", "yellow");
$(this).attr('id', 'selectedRow');
});


// --------------------------------------------------------------------
// Clicks on the "edit" class

$(".edit").click(function (e) {

e.preventDefault(); // prevent the window/page to jump to the top

// Change focus to tab "two" (0-based index so this is the 2nd tab)
$("#tabsMain").tabs("option", "active", 1);

// Get the ID we need to edit
var id = $(this).closest('div').data('id');

// some Ajax stuff ...
});

これはとにかく可能ですか？

4

1 に答える 1

0

jquery-cookieプラグインを使用してこれを自分で修正しました。今では、最後に残したときとまったく同じ垂直位置に戻ります。

リスト (タブ 1) の行をクリックすると、位置が Cookie に保存され、タブ 1 をクリックすると、Cookie から古い位置が取得され、下にスクロールされます。

このコードを置き換えました：

$(".edit").click(function (e) {

e.preventDefault(); // prevent the window/page to jump to the top

// Change focus to tab "two" (0-based index so this is the 2nd tab)
$("#tabsMain").tabs("option", "active", 1);

..このコードで（私はクッキー部分を追加しただけです - 何も変更/削除しませんでした）：

$(".edit").click(function (e) {

e.preventDefault(); // prevent the window/page to jump to the top

// Set a cookie named "scrollPos" which lives for 7 days
var scrollPos = $(window).scrollTop();
$.cookie("scrollPos", scrollPos, {
  path: '/',
  expires: 7
});

// Change focus to tab "two" (0-based index so this is the 2nd tab)
$("#tabsMain").tabs("option", "active", 1);

「e.preventDefault()」も削除できることに注意してください-ここでは何の役にも立たないことがわかりました。

そして、これも置き換えました：

$("#tab_one").click(function (event) {
    if (oldTabIndex == 1) {
        if ($("#selectedRow").length > 0) {
            $('html, body').animate({
                scrollTop: $("#selectedRow").offset().top
            }, 500);
        }
    }
});

.. これとともに：

$("#tab_one").click(function (event) {
    if (oldTabIndex == 1) {
        var scrollPos = $.cookie("scrollPos"); // get the "scrollPos" cookie
        $('html, body').animate({
            scrollTop: scrollPos
        }, 500);
    }
});

Fiddle デモに jquery-cookie プラグインを含めることができません (?) :-/

于 2013-08-26T11:10:09.047 に答える