jQuery Easy Accordion插件,兼容IE11
jQuery Easy Accordion插件,网上下载的jQuery Easy Accordion插件大部分是作者原创,编写的代码只兼容IE8-浏览器,chrome和firefox。IE9+浏览器下显示全部错乱,经本人修改,现在已经兼容IE9+浏览器,并且兼容最新IE版本IE11(IE11做了重大调整,附带的jQuery1.3.1判断IE11已经失效,也不支持css的filter属性,Accordion的tab旋转效果需要使用css3的transform效果)。
Easy Accordion IE11下效果
Easy Accordion IE10下效果
Easy Accordion IE9下效果
CSS修改,删除IE部分的filter样式,改用js动态输出
.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; cursor:pointer;-o-transform: rotate(-90deg);/*opera*/} .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); }
<script type="text/javascript" src="scripts/jquery.min.js"></script> <script> /*fixed IE*/ if (jQuery.browser.msie || "ActiveXObject" in window/*fixed IE11+*/) { jQuery.browser.msie = true; //jQuery代码无法判断是否IE11+,要改为"ActiveXObject" in window,所以能通过if判断直接设置为true,注意这句要放到easyAccordion.js类库前 if (jQuery.browser.version > 8)document.write('<style>.easy-accordion dt{-ms-transform: rotate(-90deg);}.easy-accordion .slide-number{-ms-transform: rotate(90deg);}</style>'); else document.write('<style>.easy-accordion dt{filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}.easy-accordion .slide-number{filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}</style>'); } </script> <script type="text/javascript" src="scripts/jquery.easyAccordion.js"></script> <script type="text/javascript" src="scripts/utility.js"></script>
jquery.easyAccordion.js也做了IE部分判断修改
//fixed IE8-,第一部分 if (jQuery.browser.msie && jQuery.browser.version < 9) { dtWidth = $(this).find('dt').outerWidth(); } //第二部分 if (jQuery.browser.safari || (jQuery.browser.msie && jQuery.browser.version > 8)) { var dtTop = (dlHeight - dtWidth) / 2; var dtOffset = -dtTop; /* Safari and Chrome IE9+*/ } if (jQuery.browser.mozilla/*你母,IE11会判断出错为mozilla*/ && !jQuery.browser.msie) { var dtTop = dlHeight - 20; var dtOffset = -20; /* FF */ } //第三部分 if (jQuery.browser.msie && jQuery.browser.version < 9) { var slideNumLeft = parseInt(jQuery(this).find('.slide-number').css('left')) - 14;