Question

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

这是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和一个脚本部分来加载脚本文件。在我的单页实现中，我添加了这样的部分：

 @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(){}功能中。

Answer 1

我做了这个工作

我穿上包含所有向导的主div：

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

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

$（＆＃39;＃的SmartWizard＆＃39）。CSS（＆＃39;能见度＆＃39;＆＃39;可见＆＃39）;

我甚至试过＆＃34;切换＆＃34;或＆＃34;显示＆＃34;但这是让这个技巧有效的唯一方法......所以现在页面是空白的，然后用完整的向导渲染！

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

1 个答案: