Переключение вкладок jQuery UI теряет положение прокрутки в IE - PullRequest
Новая
       18

Переключение вкладок jQuery UI теряет положение прокрутки в IE

1 голос
/ 28 августа 2010

Проблема не возникает в Firefox, но пользовательская база полностью в IE.

На следующей странице представлен макет из трех вкладок, в которых для высоты задано значение и переполнениеавто.Когда вы прокручиваете до определенной позиции на вкладке One, переключаетесь на любую другую и возвращаетесь, позиция прокрутки теряется в IE (протестировано только с IE 8), но сохраняется в Firefox (3.6.3).

Как бы мы сохранили положение прокрутки во время переключения табуляции? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Testing Tabs and Page Scroll Position</title>
    <style type="text/css">
        .rootContainer {
            height: 600px;
            width: 800px;
            margin: 100px;
        }

        .myTabs {
            padding: 25px;
            min-height: 400px;
            height: 400px;
            overflow: auto;
        }

        #tabOne {
            background-color: #ff9999;
        }

        #tabTwo {
            background-color: #99ff99;
        }

        #tabThree {
            background-color: #9999ff;
        }
    </style>
    <link rel="stylesheet"
          href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/cupertino/jquery-ui.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="rootContainer">
    <div id="tabsContainer">
        <ul>
            <li><a href="#tabOne">Tab One</a></li>
            <li><a href="#tabTwo">Tab Two</a></li>
            <li><a href="#tabThree">Tab Three</a></li>
        </ul>
        <div id="tabOne" class="myTabs">
            Tab One Content
            <div id="tabOneContent">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt lacinia tellus, at lobortis
                magna lacinia eget. Curabitur sed eros mauris, ut malesuada purus? Maecenas porta fringilla mauris, non
                molestie est bibendum ut. Sed bibendum massa vitae tortor blandit eget condimentum nunc cursus.
                Vestibulum gravida orci eget metus suscipit et cursus lacus suscipit. Nunc lacinia ipsum sit amet leo
                iaculis sed viverra nunc sodales? Nam accumsan facilisis neque; vel convallis sem rhoncus auctor. Proin
                vel augue quis metus consectetur tincidunt. Nulla ac tortor neque, porttitor tincidunt purus. Duis eget
                faucibus massa. Sed ut risus eget lorem adipiscing ultricies eu vel erat.
                <br/>
                <br/>
                Aliquam sed nulla vitae justo eleifend cursus. Curabitur imperdiet varius consectetur. Aliquam erat
                volutpat. Aenean congue fermentum turpis, in convallis est pharetra et. Nunc elementum congue erat,
                viverra tempor lectus tincidunt sed. Quisque varius, elit ac scelerisque egestas, justo diam facilisis
                nisl, quis rutrum mi enim sit amet ligula. Aliquam sem leo, interdum vitae sollicitudin faucibus,
                sollicitudin id sem. Aenean venenatis urna at diam mattis laoreet. Quisque consectetur urna sit amet
                lacus volutpat ac volutpat erat congue. Nulla aliquam commodo tortor quis eleifend. Phasellus vitae nisi
                sit amet odio vestibulum tempor ac sit amet tortor. Duis urna augue, vestibulum sed mollis in; bibendum
                eu lectus.
                <br/>
                <br/>
                Vestibulum blandit faucibus tempor. Mauris eget placerat lorem. Nullam ac lacus non nunc rhoncus
                bibendum! Suspendisse ut augue orci? Aenean leo est, adipiscing sed aliquet quis, feugiat sed velit.
                Cras ut quam et dolor cursus mattis ut vel risus. Integer eu hendrerit felis. Mauris tempus purus ut
                nisi tincidunt at lobortis nibh tristique. Fusce eleifend egestas augue nec iaculis. Integer nisi felis,
                facilisis eu iaculis in, tincidunt feugiat purus! Ut et enim id augue porttitor semper ac sit amet arcu.
                Sed sed justo ut lectus accumsan egestas ac vitae sapien. Nunc lacinia condimentum tellus non ultrices.
                Sed congue aliquet neque, vel fermentum augue tincidunt a? In non nulla non magna facilisis pulvinar.
                Aenean at consequat neque! Suspendisse pellentesque eleifend fermentum. Cras nisi mauris, porttitor at
                malesuada vitae; venenatis vel magna.
                <br/>
                <br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt lacinia tellus, at lobortis
                magna lacinia eget. Curabitur sed eros mauris, ut malesuada purus? Maecenas porta fringilla mauris, non
                molestie est bibendum ut. Sed bibendum massa vitae tortor blandit eget condimentum nunc cursus.
                Vestibulum gravida orci eget metus suscipit et cursus lacus suscipit. Nunc lacinia ipsum sit amet leo
                iaculis sed viverra nunc sodales? Nam accumsan facilisis neque; vel convallis sem rhoncus auctor. Proin
                vel augue quis metus consectetur tincidunt. Nulla ac tortor neque, porttitor tincidunt purus. Duis eget
                faucibus massa. Sed ut risus eget lorem adipiscing ultricies eu vel erat.
                <br/>
                <br/>
                Aliquam sed nulla vitae justo eleifend cursus. Curabitur imperdiet varius consectetur. Aliquam erat
                volutpat. Aenean congue fermentum turpis, in convallis est pharetra et. Nunc elementum congue erat,
                viverra tempor lectus tincidunt sed. Quisque varius, elit ac scelerisque egestas, justo diam facilisis
                nisl, quis rutrum mi enim sit amet ligula. Aliquam sem leo, interdum vitae sollicitudin faucibus,
                sollicitudin id sem. Aenean venenatis urna at diam mattis laoreet. Quisque consectetur urna sit amet
                lacus volutpat ac volutpat erat congue. Nulla aliquam commodo tortor quis eleifend. Phasellus vitae nisi
                sit amet odio vestibulum tempor ac sit amet tortor. Duis urna augue, vestibulum sed mollis in; bibendum
                eu lectus.
                <br/>
                <br/>
                Vestibulum blandit faucibus tempor. Mauris eget placerat lorem. Nullam ac lacus non nunc rhoncus
                bibendum! Suspendisse ut augue orci? Aenean leo est, adipiscing sed aliquet quis, feugiat sed velit.
                Cras ut quam et dolor cursus mattis ut vel risus. Integer eu hendrerit felis. Mauris tempus purus ut
                nisi tincidunt at lobortis nibh tristique. Fusce eleifend egestas augue nec iaculis. Integer nisi felis,
                facilisis eu iaculis in, tincidunt feugiat purus! Ut et enim id augue porttitor semper ac sit amet arcu.
                Sed sed justo ut lectus accumsan egestas ac vitae sapien. Nunc lacinia condimentum tellus non ultrices.
                Sed congue aliquet neque, vel fermentum augue tincidunt a? In non nulla non magna facilisis pulvinar.
                Aenean at consequat neque! Suspendisse pellentesque eleifend fermentum. Cras nisi mauris, porttitor at
                malesuada vitae; venenatis vel magna.
                <br/>
                <br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt lacinia tellus, at lobortis
                magna lacinia eget. Curabitur sed eros mauris, ut malesuada purus? Maecenas porta fringilla mauris, non
                molestie est bibendum ut. Sed bibendum massa vitae tortor blandit eget condimentum nunc cursus.
                Vestibulum gravida orci eget metus suscipit et cursus lacus suscipit. Nunc lacinia ipsum sit amet leo
                iaculis sed viverra nunc sodales? Nam accumsan facilisis neque; vel convallis sem rhoncus auctor. Proin
                vel augue quis metus consectetur tincidunt. Nulla ac tortor neque, porttitor tincidunt purus. Duis eget
                faucibus massa. Sed ut risus eget lorem adipiscing ultricies eu vel erat.
                <br/>
                <br/>
                Aliquam sed nulla vitae justo eleifend cursus. Curabitur imperdiet varius consectetur. Aliquam erat
                volutpat. Aenean congue fermentum turpis, in convallis est pharetra et. Nunc elementum congue erat,
                viverra tempor lectus tincidunt sed. Quisque varius, elit ac scelerisque egestas, justo diam facilisis
                nisl, quis rutrum mi enim sit amet ligula. Aliquam sem leo, interdum vitae sollicitudin faucibus,
                sollicitudin id sem. Aenean venenatis urna at diam mattis laoreet. Quisque consectetur urna sit amet
                lacus volutpat ac volutpat erat congue. Nulla aliquam commodo tortor quis eleifend. Phasellus vitae nisi
                sit amet odio vestibulum tempor ac sit amet tortor. Duis urna augue, vestibulum sed mollis in; bibendum
                eu lectus.
                <br/>
                <br/>
                Vestibulum blandit faucibus tempor. Mauris eget placerat lorem. Nullam ac lacus non nunc rhoncus
                bibendum! Suspendisse ut augue orci? Aenean leo est, adipiscing sed aliquet quis, feugiat sed velit.
                Cras ut quam et dolor cursus mattis ut vel risus. Integer eu hendrerit felis. Mauris tempus purus ut
                nisi tincidunt at lobortis nibh tristique. Fusce eleifend egestas augue nec iaculis. Integer nisi felis,
                facilisis eu iaculis in, tincidunt feugiat purus! Ut et enim id augue porttitor semper ac sit amet arcu.
                Sed sed justo ut lectus accumsan egestas ac vitae sapien. Nunc lacinia condimentum tellus non ultrices.
                Sed congue aliquet neque, vel fermentum augue tincidunt a? In non nulla non magna facilisis pulvinar.
                Aenean at consequat neque! Suspendisse pellentesque eleifend fermentum. Cras nisi mauris, porttitor at
                malesuada vitae; venenatis vel magna.
                <br/>
                <br/>
            </div>
        </div>
        <div id="tabTwo" class="myTabs">
            Tab Two Content
        </div>
        <div id="tabThree" class="myTabs">
            Tab Three Content
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#tabsContainer').tabs();
    });
