为gentelella 模板加载脚本文件的正确顺序答案

【问题标题】：Correct order for script files loading for gentelella template为gentelella 模板加载脚本文件的正确顺序
【发布时间】：2018-09-08 06:41:15
【问题描述】：

我很困惑如何解决这个问题

这是 Gentelella 布局模板：

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Gentellela Alela! | </title>
        <!-- Bootstrap -->
        <link href="{{ asset("css/bootstrap.min.css") }}" rel="stylesheet">
        <!-- Font Awesome -->
        <link href="{{ asset("css/font-awesome.min.css") }}" rel="stylesheet">
        <!-- Custom Theme Style -->
        <link href="{{ asset("css/gentelella.min.css") }}" rel="stylesheet">
        @stack('stylesheets')
    </head>
    <body class="nav-md">
        <div class="container body">
            <div class="main_container">
                @include('includes/sidebar')
                @include('includes/topbar')
                @yield('main_container')
                @include('includes/footer')
            </div>
        </div>
        <!-- jQuery -->
        <script src="{{ asset("js/jquery.min.js") }}"></script>
        <!-- Bootstrap -->
        <script src="{{ asset("js/bootstrap.min.js") }}"></script>
        <!-- Custom Theme Scripts -->
        <script src="{{ asset("js/gentelella.min.js") }}"></script>
        @stack('scripts')
    </body>
</html>

如您所见，有一个加载 css 的 head 部分和一个加载脚本文件的 footer 部分。在我的单页实现中，我放了一个这样的部分：

 @push('scripts')
    <script>
        var cancButton='{!! __('messages.tempCreat_txtCanc') !!}';
        var nextButton='{!! __('messages.tempCreat_txthNext') !!}';
        var prevButton='{!! __('messages.tempCreat_txtPrev') !!}';
    </script>
    <script src="{{asset('js/jquery-ui.js')}}"></script>
    <script type="text/javascript" src="{{asset('/js/mxClient.js')}}"></script>
    <script type="text/javascript" src="{{asset("js/app.js")}}"></script>
    <script src={{asset('/js/bootstrap2-toggle.min.js')}}></script>
    <script src="{{asset("js/jquery.smartWizard.js")}}"></script>
    <script  src="{{ asset("css/ie10-viewport-bug-workaround.js") }}"></script>
    <script type="text/javascript" src="{{ asset("js/xml2json.js") }}"></script>
    <script src={{asset('/js/stepper2.js')}}></script>
    <script src={{asset('/js/validationJquery.js')}}></script>
    <script src="{{asset('js/funzioniEditor.js')}}"></script>
    <script src="{{ asset('js/jqueryEditorFunction.js') }}"></script>
    @endpush

您可以在页面底部的stack('script') 部分看到“我推送”文件。

问题出在插件上：

<script src="{{asset("js/jquery.smartWizard.js")}}"></script>

那是因为你在加载插件文件之前看到的是原始 html……这不好！如果我把东西移到头部也是一个问题，因为侧边栏菜单会神奇地停止工作......

渲染智能向导的函数还在$(document).ready(function(){}函数中。

【问题讨论】：

你可能想看看你所有的单引号和双引号。它们都是混合的，有些没有按应有的方式关闭。
第二个代码sn-p的src属性中少了几个引号。
我在视图中使用@extends('layouts.blank') 并在扩展后声明Js库
单或双 ' 和 " 都可以正常工作...并已加载。我找到了解决方法，但它不是解决方法！稍后会发布代码...

标签： php jquery html smart-wizard gentelella

【解决方案1】：

我做了这个解决方法

我在包含所有向导的主 div 上放了这个：

                    <div id="smartwizard" style="visibility: hidden;">

然后在我调用的渲染向导函数之后：

$('#smartwizard').css('visibility','visible');

我什至尝试过“切换”或“显示”，但这是使技巧起作用的唯一方法......所以现在页面是空白的，然后使用完整的向导呈现！

【讨论】：