Jquery 1.9+后不支持jQuery.browser的解决方式

た 入场券 2022-07-12 18:41 230阅读 0赞

有次工作碰到要做表头固定的js,发现高版本的Jquery不支持jQuery.browser属性，可以通过以下办法解决：

jquery.fixedtableheader.min.js: 

  1. /* Copyright (c) 2009 Mustafa OZCAN (http://www.mustafaozcan.net)
  2.  * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
  3.  * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
  4.  * Version: 1.0.2
  5.  * Requires: jquery.1.3+
  6.  */
  7. jQuery.fn.fixedtableheader = function(options) {
  9.     //解决jquyer 1.9+ 不支持jQuery.browser start if(jQuery.browser) return; jQuery.browser = {}; jQuery.browser.mozilla = false; jQuery.browser.webkit = false; jQuery.browser.opera = false; jQuery.browser.msie = false; var nAgt = navigator.userAgent; jQuery.browser.name = navigator.appName; jQuery.browser.fullVersion = ''+parseFloat(navigator.appVersion); jQuery.browser.majorVersion = parseInt(navigator.appVersion,10); var nameOffset,verOffset,ix; // In Opera, the true version is after "Opera" or after "Version" if ((verOffset=nAgt.indexOf("Opera"))!=-1) { jQuery.browser.opera = true; jQuery.browser.name = "Opera"; jQuery.browser.fullVersion = nAgt.substring(verOffset+6); if ((verOffset=nAgt.indexOf("Version"))!=-1) jQuery.browser.fullVersion = nAgt.substring(verOffset+8); } // In MSIE, the true version is after "MSIE" in userAgent else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) { jQuery.browser.msie = true; jQuery.browser.name = "Microsoft Internet Explorer"; jQuery.browser.fullVersion = nAgt.substring(verOffset+5); } // In Chrome, the true version is after "Chrome" else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) { jQuery.browser.webkit = true; jQuery.browser.name = "Chrome"; jQuery.browser.fullVersion = nAgt.substring(verOffset+7); } // In Safari, the true version is after "Safari" or after "Version" else if ((verOffset=nAgt.indexOf("Safari"))!=-1) { jQuery.browser.webkit = true; jQuery.browser.name = "Safari"; jQuery.browser.fullVersion = nAgt.substring(verOffset+7); if ((verOffset=nAgt.indexOf("Version"))!=-1) jQuery.browser.fullVersion = nAgt.substring(verOffset+8); } // In Firefox, the true version is after "Firefox" else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) { jQuery.browser.mozilla = true; jQuery.browser.name = "Firefox"; jQuery.browser.fullVersion = nAgt.substring(verOffset+8); } // In most other browsers, "name/version" is at the end of userAgent else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) { jQuery.browser.name = nAgt.substring(nameOffset,verOffset); jQuery.browser.fullVersion = nAgt.substring(verOffset+1); if (jQuery.browser.name.toLowerCase()==jQuery.browser.name.toUpperCase()) { jQuery.browser.name = navigator.appName; } } // trim the fullVersion string at semicolon/space if present if ((ix=jQuery.browser.fullVersion.indexOf(";"))!=-1) jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix); if ((ix=jQuery.browser.fullVersion.indexOf(" "))!=-1) jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix); jQuery.browser.majorVersion = parseInt(''+jQuery.browser.fullVersion,10); if (isNaN(jQuery.browser.majorVersion)) { jQuery.browser.fullVersion = ''+parseFloat(navigator.appVersion); jQuery.browser.majorVersion = parseInt(navigator.appVersion,10); } jQuery.browser.version = jQuery.browser.majorVersion; //解决jquyer 1.9+ 不支持jQuery.browser end
  11.     var settings = jQuery.extend({
  12.         headerrowsize: 1,
  13.         highlightrow: false,
  14.         highlightclass: "highlight"
  15.     }, options);
  16.     this.each(function(i) {
  17.         var $tbl = $(this);
  18.         var $tblhfixed = $tbl.find("tr:lt(" + settings.headerrowsize + ")");
  19.         var headerelement = "th";
  20.         if ($tblhfixed.find(headerelement).length == 0)
  21.             headerelement = "td";
  22.         if ($tblhfixed.find(headerelement).length > 0) {
  23.             $tblhfixed.find(headerelement).each(function() {
  24.                 $(this).css("width", $(this).width());
  25.             });
  26.             var $clonedTable = $tbl.clone().empty();
  27.             var tblwidth = GetTblWidth($tbl);
  28.             $clonedTable.attr("id", "fixedtableheader" + i).css({
  29.                 "position": "fixed",
  30.                 "top": "0",
  31.                 "left": $tbl.offset().left
  32.             }).append($tblhfixed.clone()).width(tblwidth).hide().appendTo($("body"));
  33.             if (settings.highlightrow)
  34.                 $("tr:gt(" + (settings.headerrowsize - 1) + ")", $tbl).hover(function() {
  35.                     $(this).addClass(settings.highlightclass);
  36.                 }, function() {
  37.                     $(this).removeClass(settings.highlightclass);
  38.                 });
  39.             $(window).scroll(function() {
  40.                 if (jQuery.browser.msie && jQuery.browser.version == "6.0")
  41.                     $clonedTable.css({
  42.                         "position": "absolute",
  43.                         "top": $(window).scrollTop(),
  44.                         "left": $tbl.offset().left
  45.                     });
  46.                 else
  47.                     $clonedTable.css({
  48.                         "position": "fixed",
  49.                         "top": "0",
  50.                         "left": $tbl.offset().left - $(window).scrollLeft()
  51.                     });
  52.                 var sctop = $(window).scrollTop();
  53.                 var elmtop = $tblhfixed.offset().top;
  54.                 if (sctop > elmtop && sctop <= (elmtop + $tbl.height() - $tblhfixed.height()))
  55.                     $clonedTable.show();
  56.                 else
  57.                     $clonedTable.hide();
  58.             });
  59.             $(window).resize(function() {
  60.                 if ($clonedTable.outerWidth() != $tbl.outerWidth()) {
  61.                     $tblhfixed.find(headerelement).each(function(index) {
  62.                         var w = $(this).width();
  63.                         $(this).css("width", w);
  64.                         $clonedTable.find(headerelement).eq(index).css("width", w);
  65.                     });
  66.                     $clonedTable.width($tbl.outerWidth());
  67.                 }
  68.                 $clonedTable.css("left", $tbl.offset().left);
  69.             });
  70.         }
  71.     });
  72.     function GetTblWidth($tbl) {
  73.         var tblwidth = $tbl.outerWidth();
  74.         return tblwidth;
  75.     }
  76. };

