La permutation des onglets de l'interface utilisateur jQuery est annulée dans IE

Le problème ne se produit pas dans Firefox, mais la base utilisateur est entièrement sur IE. Sur la page ci-dessous, il y a une maquette de trois onglets, avec leur hauteur définie à une valeur et un débordement de auto. Lorsque vous faites défiler une certaine position dans l'onglet un et passez à un autre et revenir, la position de défilement est perdu dans IE (ont testé uniquement avec IE 8), mais est conservé dans Firefox (3.6.3). Comment pourrions-nous conserver la position de défilement pendant les commutateurs de tabulation?La permutation des onglets de l'interface utilisateur jQuery est annulée dans IE

<!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>

Source

2010-08-28 Floyd Pink

Enfin, j'ai un travail autour. éléments d'entrée cachés Ajouté qui gardent la trace des propriétés scrollTop de chacun des onglets sur $('tab').scroll(function() { ... }); ensuite sur l'événement show de .tabs(), utilisé le plugin .scrollTo() pour faire défiler manuellement l'onglet où il était. Phew !

<!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>

Source

2010-08-28 19:01:33

Essayez d'ajouter ceci à la place

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

Source

2010-10-04 12:50:47 FDisk

La permutation des onglets de l'interface utilisateur jQuery est annulée dans IE

Répondre

Questions connexes