3.5 horizon/_scripts.html · openstack主题模版开发

# horizon/_scripts.html 　　其对应的路径为： horizon\openstack_dashboard\templates\horizon\_scripts.html。将其复制到主题目录中：horizon\openstack_dashboard\themes\maintenance\templates\horizon\_scripts.html。　　按照之前的方便，不压缩JS代码。后发现里面有一百来个js代码文件，其数量有点吓人。但其大部分为是基于AngularJS写的JS文件。如 ~~~ ....... <script src="/static/app/core/metadata/modal/modal.module.js"></script> <script src="/static/app/core/openstack-service-api/openstack-service-api.module.js"></script> <script src="/static/app/core/workflow/workflow.module.js"></script> <script src="/static/app/resources/resources.module.js"></script> <script src="/static/app/tech-debt/tech-debt.module.js"></script> <script src="/static/app/core/cloud-services/hz-if-cinder-extensions.directive.js"></script> <script src="/static/app/core/cloud-services/hz-if-neutron-extensions.directive.js"></script> <script src="/static/app/core/cloud-services/hz-if-nova-extensions.directive.js"></script> <script src="/static/app/core/cloud-services/hz-if-policies.directive.js"></script> <script src="/static/app/core/cloud-services/hz-if-services.directive.js"></script> <script src="/static/app/core/cloud-services/hz-if-settings.directive.js"></script> <script src="/static/app/core/cloud-services/hz-if-version.directive.js"></script> <script src="/static/app/core/images/actions/create-volume.service.js"></script> ...... ~~~ ~~~ <script type="text/javascript" id="/static/framework/widgets/load-edit/load-edit.html"> angular .module('horizon.app') .run(['$templateCache', function ($templateCache) { $templateCache.put( "/static/framework/widgets/load-edit/load-edit.html", "<div class=\"form-group\" ng-class=\"{ \'has-error\': scriptLength >= config.MAX_SCRIPT_SIZE }\">\n <label for=\"customization-script\" class=\"control-label\">\n <span translate>Customization Script</span>\n <span ng-show=\"scriptModified\"\n translate>\n (Modified)</span>\n </label>\n <span class=\"pull-right\" ng-class=\"{ \'text-danger\': scriptLength >= config.MAX_SCRIPT_SIZE }\">\n <span translate translate-comment=\"Strings between {$ and $} should be left untranslated.\">\n Script size: {$ (scriptLength || 0) | bytes $} of {$ config.MAX_SCRIPT_SIZE | bytes $}\n </span>\n </span>\n <textarea class=\"form-control\"\n rows=\"8\"\n id=\"customization-script\"\n name=\"customization-script\"\n ng-maxlength=\"config.MAX_SCRIPT_SIZE\"\n ng-model=\"textContent\">\n </textarea>\n <span class=\"help-block\"\n ng-show=\"scriptLength >= config.MAX_SCRIPT_SIZE\"\n translate>\n The script is larger than the maximum size\n </span>\n</div>\n\n<div class=\"form-group\" ng-show=\"config.fileApiSupported\">\n <label for=\"load-script\" translate>Load script from a file</label>\n <input id=\"load-script\" type=\"file\">\n</div>\n" ); }]); </script> <script type="text/javascript" id="/static/framework/widgets/magic-search/hz-magic-search-bar.html"> angular .module('horizon.app') .run(['$templateCache', function ($templateCache) { $templateCache.put( "/static/framework/widgets/magic-search/hz-magic-search-bar.html", "<div class=\"form-group has-feedback magic-search-bar\">\n <div class=\"input-group\">\n <span class=\"input-group-addon\">\n <span class=\"fa fa-search\"></span>\n </span>\n <magic-search\n ng-if=\"filterStrings && filterFacets\"\n class=\"form-control\"\n strings=\"filterStrings\"\n facets=\"{{ filterFacets }}\">\n </magic-search>\n <span ng-if=\"showSettings\" class=\"input-group-btn\" ng-click=\"searchSettingsCallback()\">\n <button class=\"btn btn-default\" type=\"button\">\n <span class=\"fa fa-cog fa-lg\"></span>\n </button>\n </span>\n </div>\n</div>\n" ); }]); </script> <script type="text/javascript" id="/static/framework/widgets/magic-search/magic-search.html"> angular .module('horizon.app') .run(['$templateCache', function ($templateCache) { $templateCache.put( "/static/framework/widgets/magic-search/magic-search.html", "\n<div class=\"magic-search\">\n <div class=\"search-bar\">\n <span class=\"fi-filter fa fa-search go\"></span>\n <span class=\"search-main-area\">\n <span class=\"radius secondary item\"\n ng-repeat=\"facet in ctrl.currentSearch\" ng-cloak=\"cloak\" ng-class=\"{\'server-side-item\': facet.isServer}\">\n <span data-toggle=\"tooltip\" title=\"{$ ::strings.serverFacet $}\"\n ng-class=\"{\'fa fa-server\': facet.isServer}\"></span>\n <span data-toggle=\"tooltip\" title=\"{$ ::strings.clientFacet $}\"\n ng-class=\"{\'fa fa-desktop\': !facet.isServer}\"></span>\n <span class=\"magic-search-result-title\">{$ ::facet.label[0] $}:</span>\n <span class=\"magic-search-result-string\">{$ ::facet.label[1] $}</span>\n <a class=\"remove\" ng-click=\"ctrl.removeFacet($index, $event)\" title=\"{$ ::strings.remove $}\">\n <span class=\"fi-x fa fa-times\"></span>\n </a>\n </span>\n <span class=\"search-selected\" ng-cloak=\"\" ng-show=\"ctrl.facetSelected\">\n {$ ctrl.facetSelected.label[0] $}:\n </span>\n \n <span class=\"search-entry\" dropdown is-open=\"ctrl.isMenuOpen\">\n <input class=\"search-input\" type=\"text\" dropdown-toggle\n placeholder=\"{$ strings.prompt $}\" autocomplete=\"off\" />\n <ul class=\"facet-drop f-dropdown dropdown-menu\" data-dropdown-content=\"\"\n ng-if=\"ctrl.filteredObj.length > 0\">\n <li ng-repeat=\"facet in ctrl.filteredObj\" ng-show=\"!ctrl.facetSelected\">\n <a ng-click=\"ctrl.facetClicked($index, $event, facet.name)\"\n ng-show=\"!ctrl.isMatchLabel(facet.label)\">{$ ::facet.label $}</a>\n <a ng-click=\"ctrl.facetClicked($index, $event, facet.name)\"\n ng-show=\"ctrl.isMatchLabel(facet.label)\">\n {$ ::facet.label[0] $}<span class=\"match\">{$ ::facet.label[1] $}</span>{$ ::facet.label[2] $}\n </a>\n </li>\n <li ng-repeat=\"option in ctrl.filteredOptions\" ng-show=\"ctrl.facetSelected\">\n <a ng-click=\"ctrl.optionClicked($index, $event, option.key)\"\n ng-show=\"!ctrl.isMatchLabel(option.label)\">\n {$ option.label $}\n </a>\n <a ng-click=\"ctrl.optionClicked($index, $event, option.key)\"\n ng-show=\"ctrl.isMatchLabel(option.label)\">\n {$ ::option.label[0] $}<span class=\"match\">{$ ::option.label[1] $}</span>{$ ::option.label[2] $}\n </a>\n </li>\n </ul>\n </span>\n </span>\n <a class=\"magic-search-clear\" ng-click=\"ctrl.clearSearch()\" title=\"{$ ::strings.cancel $}\">\n <span class=\"fi-x fa fa-times cancel\"></span>\n </a>\n </div>\n</div>\n" ); }]); </script> ~~~ 　　看到这代码头晕吧。其实恶补一下AngularJS的知识，就没什么了。以后具体需求再具体分析就行了。