演示DOME: 

  1. 演示DOME:
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.     <title>jquery.fixedtableheader.min.js Demo Page (Created Mustafa OZCAN)</title>
  8.     <script src="jquery-1.11.2.min.js" type="text/javascript"></script>
  9.     <script src="jquery.fixedtableheader.min.js" type="text/javascript"></script>
  10.     <script type="text/javascript">
  11.         $(function () {
  12.             $(".tbl3").fixedtableheader({ highlightrow: false, highlightclass: "", headerrowsize: 1 });
  13.         });
  14.     </script>
  15.     <style type="text/css">
  16.         html *
  17.         {
  18.             font-family: Tahoma, "Trebuchet MS" , Verdana;
  19.             font-size: 11px;
  20.         }
  21.         body
  22.         {
  23.             margin: 0;
  24.             padding: 0;
  25.         }
  26.         .baslik
  27.         {
  28.             background-color: #6b8e23;
  29.             color: white;
  30.             font-weight: bold;
  31.             text-align: center;
  32.             padding: 5px;
  33.         }
  34.         .tdmetin
  35.         {
  36.             background-color: #dcdcdc;
  37.             color: #00008b;
  38.             font-weight: bold;
  39.             padding: 5px;
  40.         }
  41.         .code
  42.         {
  43.             background-color: #EEEEEE;
  44.             border: 1px solid #CCCCCC;
  45.             padding: 5px;
  46.             width: 400px;
  47.         }
  48.         .highlight
  49.         {
  50.             background-color: Highlight !important;
  51.         }
  52.         .highlight2
  53.         {
  54.             background-color: Black !important;
  55.             color: White;
  56.         }
  57.         .tbl1, .tbl2, .tbl3
  58.         {
  59.             border-collapse: collapse;
  60.             border: solid 1px gray;
  61.         }
  62.     </style>
  63. </head>
  64. <body>
  65.     <table width="500">
  66.         <tr>
  67.             <td colspan="2" class="baslik">
  68.                 jQuery Fixed Table Header Demo Page
  69.             </td>
  70.         </tr>
  71.     </table>
  72.     <br />
  73.   <br />
  74. <div class="code">
  75.             <script src="jquery.min.js" type="text/javascript"> </script>
  76.   <br />
  77.             <script src="jquery.fixedtableheader.min.js" type="text/javascript"> </script>
  78.         </div>
  79.         <br />
  80.     <p>
  81.         <br />
  82.         <b>Third Option</b> = highlightclass: "highlight"<br />
  83.         Default value is "highlight". This option set highlighted row's css class.
  84.         <br />
  85.         If you are set "highlightrow: true" you can set highlightclass.
  86.         <br />
  87.         <br />
  88. <div class="code">
  89.             <script type="text/javascript"><br />
  90.             $(document).ready(function() {
  91.             <br />
  92.                $('.tbl').fixedtableheader({
  93.             <br />
  94.                 highlightclass: 'rowhlite'
  95.             <br />
  96.                });
  97.             <br />
  98.             });
  99.             <br />
  100.             </script>
  101.         </div>
  102.         <br />
  103.         <br />
  104.     </p>
  105.     <table border="1" cellspacing="0" class="tbl3">
  106.         <tbody>
  107.             <tr align="center" style="background-color: yellow">
  108.                 <td colspan="6"><b>TIME TABLE</b></td></tr>
  109.             <tr align="center" style="">
  110.                 <td colspan="3"><b>STATION A </b></td>
  111.                 <td colspan="3"><b>STATION B</b></td></tr>
  112.             <tr style="">
  113.                 <td>Work Days</td><td>Saturday</td><td>Sunday</td><td>Work Days</td><td>Saturday</td><td>Sunday</td></tr>
  114.             <tr><td>05:50</td><td>06:00</td><td>06:20</td><td>06:20</td><td>06:30</td><td>07:25</td></tr>
  115.             <tr><td>06:10</td><td>06:15</td><td>06:40</td><td>06:50</td><td>07:00</td><td>07:45</td></tr>
  116.             <tr><td>06:30</td><td>06:30</td><td>07:00</td><td>07:10</td><td>07:15</td><td>08:00</td></tr>
  117.             <tr><td>06:45</td><td>06:45</td><td>07:20</td><td>07:30</td><td>07:30</td><td>08:20</td></tr>
  118.             <tr><td>?0?707:00?0?7</td><td>07:00</td><td>07:35</td><td>07:50</td><td>07:45</td><td>08:35</td></tr>
  119.             <tr><td>07:10</td><td>07:15</td><td>07:50</td><td>08:10</td><td>08:00</td><td>08:50</td></tr>
  120.             <tr><td>?0?707:10?0?7</td><td>07:30</td><td>08:00</td><td>08:30</td><td>08:20</td><td>09:00</td></tr>
  121.             <tr><td>?0?707:20?0?7</td><td>07:40</td><td>08:10</td><td>08:45</td><td>08:35</td><td>09:15</td></tr>
  122.             <tr><td>07:30</td><td>07:50</td><td>08:20</td><td>08:55</td><td>08:50</td><td>09:30</td></tr>
  123.             <tr><td>?0?707:40?0?7</td><td>08:00</td><td>08:30</td><td>09:05</td><td>09:05</td><td>09:45</td></tr>
  124.             <tr><td>07:50</td><td>08:10</td><td>08:50</td><td>09:15</td><td>09:15</td><td>10:00</td></tr>
  125.             <tr><td>08:00</td><td>08:20</td><td>09:10</td><td>09:30</td><td>09:30</td><td>10:15</td></tr>
  126.             <tr><td>?0?708:15?0?7</td><td>08:30</td><td>09:30</td><td>09:45</td><td>09:40</td><td>10:35</td></tr>
  127.             <tr><td>08:15</td><td>08:45</td><td>09:45</td><td>10:00</td><td>09:50</td><td>10:50</td></tr>
  128.             <tr><td>08:30</td><td>09:00</td><td>10:00</td><td>10:15</td><td>10:05</td><td>11:05</td></tr>
  129.             <tr><td>08:50</td><td>09:15</td><td>10:10</td><td>10:30</td><td>10:20</td><td>11:15</td></tr>
  130.             <tr><td>09:10</td><td>09:30</td><td>10:20</td><td>10:45</td><td>10:30</td><td>11:25</td></tr>
  131.             <tr><td>09:30</td><td>09:45</td><td>10:35</td><td>11:00</td><td>10:45</td><td>11:45</td></tr>
  132.             <tr><td>09:45</td><td>10:00</td><td>10:45</td><td>11:15</td><td>11:00</td><td>11:55</td></tr>
  133.             <tr><td>10:00</td><td>10:10</td><td>10:55</td><td>11:30</td><td>11:15</td><td>12:05</td></tr>
  134.             <tr><td>10:15</td><td>10:25</td><td>11:10</td><td>11:45</td><td>11:30</td><td>12:20</td></tr>
  135.             <tr><td>10:30</td><td>10:35</td><td>11:25</td><td>12:00</td><td>11:45</td><td>12:35</td></tr>
  136.             <tr><td>10:45</td><td>10:50</td><td>11:40</td><td>12:15</td><td>12:00</td><td>12:50</td></tr>
  137.             <tr><td>11:00</td><td>11:05</td><td>11:55</td><td>12:35</td><td>12:20</td><td>13:05</td></tr>
  138.             <tr><td>11:15</td><td>11:20</td><td>12:10</td><td>12:55</td><td>12:35</td><td>13:20</td></tr>
  139.             <tr><td>11:30</td><td>11:35</td><td>12:20</td><td>13:10</td><td>12:50</td><td>13:30</td></tr>
  140.             <tr><td>11:45</td><td>11:55</td><td>12:35</td><td>13:25</td><td>13:00</td><td>13:45</td></tr>
  141.             <tr><td>12:05</td><td>12:15</td><td>12:50</td><td>13:40</td><td>13:20</td><td>14:00</td></tr>
  142.             <tr><td>12:20</td><td>12:35</td><td>13:00</td><td>14:00</td><td>13:40</td><td>14:10</td></tr>
  143.             <tr><td>12:35</td><td>12:50</td><td>13:10</td><td>14:20</td><td>13:55</td><td>14:20</td></tr>
  144.             <tr><td>12:50</td><td>13:05</td><td>13:25</td><td>14:35</td><td>14:10</td><td>14:35</td></tr>
  145.             <tr><td>13:05</td><td>13:25</td><td>13:40</td><td>14:55</td><td>14:25</td><td>14:50</td></tr>
  146.             <tr><td>13:20</td><td>13:45</td><td>13:55</td><td>15:10</td><td>14:40</td><td>15:05</td></tr>
  147.             <tr><td>13:35</td><td>14:05</td><td>14:10</td><td>15:30</td><td>15:00</td><td>15:20</td></tr>
  148.             <tr><td>13:50</td><td>14:20</td><td>14:25</td><td>15:50</td><td>15:20</td><td>15:35</td></tr>
  149.             <tr><td>14:10</td><td>14:35</td><td>14:35</td><td>16:05</td><td>15:40</td><td>15:45</td></tr>
  150.             <tr><td>14:30</td><td>14:55</td><td>14:50</td><td>16:25</td><td>16:10</td><td>16:00</td></tr>
  151.             <tr><td>14:50</td><td>15:10</td><td>15:05</td><td>16:40</td><td>16:30</td><td>16:15</td></tr>
  152.             <tr><td>15:10</td><td>15:25</td><td>15:15</td><td>17:00</td><td>16:50</td><td>16:25</td></tr>
  153.             <tr><td>15:30</td><td>15:40</td><td>15:25</td><td>?0?717:10?0?7</td><td>17:05</td><td>16:35</td></tr>
  154.             <tr><td>15:50</td><td>15:55</td><td>15:40</td><td>17:15</td><td>17:20</td><td>16:50</td></tr>
  155.             <tr><td>16:05</td><td>16:15</td><td>15:55</td><td>17:30</td><td>17:35</td><td>17:05</td></tr>
  156.             <tr><td>16:20</td><td>16:35</td><td>16:10</td><td>17:45</td><td>17:50</td><td>17:20</td></tr>
  157.             <tr><td>16:35</td><td>16:55</td><td>16:25</td><td>17:55</td><td>18:10</td><td>17:30</td></tr>
  158.             <tr><td>16:55</td><td>17:10</td><td>16:40</td><td>18:15</td><td>18:30</td><td>17:50</td></tr>
  159.             <tr><td>17:15</td><td>17:30</td><td>16:50</td><td>?0?718:30?0?7</td><td>18:45</td><td>18:00</td></tr>
  160.             <tr><td>17:30</td><td>17:45</td><td>17:05</td><td>18:45</td><td>19:00</td><td>18:20</td></tr>
  161.             <tr><td>17:45</td><td>18:00</td><td>17:25</td><td>19:05</td><td>19:15</td><td>18:30</td></tr>
  162.             <tr><td>18:00</td><td>18:15</td><td>17:40</td><td>19:20</td><td>19:30</td><td>18:45</td></tr>
  163.             <tr><td>?0?718:10?0?7</td><td>18:30</td><td>17:55</td><td>?0?719:35?0?7</td><td>19:45</td><td>19:00</td></tr>
  164.             <tr><td>18:20</td><td>18:50</td><td>18:15</td><td>19:45</td><td>20:00</td><td>19:15</td></tr>
  165.             <tr><td>18:40</td><td>19:10</td><td>18:35</td><td>20:05</td><td>20:20</td><td>19:40</td></tr>
  166.             <tr><td>19:00</td><td>19:30</td><td>18:50</td><td>20:25</td><td>20:40</td><td>19:55</td></tr>
  167.             <tr><td>19:15</td><td>19:50</td><td>19:05</td><td>20:40</td><td>21:00</td><td>20:10</td></tr>
  168.             <tr><td>19:30</td><td>20:10</td><td>19:20</td><td>20:55</td><td>21:20</td><td>20:25</td></tr>
  169.             <tr><td>19:45</td><td>20:35</td><td>19:35</td><td>21:15</td><td>21:45</td><td>20:40</td></tr>
  170.             <tr><td>20:05</td><td>21:00</td><td>19:55</td><td>21:30</td><td>22:10</td><td>21:00</td></tr>
  171.             <tr><td>20:30</td><td>21:30</td><td>20:15</td><td>21:50</td><td>22:40</td><td>21:25</td></tr>
  172.             <tr><td>21:00</td><td>22:00</td><td>20:45</td><td>22:10</td><td>23:10</td><td>21:55</td></tr>
  173.             <tr><td>21:30</td><td></td><td>21:10</td><td>22:40</td><td></td><td>22:20</td></tr>
  174.             <tr><td>22:00</td><td></td><td></td><td>23:10</td><td></td><td></td></tr>
  175.         </tbody>
  176.     </table>
  177. </body>
  178. </html>

发表评论

表情：
评论列表 （有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读