</script>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 28 августа 2010

Наконец, у меня есть обходной путь.Добавлены скрытые элементы ввода, которые отслеживают свойства scrollTop каждой из вкладок на $('tab').scroll(function() { ... }); Затем в событии show .tabs() с помощью плагина .scrollTo() вручную прокрутите вкладку до того места, где она была.Фу! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Testing Tabs and Page Scroll Position</title>
    <style type="text/css">
        .rootContainer {
            height: 600px;
            width: 800px;
            margin: 50px;
        }

        .myTabs {
            padding: 25px;
            min-height: 400px;
            height: 400px;
            overflow: auto;
        }

        #tabOne {
            background-color: #ff9999;
        }

        #tabTwo {
            background-color: #99ff99;
        }

        #tabThree {
            background-color: #9999ff;
        }
    </style>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/cupertino/jquery-ui.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

    <script type="text/javascript">
        /**
         * jQuery.ScrollTo - Easy element scrolling using jQuery.
         * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
         * Dual licensed under MIT and GPL.
         * Date: 5/25/2009
         * @author Ariel Flesler
         * @version 1.4.2
         *
         * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
         */
        ;
        (function(d) {
            var k = d.scrollTo = function(a, i, e) {
                d(window).scrollTo(a, i, e)
            };
            k.defaults = { axis: 'xy', duration: parseFloat(d.fn.jQuery) >= 1.3 ? 0 : 1 };
            k.window = function(a) {
                return d(window)._scrollable()
            };
            d.fn._scrollable = function() {
                return this.map(function() {
                    var a = this, i = !a.nodeName || d.inArray(a.nodeName.toLowerCase(), ['iframe', '#document', 'html', 'body']) != -1;
                    if (!i) return a;
                    var e = (a.contentWindow || a).document || a.ownerDocument || a;
                    return d.browser.safari || e.compatMode == 'BackCompat' ? e.body : e.documentElement
                })
            };
            d.fn.scrollTo = function(n, j, b) {
                if (typeof j == 'object') {
                    b = j;
                    j = 0
                }
                if (typeof b == 'function') b = { onAfter: b };
                if (n == 'max') n = 9e9;
                b = d.extend({}, k.defaults, b);
                j = j || b.speed || b.duration;
                b.queue = b.queue && b.axis.length > 1;
                if (b.queue) j /= 2;
                b.offset = p(b.offset);
                b.over = p(b.over);
                return this._scrollable().each(function() {
                    var q = this, r = d(q), f = n, s, g = {}, u = r.is('html,body');
                    switch (typeof f) {
                        case 'number': case 'string': if (/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)) {
                        f = p(f);
                        break
                    } f = d(f, this); case 'object': if (f.is || f.style) s = (f = d(f)).offset()
                    }
                    d.each(b.axis.split(''), function(a, i) {
                        var e = i == 'x' ? 'Left' : 'Top', h = e.toLowerCase(), c = 'scroll' + e, l = q[c], m = k.max(q, i);
                        if (s) {
                            g[c] = s[h] + (u ? 0 : l - r.offset()[h]);
                            if (b.margin) {
                                g[c] -= parseInt(f.css('margin' + e)) || 0;
                                g[c] -= parseInt(f.css('border' + e + 'Width')) || 0
                            }
                            g[c] += b.offset[h] || 0;
                            if (b.over[h]) g[c] += f[i == 'x' ? 'width' : 'height']() * b.over[h]
                        } else {
                            var o = f[h];
                            g[c] = o.slice && o.slice(-1) == '%' ? parseFloat(o) / 100 * m : o
                        }
                        if (/^\d+$/.test(g[c])) g[c] = g[c] <= 0 ? 0 : Math.min(g[c], m);
                        if (!a && b.queue) {
                            if (l != g[c]) t(b.onAfterFirst);
                            delete g[c]
                        }
                    });
                    t(b.onAfter);
                    function t(a) {
                        r.animate(g, j, b.easing, a && function() {
                            a.call(this, n, b)
                        })
                    }
                }).end()
            };
            k.max = function(a, i) {
                var e = i == 'x' ? 'Width' : 'Height', h = 'scroll' + e;
                if (!d(a).is('html,body')) return a[h] - d(a)[e.toLowerCase()]();
                var c = 'client' + e, l = a.ownerDocument.documentElement, m = a.ownerDocument.body;
                return Math.max(l[h], m[h]) - Math.min(l[c], m[c])
            };
            function p(a) {
                return typeof a == 'object' ? a : { top: a, left: a }
            }
        })(jQuery);
    </script>

