bootstrap-ie.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. (function($) {
  2. $.eb = $.eb || {};
  3. // $.eb.ie = function (min,max) {
  4. // // return true;
  5. // if ($.browser.msie) {
  6. // var v = Math.floor($.browser.version);
  7. // if (v >= min && v <= max) {
  8. // return true;
  9. // }
  10. // }
  11. // return false;
  12. // }
  13. $.eb.ie6 = function () {
  14. return navigator.userAgent.toLowerCase().indexOf('msie 6.0') > -1;
  15. // alert(navigator.userAgent.toLowerCase().indexOf('msie 6.0'));
  16. }
  17. $.eb.color = function () {
  18. var pad = function(num, totalChars) {
  19. var pad = '0';
  20. num = num + '';
  21. while (num.length < totalChars) {
  22. num = pad + num;
  23. }
  24. return num;
  25. };
  26. // Ratio is between 0 and 1
  27. this.changeColor = function(color, ratio, darker) {
  28. // Trim trailing/leading whitespace
  29. color = color.replace(/^\s*|\s*$/, '');
  30. // Expand three-digit hex
  31. color = color.replace(
  32. /^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,
  33. '#$1$1$2$2$3$3'
  34. );
  35. // Calculate ratio
  36. var difference = Math.round(ratio * 256) * (darker ? -1 : 1),
  37. // Determine if input is RGB(A)
  38. rgb = color.match(new RegExp('^rgba?\\(\\s*' +
  39. '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
  40. '\\s*,\\s*' +
  41. '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
  42. '\\s*,\\s*' +
  43. '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
  44. '(?:\\s*,\\s*' +
  45. '(0|1|0?\\.\\d+))?' +
  46. '\\s*\\)$'
  47. , 'i')),
  48. alpha = !!rgb && rgb[4] != null ? rgb[4] : null,
  49. // Convert hex to decimal
  50. decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(
  51. /^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i,
  52. function() {
  53. return parseInt(arguments[1], 16) + ',' +
  54. parseInt(arguments[2], 16) + ',' +
  55. parseInt(arguments[3], 16);
  56. }
  57. ).split(/,/),
  58. returnValue;
  59. // Return RGB(A)
  60. return !!rgb ?
  61. 'rgb' + (alpha !== null ? 'a' : '') + '(' +
  62. Math[darker ? 'max' : 'min'](
  63. parseInt(decimal[0], 10) + difference, darker ? 0 : 255
  64. ) + ', ' +
  65. Math[darker ? 'max' : 'min'](
  66. parseInt(decimal[1], 10) + difference, darker ? 0 : 255
  67. ) + ', ' +
  68. Math[darker ? 'max' : 'min'](
  69. parseInt(decimal[2], 10) + difference, darker ? 0 : 255
  70. ) +
  71. (alpha !== null ? ', ' + alpha : '') +
  72. ')' :
  73. // Return hex
  74. [
  75. '#',
  76. pad(Math[darker ? 'max' : 'min'](
  77. parseInt(decimal[0], 10) + difference, darker ? 0 : 255
  78. ).toString(16), 2),
  79. pad(Math[darker ? 'max' : 'min'](
  80. parseInt(decimal[1], 10) + difference, darker ? 0 : 255
  81. ).toString(16), 2),
  82. pad(Math[darker ? 'max' : 'min'](
  83. parseInt(decimal[2], 10) + difference, darker ? 0 : 255
  84. ).toString(16), 2)
  85. ].join('');
  86. };
  87. this.lighten = function(color, ratio) {
  88. return changeColor(color, ratio, false);
  89. };
  90. this.darken = function(color, ratio) {
  91. return changeColor(color, ratio, true);
  92. };
  93. return this;
  94. }();
  95. function bootstrapIE6(el) {
  96. var dropdownWidthFix = function (el) {
  97. el.each(function () {
  98. var w = 0;
  99. $(this).children('li').each(function() {
  100. var aw = $(this).outerWidth();
  101. if (aw > w) w = aw;
  102. });
  103. $(this).width(w);
  104. });
  105. }
  106. if ($.eb.ie6()) {
  107. el = el || $('html');
  108. //-------------
  109. // GRID
  110. //-------------
  111. //-------------
  112. // dropdown
  113. //-------------
  114. // fix for IE6 not support li:hover
  115. var i, lis = ['dropdown-submenu'];
  116. for (i = 0; i < lis.length; i++) {
  117. var child = 'li.' + lis[i];
  118. var hover = lis[i] + '-hover';
  119. $('ul', el).on('mouseenter', child, function () {
  120. $(this).addClass(hover);
  121. }).on('mouseleave', child, function () {
  122. $(this).removeClass(hover);
  123. });
  124. }
  125. /// fix :after selector -- dropdown-submenu > a:after
  126. $('.dropdown-submenu > a', el).after('<span class="dropdown-tri"></span>');
  127. /// fix multi class selector -- .dropdown-submenu.pull-left
  128. $('.dropdown-submenu.pull-left', el).removeClass('pull-left').addClass('dropdown-submenu-pull-left');
  129. // $('.navbar .nav.pull-right').removeClass('pull-right').addClass('nav-pull-right');
  130. /// fix ul li 100% width bug, set ul width to max width of it's sub li
  131. dropdownWidthFix($('.dropdown-menu:visible', el));
  132. //-------------
  133. // buttons
  134. //-------------
  135. var btnColorCls = ['btn-primary','btn-warning','btn-danger','btn-success','btn-info','btn-inverse'];
  136. var btnSizeCls = ['btn-mini','btn-small','btn-large'];
  137. $('.btn-group', el).parent().find('.btn-group:eq(0)').addClass('btn-group-first');
  138. $('.btn', el).parent().find('.btn:eq(0)').addClass('btn-first');
  139. // fix button:hover
  140. $('body', el).on('mouseenter', '.btn', function () {
  141. var btn = $(this);
  142. var hover = 'btn-hover';
  143. btn.data('ie6hover',hover);
  144. $.each(btnColorCls, function (k,v) {
  145. if (btn.hasClass(v)) {
  146. hover = v + '-hover';
  147. btn.data('ie6hover',hover);
  148. return false;
  149. }
  150. });
  151. btn.addClass(hover);
  152. }).on('mouseleave', '.btn', function () {
  153. var btn = $(this);
  154. var hover = btn.data('ie6hover');
  155. btn.removeData('ie6hover');
  156. if (hover) btn.removeClass(hover);
  157. });
  158. // fix .btn.dropdown-toggle, .btn-primary.dropdown-toggle ...
  159. // fix .btn.dropdown-toggle, .btn-small.dropdown-toggle ...
  160. $('.btn.dropdown-toggle', el).each(function () {
  161. var btn = $(this);
  162. var ddt = 'btn-dropdown-toggle';
  163. btn.addClass(ddt);
  164. ddt = null;
  165. $.each(btnColorCls, function (k,v) {
  166. if (btn.hasClass(v)) {
  167. ddt = v + '-dropdown-toggle';
  168. return false;
  169. }
  170. });
  171. if (ddt) btn.addClass(ddt);
  172. ddt = null;
  173. $.each(btnSizeCls, function (k,v) {
  174. if (btn.hasClass(v)) {
  175. ddt = v + '-dropdown-toggle';
  176. return false;
  177. }
  178. });
  179. if (ddt) btn.addClass(ddt);
  180. });
  181. // fix split button dropdown toggle background color
  182. $('.btn + .btn.dropdown-toggle', el).each(function () {
  183. var btn = $(this);
  184. var c = btn.css('background-color');
  185. // alert($.eb.color.darken(c, .2));
  186. btn.css('background-color', $.eb.color.darken(c, .1));
  187. });
  188. // fix .btn-group.open
  189. var dropdownPropertyChange = function(e) {
  190. var self = $(this);
  191. var cls = e.data.cls;
  192. /// fix ul li 100% width bug, set ul width to max width of it's sub li
  193. var el = $('.dropdown-menu:visible', this);
  194. if (el.length) dropdownWidthFix(el);
  195. if (self.hasClass('open') && !self.hasClass(cls+'-open')) {
  196. self.addClass(cls+'-open');
  197. }
  198. else if (!self.hasClass('open') && self.hasClass(cls+'-open')) {
  199. self.removeClass(cls+'-open');
  200. }
  201. self.one('propertychange', {cls:cls}, dropdownPropertyChange);
  202. };
  203. $.each(['btn-group', 'dropdown'], function (k,cls) {
  204. $('.'+cls, el).one('propertychange', {cls:cls}, dropdownPropertyChange);
  205. });
  206. // fix .btn.disabled selector
  207. $('.btn.disabled', el).addClass('btn-disabled');
  208. var btnPropertyChange = function (e) {
  209. var self = $(this);
  210. var cls = e.data.cls;
  211. if (self.hasClass('disabled') && !self.hasClass(cls+'-disabled')) {
  212. self.addClass(cls+'-disabled');
  213. }
  214. else if (!self.hasClass('disabled') && self.hasClass(cls+'-disabled')) {
  215. self.removeClass(cls+'-disabled');
  216. }
  217. self.one('propertychange', {cls:cls}, btnPropertyChange);
  218. }
  219. $.each(['btn'], function (k,cls) {
  220. $('.'+cls, el).one('propertychange', {cls:cls}, btnPropertyChange);
  221. });
  222. //-------------
  223. // table
  224. //-------------
  225. // fix table-hover effect
  226. $('table.table-hover', el).on('mouseenter', 'tr', function () {
  227. $(this).addClass('tr-hover');
  228. }).on('mouseleave', 'tr', function () {
  229. $(this).removeClass('tr-hover');
  230. });
  231. //-------------
  232. // form
  233. //-------------
  234. // fix input[type=xxx] selector
  235. $('input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"], input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"]', el).each(function () {
  236. var input = $(this);
  237. input.addClass('input-'+input.attr('type'));
  238. });
  239. // fix form-horizontal controls margin-left
  240. $('.form-horizontal .controls:first-child', el).addClass('controls-first-child');
  241. // fix .checkbox.inline
  242. $('.checkbox.inline', el).addClass('checkbox-inline');
  243. $('.radio.inline', el).addClass('radio-inline');
  244. // fix select[multiple], select[size]
  245. $('select[multiple]', el).addClass('select-multiple');
  246. $('select[size]', el).addClass('select-size');
  247. // fix tag[disabled]
  248. $('input[disabled], select[disabled], textarea[disabled]', el).each(function () {
  249. var self = $(this);
  250. self.addClass(self[0].tagName.toLowerCase()+'-disabled');
  251. });
  252. // $('input,select,textarea', el).on('propertychange', function() {
  253. // var self = $(this);
  254. // if (self.data('chgDisabled')) return;
  255. // var cls = self[0].tagName.toLowerCase();
  256. // // alert(self.attr('disabled'));
  257. // if (self.attr('disabled') && !self.hasClass(cls+'-disabled')) {
  258. // // alert('abc');
  259. // self.addClass(cls+'-disabled');
  260. // self.data('chgDisabled', true);
  261. // }
  262. // else if (!self.attr('disabled') && self.hasClass(cls+'-disabled')) {
  263. // self.removeClass(cls+'-disabled');
  264. // self.data('chgDisabled', true);
  265. // }
  266. // });
  267. // $('input,select,textarea', el).on('propertychange', function() {
  268. // var self = $(this);
  269. // if (self.data('chgReadonly')) return;
  270. // var cls = self[0].tagName.toLowerCase();
  271. // if (self.attr('readonly') && !self.hasClass(cls+'-readonly')) {
  272. // self.addClass(cls+'-readonly');
  273. // self.data('chgReadonly', true);
  274. // }
  275. // else if (typeof self.attr('readonly') == 'undefined' && self.hasClass(cls+'-readonly')) {
  276. // self.removeClass(cls+'-readonly');
  277. // self.data('chgReadonly', true);
  278. // }
  279. // });
  280. // fix tag[readonly]
  281. $('input[readonly], select[readonly], textarea[readonly]', el).each(function () {
  282. var self = $(this);
  283. self.addClass(self[0].tagName.toLowerCase()+'-readonly');
  284. });
  285. // fix input[type=xxx][disabled]
  286. $('input[type="radio"][disabled], input[type="checkbox"][disabled]', el).each(function () {
  287. var self = $(this);
  288. self.addClass(self.attr('type').toLowerCase()+'-disabled');
  289. });
  290. // fix input[type=xxx][readonly]
  291. $('input[type="radio"][readonly], input[type="checkbox"][readonly]', el).each(function () {
  292. var self = $(this);
  293. self.addClass(self.attr('type').toLowerCase()+'-readonly');
  294. });
  295. // fix.control-group.warning ...
  296. var ctlGrpTypeCls = ['warning','success','error','info'];
  297. $.each(ctlGrpTypeCls, function (k,v) {
  298. $('.control-group.'+v, el).addClass('control-group-'+v);
  299. });
  300. var controlGroupPropertyChange = function(e) {
  301. if(e.originalEvent.propertyName.toLowerCase() == 'classname') {
  302. var self = $(this);
  303. $.each(ctlGrpTypeCls, function (k,v) {
  304. var ieCls = 'control-group-'+v;
  305. if (self.hasClass(v)) {
  306. if (!self.hasClass(ieCls)) {
  307. self.addClass(ieCls);
  308. }
  309. }
  310. else {
  311. if (self.hasClass(ieCls)) {
  312. self.removeClass(ieCls);
  313. }
  314. }
  315. });
  316. }
  317. $(this).one('propertychange', controlGroupPropertyChange);
  318. };
  319. $('.control-group', el).one('propertychange', controlGroupPropertyChange);
  320. //-------------
  321. // popover
  322. //-------------
  323. // $('.popover .arrow', el).after('<span class="arrow-after"></span>');
  324. //-------------
  325. // pagination
  326. //-------------
  327. $('.pagination ul li:first-child', el).addClass('first-child');
  328. //-------------
  329. // icons
  330. //-------------
  331. $('[class^="icon-"],[class*=" icon-"]').each(function () {
  332. var self = $(this);
  333. if (!self.hasClass('icon-xxx')) {
  334. self.addClass('icon-xxx');
  335. self.css('background-position-y',
  336. (parseInt(self.css('background-position-y')) + 1)+'px');
  337. }
  338. });
  339. //-------------
  340. // carousel
  341. //-------------
  342. $('.carousel-control.left', el).removeClass('left').addClass('carousel-control-left');
  343. $('.carousel-control.right', el).removeClass('right').addClass('carousel-control-right');
  344. $('.carousel-caption').each(function() {
  345. var self = $(this);
  346. var padding = self.outerWidth() - self.width();
  347. self.width(self.parents('.carousel-inner .item').width() - padding);
  348. });
  349. }
  350. }
  351. $.bootstrapIE6 = bootstrapIE6;
  352. $(document).ready(function () {
  353. bootstrapIE6();
  354. });
  355. })(jQuery);