# 引入ACE主题的JS文件 　　在horizon\openstack_dashboard\themes\maintenance\templates\horizon\_conf.html 后添加如下代码： ~~~ <!-- ace settings handler --> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace-extra.js"></script> <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --> <!--[if lte IE 8]> <script src="{{ STATIC_URL }}horizon/lib/ace/js/html5shiv.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/respond.js"></script> <![endif]--> ~~~ 　　在horizon\openstack_dashboard\themes\maintenance\templates\horizon\_scripts.html 里添加如下代码： ~~~ <!-- ace scripts start--> <!--[if !IE]> --> <script type="text/javascript"> window.jQuery || document.write("<script src='{{ STATIC_URL }}horizon/lib/ace/js/jquery.js'>"+"<"+"/script>"); </script> <!-- <![endif]--> <!--[if IE]> <script type="text/javascript"> window.jQuery || document.write("<script src='{{ STATIC_URL }}horizon/lib/ace/js/jquery1x.js'>"+"<"+"/script>"); </script> <![endif]--> <script type="text/javascript"> if('ontouchstart' in document.documentElement) document.write("<script src='{{ STATIC_URL }}horizon/lib/ace/js/jquery.mobile.custom.js'>"+"<"+"/script>"); </script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/bootstrap.js"></script> <!-- page specific plugin scripts --> <!-- ace scripts --> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/elements.scroller.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/elements.colorpicker.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/elements.fileinput.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/elements.typeahead.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/elements.wysiwyg.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/elements.spinner.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/elements.treeview.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/elements.wizard.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/elements.aside.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/ace.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/ace.ajax-content.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/ace.touch-drag.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/ace.sidebar.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/ace.sidebar-scroll-1.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/ace.submenu-hover.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/ace.widget-box.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/ace.settings.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/ace.settings-rtl.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/ace.settings-skin.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/ace.widget-on-reload.js"></script> <script src="{{ STATIC_URL }}horizon/lib/ace/js/ace/ace.searchbox-autocomplete.js"></script> <!-- inline scripts related to this page --> <script type="text/javascript"> jQuery(function($) { var $sidebar = $('.sidebar').eq(0); if( !$sidebar.hasClass('h-sidebar') ) return; $(document).on('settings.ace.top_menu' , function(ev, event_name, fixed) { if( event_name !== 'sidebar_fixed' ) return; var sidebar = $sidebar.get(0); var $window = $(window); //return if sidebar is not fixed or in mobile view mode var sidebar_vars = $sidebar.ace_sidebar('vars'); if( !fixed || ( sidebar_vars['mobile_view'] || sidebar_vars['collapsible'] ) ) { $sidebar.removeClass('lower-highlight'); //restore original, default marginTop sidebar.style.marginTop = ''; $window.off('scroll.ace.top_menu') return; } var done = false; $window.on('scroll.ace.top_menu', function(e) { var scroll = $window.scrollTop(); scroll = parseInt(scroll / 4);//move the menu up 1px for every 4px of document scrolling if (scroll > 17) scroll = 17; if (scroll > 16) { if(!done) { $sidebar.addClass('lower-highlight'); done = true; } } else { if(done) { $sidebar.removeClass('lower-highlight'); done = false; } } sidebar.style['marginTop'] = (17-scroll)+'px'; }).triggerHandler('scroll.ace.top_menu'); }).triggerHandler('settings.ace.top_menu', ['sidebar_fixed' , $sidebar.hasClass('sidebar-fixed')]); $(window).on('resize.ace.top_menu', function() { $(document).triggerHandler('settings.ace.top_menu', ['sidebar_fixed' , $sidebar.hasClass('sidebar-fixed')]); }); }); </script> <!-- ace scripts end--> ~~~