</head>
<body>
<div class="rootContainer">
    <div id="tabsContainer">
        <ul>
            <li><a href="#tabOne">Tab One</a></li>
            <li><a href="#tabTwo">Tab Two</a></li>
            <li><a href="#tabThree">Tab Three</a></li>
        </ul>
        <div id="tabOne" class="myTabs">
            Tab One Content
            <div id="tabOneContent">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt lacinia
                tellus, at lobortis magna lacinia eget. Curabitur sed eros mauris, ut malesuada
                purus? Maecenas porta fringilla mauris, non molestie est bibendum ut. Sed bibendum
                massa vitae tortor blandit eget condimentum nunc cursus. Vestibulum gravida orci
                eget metus suscipit et cursus lacus suscipit. Nunc lacinia ipsum sit amet leo iaculis
                sed viverra nunc sodales? Nam accumsan facilisis neque; vel convallis sem rhoncus
                auctor. Proin vel augue quis metus consectetur tincidunt. Nulla ac tortor neque,
                porttitor tincidunt purus. Duis eget faucibus massa. Sed ut risus eget lorem adipiscing
                ultricies eu vel erat.
                <br/>
                <br/>
                Aliquam sed nulla vitae justo eleifend cursus. Curabitur imperdiet varius consectetur.
                Aliquam erat volutpat. Aenean congue fermentum turpis, in convallis est pharetra
                et. Nunc elementum congue erat, viverra tempor lectus tincidunt sed. Quisque varius,
                elit ac scelerisque egestas, justo diam facilisis nisl, quis rutrum mi enim sit
                amet ligula. Aliquam sem leo, interdum vitae sollicitudin faucibus, sollicitudin
                id sem. Aenean venenatis urna at diam mattis laoreet. Quisque consectetur urna sit
                amet lacus volutpat ac volutpat erat congue. Nulla aliquam commodo tortor quis eleifend.
                Phasellus vitae nisi sit amet odio vestibulum tempor ac sit amet tortor. Duis urna
                augue, vestibulum sed mollis in; bibendum eu lectus.
                <br/>
                <br/>
                Vestibulum blandit faucibus tempor. Mauris eget placerat lorem. Nullam ac lacus
                non nunc rhoncus bibendum! Suspendisse ut augue orci? Aenean leo est, adipiscing
                sed aliquet quis, feugiat sed velit. Cras ut quam et dolor cursus mattis ut vel
                risus. Integer eu hendrerit felis. Mauris tempus purus ut nisi tincidunt at lobortis
                nibh tristique. Fusce eleifend egestas augue nec iaculis. Integer nisi felis, facilisis
                eu iaculis in, tincidunt feugiat purus! Ut et enim id augue porttitor semper ac
                sit amet arcu. Sed sed justo ut lectus accumsan egestas ac vitae sapien. Nunc lacinia
                condimentum tellus non ultrices. Sed congue aliquet neque, vel fermentum augue tincidunt
                a? In non nulla non magna facilisis pulvinar. Aenean at consequat neque! Suspendisse
                pellentesque eleifend fermentum. Cras nisi mauris, porttitor at malesuada vitae;
                venenatis vel magna.
                <br/>
                <br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt lacinia
                tellus, at lobortis magna lacinia eget. Curabitur sed eros mauris, ut malesuada
                purus? Maecenas porta fringilla mauris, non molestie est bibendum ut. Sed bibendum
                massa vitae tortor blandit eget condimentum nunc cursus. Vestibulum gravida orci
                eget metus suscipit et cursus lacus suscipit. Nunc lacinia ipsum sit amet leo iaculis
                sed viverra nunc sodales? Nam accumsan facilisis neque; vel convallis sem rhoncus
                auctor. Proin vel augue quis metus consectetur tincidunt. Nulla ac tortor neque,
                porttitor tincidunt purus. Duis eget faucibus massa. Sed ut risus eget lorem adipiscing
                ultricies eu vel erat.
                <br/>
                <br/>
                Aliquam sed nulla vitae justo eleifend cursus. Curabitur imperdiet varius consectetur.
                Aliquam erat volutpat. Aenean congue fermentum turpis, in convallis est pharetra
                et. Nunc elementum congue erat, viverra tempor lectus tincidunt sed. Quisque varius,
                elit ac scelerisque egestas, justo diam facilisis nisl, quis rutrum mi enim sit
                amet ligula. Aliquam sem leo, interdum vitae sollicitudin faucibus, sollicitudin
                id sem. Aenean venenatis urna at diam mattis laoreet. Quisque consectetur urna sit
                amet lacus volutpat ac volutpat erat congue. Nulla aliquam commodo tortor quis eleifend.
                Phasellus vitae nisi sit amet odio vestibulum tempor ac sit amet tortor. Duis urna
                augue, vestibulum sed mollis in; bibendum eu lectus.
                <br/>
                <br/>
                Vestibulum blandit faucibus tempor. Mauris eget placerat lorem. Nullam ac lacus
                non nunc rhoncus bibendum! Suspendisse ut augue orci? Aenean leo est, adipiscing
                sed aliquet quis, feugiat sed velit. Cras ut quam et dolor cursus mattis ut vel
                risus. Integer eu hendrerit felis. Mauris tempus purus ut nisi tincidunt at lobortis
                nibh tristique. Fusce eleifend egestas augue nec iaculis. Integer nisi felis, facilisis
                eu iaculis in, tincidunt feugiat purus! Ut et enim id augue porttitor semper ac
                sit amet arcu. Sed sed justo ut lectus accumsan egestas ac vitae sapien. Nunc lacinia
                condimentum tellus non ultrices. Sed congue aliquet neque, vel fermentum augue tincidunt
                a? In non nulla non magna facilisis pulvinar. Aenean at consequat neque! Suspendisse
                pellentesque eleifend fermentum. Cras nisi mauris, porttitor at malesuada vitae;
                venenatis vel magna.
                <br/>
                <br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt lacinia
                tellus, at lobortis magna lacinia eget. Curabitur sed eros mauris, ut malesuada
                purus? Maecenas porta fringilla mauris, non molestie est bibendum ut. Sed bibendum
                massa vitae tortor blandit eget condimentum nunc cursus. Vestibulum gravida orci
                eget metus suscipit et cursus lacus suscipit. Nunc lacinia ipsum sit amet leo iaculis
                sed viverra nunc sodales? Nam accumsan facilisis neque; vel convallis sem rhoncus
                auctor. Proin vel augue quis metus consectetur tincidunt. Nulla ac tortor neque,
                porttitor tincidunt purus. Duis eget faucibus massa. Sed ut risus eget lorem adipiscing
                ultricies eu vel erat.
                <br/>
                <br/>
                Aliquam sed nulla vitae justo eleifend cursus. Curabitur imperdiet varius consectetur.
                Aliquam erat volutpat. Aenean congue fermentum turpis, in convallis est pharetra
                et. Nunc elementum congue erat, viverra tempor lectus tincidunt sed. Quisque varius,
                elit ac scelerisque egestas, justo diam facilisis nisl, quis rutrum mi enim sit
                amet ligula. Aliquam sem leo, interdum vitae sollicitudin faucibus, sollicitudin
                id sem. Aenean venenatis urna at diam mattis laoreet. Quisque consectetur urna sit
                amet lacus volutpat ac volutpat erat congue. Nulla aliquam commodo tortor quis eleifend.
                Phasellus vitae nisi sit amet odio vestibulum tempor ac sit amet tortor. Duis urna
                augue, vestibulum sed mollis in; bibendum eu lectus.
                <br/>
                <br/>
                Vestibulum blandit faucibus tempor. Mauris eget placerat lorem. Nullam ac lacus
                non nunc rhoncus bibendum! Suspendisse ut augue orci? Aenean leo est, adipiscing
                sed aliquet quis, feugiat sed velit. Cras ut quam et dolor cursus mattis ut vel
                risus. Integer eu hendrerit felis. Mauris tempus purus ut nisi tincidunt at lobortis
                nibh tristique. Fusce eleifend egestas augue nec iaculis. Integer nisi felis, facilisis
                eu iaculis in, tincidunt feugiat purus! Ut et enim id augue porttitor semper ac
                sit amet arcu. Sed sed justo ut lectus accumsan egestas ac vitae sapien. Nunc lacinia
                condimentum tellus non ultrices. Sed congue aliquet neque, vel fermentum augue tincidunt
                a? In non nulla non magna facilisis pulvinar. Aenean at consequat neque! Suspendisse
                pellentesque eleifend fermentum. Cras nisi mauris, porttitor at malesuada vitae;
                venenatis vel magna.
                <br/>
                <br/>
            </div>
        </div>
        <div id="tabTwo" class="myTabs">
            Tab Two Content
        </div>
        <div id="tabThree" class="myTabs">
            Tab Three Content
        </div>
        <input type="hidden" id="tabOneScrollPosition" value="0"/>
        <input type="hidden" id="tabTwoScrollPosition" value="0"/>
        <input type="hidden" id="tabThreeScrollPosition" value="0"/>
    </div>
</div>

<script type="text/javascript">

    function maintainTabScrollPosition(index) {
        var selectedTab;
        switch (index) {
            case 0:
                selectedTab = $('#tabOne');
                break;
            case 1:
                selectedTab = $('#tabTwo');
                break;
            case 2:
                selectedTab = $('#tabThree');
                break;
        }
        selectedTab.scrollTo($('#' + selectedTab.attr('id') + 'ScrollPosition').val(),
                1, { offset: { left: 0, top: 0 }, easing: 'linear', queue: true, axis: 'xy' });
    }

    $(document).ready(function() {
        $('div.myTabs').scroll(function() {
            var divScrollTop = $(this).scrollTop();
            $('#' + $(this).attr('id') + 'ScrollPosition').val(divScrollTop);
        });
        $('#tabsContainer').tabs({
            show: function(event, ui) {
                maintainTabScrollPosition(ui.index);
            }
        });
    });
</script>

</body>
</html>
0 голосов
/ 04 октября 2010

Попробуйте добавить это вместо 

tabs = $("#tabs").tabs({fx: {opacity:'toggle', duration:100}});
...