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

最新推荐文章于 2024-04-17 09:40:37 发布

jxxchallenger

最新推荐文章于 2024-04-17 09:40:37 发布

阅读量1.2k

点赞数

分类专栏： Jquery JavaScript 文章标签： jquery javascript

本文链接：https://blog.csdn.net/jxchallenger/article/details/58617090

版权

Jquery 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

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

jquery.fixedtableheader.min.js:

/* Copyright (c) 2009 Mustafa OZCAN (http://www.mustafaozcan.net)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 * Version: 1.0.2
 * Requires: jquery.1.3+
 */
jQuery.fn.fixedtableheader = function(options) {

	//解决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

    var settings = jQuery.extend({
        headerrowsize: 1,
        highlightrow: false,
        highlightclass: "highlight"
    }, options);
    this.each(function(i) {
        var $tbl = $(this);
        var $tblhfixed = $tbl.find("tr:lt(" + settings.headerrowsize + ")");
        var headerelement = "th";
        if ($tblhfixed.find(headerelement).length == 0)
            headerelement = "td";
        if ($tblhfixed.find(headerelement).length > 0) {
            $tblhfixed.find(headerelement).each(function() {
                $(this).css("width", $(this).width());
            });
            var $clonedTable = $tbl.clone().empty();
            var tblwidth = GetTblWidth($tbl);
            $clonedTable.attr("id", "fixedtableheader" + i).css({
                "position": "fixed",
                "top": "0",
                "left": $tbl.offset().left
            }).append($tblhfixed.clone()).width(tblwidth).hide().appendTo($("body"));
            if (settings.highlightrow)
                $("tr:gt(" + (settings.headerrowsize - 1) + ")", $tbl).hover(function() {
                    $(this).addClass(settings.highlightclass);
                }, function() {
                    $(this).removeClass(settings.highlightclass);
                });
            $(window).scroll(function() {
                if (jQuery.browser.msie && jQuery.browser.version == "6.0")
                    $clonedTable.css({
                        "position": "absolute",
                        "top": $(window).scrollTop(),
                        "left": $tbl.offset().left
                    });
                else
                    $clonedTable.css({
                        "position": "fixed",
                        "top": "0",
                        "left": $tbl.offset().left - $(window).scrollLeft()
                    });
                var sctop = $(window).scrollTop();
                var elmtop = $tblhfixed.offset().top;
                if (sctop > elmtop && sctop <= (elmtop + $tbl.height() - $tblhfixed.height()))
                    $clonedTable.show();
                else
                    $clonedTable.hide();
            });
            $(window).resize(function() {
                if ($clonedTable.outerWidth() != $tbl.outerWidth()) {
                    $tblhfixed.find(headerelement).each(function(index) {
                        var w = $(this).width();
                        $(this).css("width", w);
                        $clonedTable.find(headerelement).eq(index).css("width", w);
                    });
                    $clonedTable.width($tbl.outerWidth());
                }
                $clonedTable.css("left", $tbl.offset().left);
            });
        }
    });
    function GetTblWidth($tbl) {
        var tblwidth = $tbl.outerWidth();
        return tblwidth;
    }
};

演示DOME:

演示DOME:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery.fixedtableheader.min.js Demo Page (Created Mustafa OZCAN)</title>
    <script src="jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="jquery.fixedtableheader.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".tbl3").fixedtableheader({ highlightrow: false, highlightclass: "", headerrowsize: 1 });
        });
    </script>
    <style type="text/css">
        html *
        {
            font-family: Tahoma, "Trebuchet MS" , Verdana;
            font-size: 11px;
        }
        body
        {
            margin: 0;
            padding: 0;
        }
        .baslik
        {
            background-color: #6b8e23;
            color: white;
            font-weight: bold;
            text-align: center;
            padding: 5px;
        }
        .tdmetin
        {
            background-color: #dcdcdc;
            color: #00008b;
            font-weight: bold;
            padding: 5px;
        }
        .code
        {
            background-color: #EEEEEE;
            border: 1px solid #CCCCCC;
            padding: 5px;
            width: 400px;
        }
        .highlight
        {
            background-color: Highlight !important;
        }
        .highlight2
        {
            background-color: Black !important;
            color: White;
        }
        .tbl1, .tbl2, .tbl3
        {
            border-collapse: collapse;
            border: solid 1px gray;
        }
    </style>
</head>
<body>
    <table width="500">
        <tr>
            <td colspan="2" class="baslik">
                jQuery Fixed Table Header Demo Page
            </td>
        </tr>
    </table>
    <br />
  <br />
<div class="code">
            <script src="jquery.min.js" type="text/javascript"> </script>
  <br />
            <script src="jquery.fixedtableheader.min.js" type="text/javascript"> </script>
        </div>
        <br />
    <p>
        <br />
        <b>Third Option</b> = highlightclass: "highlight"<br />
        Default value is "highlight". This option set highlighted row's css class.
        <br />
        If you are set "highlightrow: true" you can set highlightclass.
        <br />
        <br />
<div class="code">
            <script type="text/javascript"><br />
            $(document).ready(function() {
            <br />
               $('.tbl').fixedtableheader({
            <br />
                highlightclass: 'rowhlite'
            <br />
               });
            <br />
            });
            <br />
            </script>
        </div>
        <br />
        <br />
    </p>
    <table border="1" cellspacing="0" class="tbl3">
        <tbody>
            <tr align="center" style="background-color: yellow">
                <td colspan="6"><b>TIME TABLE</b></td></tr>
            <tr align="center" style="">
                <td colspan="3"><b>STATION A </b></td>
                <td colspan="3"><b>STATION B</b></td></tr>
            <tr style="">
                <td>Work Days</td><td>Saturday</td><td>Sunday</td><td>Work Days</td><td>Saturday</td><td>Sunday</td></tr>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <tr><td>21:30</td><td></td><td>21:10</td><td>22:40</td><td></td><td>22:20</td></tr>
            <tr><td>22:00</td><td></td><td></td><td>23:10</td><td></td><td></td></tr>
        </tbody>
    </table>
</body>
</html>