| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | /** |
| A | 2 | <b>Auto content padding on fixed navbar & breadcrumbs</b>. |
| 3 | Navbar's content and height is often predictable and when navbar is fixed we can add appropriate padding to content area using CSS. | |
| 4 | ||
| 5 | But when navbar is fixed and its content size and height is not predictable we may need to add the necessary padding to content area dynamically using Javascript. | |
| 6 | ||
| 7 | It's not often needed and you can have good results using CSS3 media queries to add necessary paddings based on window size. | |
| 8 | */ | |
| 9 | (function($ , undefined) { | |
| 10 | ||
| 11 | var navbar = $('.navbar').eq(0); | |
| 12 | var navbar_container = $('.navbar-container').eq(0); | |
| 13 | ||
| 14 | var sidebar = $('.sidebar').eq(0); | |
| 15 | ||
| 16 | var main_container = $('.main-container').get(0); | |
| 17 | ||
| 18 | var breadcrumbs = $('.breadcrumbs').eq(0); | |
| 19 | var page_content = $('.page-content').get(0); | |
| 20 | ||
| 21 | var default_padding = 8 | |
| 22 | ||
| 23 | if(navbar.length > 0) { | |
| 24 | $(window).on('resize.auto_padding', function() { | |
| 25 | if( navbar.css('position') == 'fixed' ) { | |
| 26 | var padding1 = !ace.vars['nav_collapse'] ? navbar.outerHeight() : navbar_container.outerHeight(); | |
| 27 | padding1 = parseInt(padding1); | |
| 28 | main_container.style.paddingTop = padding1 + 'px'; | |
| 29 | ||
| 30 | if(ace.vars['non_auto_fixed'] && sidebar.length > 0) { | |
| 31 | if(sidebar.css('position') == 'fixed') { | |
| 32 | sidebar.get(0).style.top = padding1 + 'px'; | |
| 33 | } | |
| 34 | else sidebar.get(0).style.top = ''; | |
| 35 | } | |
| 36 | ||
| 37 | if( breadcrumbs.length > 0 ) { | |
| 38 | if(breadcrumbs.css('position') == 'fixed') { | |
| 39 | var padding2 = default_padding + breadcrumbs.outerHeight() + parseInt(breadcrumbs.css('margin-top')); | |
| 40 | padding2 = parseInt(padding2); | |
| 41 | page_content.style['paddingTop'] = padding2 + 'px'; | |
| 42 | ||
| 43 | if(ace.vars['non_auto_fixed']) breadcrumbs.get(0).style.top = padding1 + 'px'; | |
| 44 | } else { | |
| 45 | page_content.style.paddingTop = ''; | |
| 46 | if(ace.vars['non_auto_fixed']) breadcrumbs.get(0).style.top = ''; | |
| 47 | } | |
| 48 | } | |
| 49 | } | |
| 50 | else { | |
| 51 | main_container.style.paddingTop = ''; | |
| 52 | page_content.style.paddingTop = ''; | |
| 53 | ||
| 54 | if(ace.vars['non_auto_fixed']) { | |
| 55 | if(sidebar.length > 0) { | |
| 56 | sidebar.get(0).style.top = ''; | |
| 57 | } | |
| 58 | if(breadcrumbs.length > 0) { | |
| 59 | breadcrumbs.get(0).style.top = ''; | |
| 60 | } | |
| 61 | } | |
| 62 | } | |
| 63 | }).triggerHandler('resize.auto_padding'); | |
| 64 | ||
| 65 | $(document).on('settings.ace.auto_padding', function(ev, event_name, event_val) { | |
| 66 | if(event_name == 'navbar_fixed' || event_name == 'breadcrumbs_fixed') { | |
| 67 | if(ace.vars['webkit']) { | |
| 68 | //force new 'css position' values to kick in | |
| 69 | navbar.get(0).offsetHeight; | |
| 70 | if(breadcrumbs.length > 0) breadcrumbs.get(0).offsetHeight; | |
| 71 | } | |
| 72 | $(window).triggerHandler('resize.auto_padding'); | |
| 73 | } | |
| 74 | }); | |
| 75 | ||
| 76 | /**$('#skin-colorpicker').on('change', function() { | |
| 77 | $(window).triggerHandler('resize.auto_padding'); | |
| 78 | });*/ | |
| 79 | } | |
| 80 | ||
| 81 | })(window.jQuery); | |
