Как включить (сделать ссылку) CSS Javascript jQuery на главную и дочернюю страницы

0

У меня есть HTML-шаблон, на котором есть много ссылок jQuery, CSS на каждой странице, я пытаюсь использовать мастера, но мне сложно найти, что положить и куда помещать эти ссылки, хорошо, что шаблон сообщает нам которые являются глобальным уровнем и которые являются требованиями к уровню страницы.

Я попытался поместить эти глобальные вещи в главную страницу и те вспомогательные вещи на странице контента, но они не сработали (по-видимому, эти " STYLE " в главном теге работают, но те " SCRIPT " в нижней части тега тела не используются (я использовал "консоль" "в режиме разработчика веб-браузера и получил" Uncaught ReferenceError: jQuery не определен "), еще одна вещь - есть много избыточных ссылок как в SCRIPT, так и в STYLE, пожалуйста, посоветуйте мне найти лучший способ для создания главной страницы и child page, если вы можете дать мне пример структуры на главной странице и странице контента, которая была бы замечательной.

Вот пример из двух исходных страниц шаблона HTML: (я удалил ненужные части тела), чтобы вы могли понять, что я пытаюсь архивировать.

homepage.html

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <title>Home</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />

   <!-- BEGIN GLOBAL MANDATORY STYLES -->          
   <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
   <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
   <!-- END GLOBAL MANDATORY STYLES -->

   <!-- BEGIN PAGE LEVEL PLUGIN STYLES --> 
   <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" />              
   <link rel="stylesheet" href="assets/plugins/revolution_slider/css/rs-style.css" media="screen">
   <link rel="stylesheet" href="assets/plugins/revolution_slider/rs-plugin/css/settings.css" media="screen"> 
   <link href="assets/plugins/bxslider/jquery.bxslider.css" rel="stylesheet" />                
   <!-- END PAGE LEVEL PLUGIN STYLES -->

   <!-- BEGIN THEME STYLES --> 
   <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/themes/blue.css" rel="stylesheet" type="text/css" id="style_color"/>
   <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
   <!-- END THEME STYLES -->

   <link rel="shortcut icon" href="favicon.ico" />
</head>
<!-- END HEAD -->

<!-- BEGIN BODY -->
<body>   

    <!-- SOME BODY CONTENTS -->

    <!-- Load javascripts at bottom, this will reduce page load time -->
    <!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
    <!--[if lt IE 9]>
    <script src="assets/plugins/respond.min.js"></script>  
    <![endif]-->  
    <script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>      
    <script type="text/javascript" src="assets/plugins/hover-dropdown.js"></script>
    <script type="text/javascript" src="assets/plugins/back-to-top.js"></script>    
    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
    <script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>  
    <script type="text/javascript" src="assets/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="assets/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.revolution.min.js"></script> 
    <script type="text/javascript" src="assets/plugins/bxslider/jquery.bxslider.min.js"></script>
    <script src="assets/scripts/app.js"></script>
    <script src="assets/scripts/index.js"></script>    
    <script type="text/javascript">
        jQuery(document).ready(function() {
            App.init();    
            App.initBxSlider();
            Index.initRevolutionSlider();                    
        });
    </script>
    <!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>

contact.html

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <title>Contacts</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />

   <!-- BEGIN GLOBAL MANDATORY STYLES -->          
   <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
   <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
   <!-- END GLOBAL MANDATORY STYLES -->

   <!-- BEGIN PAGE LEVEL PLUGIN STYLES --> 
   <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" />               
   <!-- END PAGE LEVEL PLUGIN STYLES -->

   <!-- BEGIN THEME STYLES --> 
   <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/themes/blue.css" rel="stylesheet" type="text/css" id="style_color"/>
   <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
   <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
   <!-- END THEME STYLES -->

   <link rel="shortcut icon" href="favicon.ico" />
</head>
<!-- END HEAD -->

<!-- BEGIN BODY -->
<body>

    <!-- SOME BODY CONTENTS -->

    <!-- Load javascripts at bottom, this will reduce page load time -->
    <!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
    <!--[if lt IE 9]>
    <script src="assets/plugins/respond.min.js"></script>  
    <![endif]-->  
    <script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>      
    <script type="text/javascript" src="assets/plugins/hover-dropdown.js"></script>
    <script type="text/javascript" src="assets/plugins/back-to-top.js"></script>    
    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
    <script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>

    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    <script src="assets/plugins/gmaps/gmaps.js" type="text/javascript"></script>
    <script src="assets/scripts/contact-us.js"></script>  
    <script src="assets/scripts/app.js"></script>  
    <script type="text/javascript">
        jQuery(document).ready(function() {    
           App.init();
           ContactUs.init();
        });
    </script>
    <!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>
  • 0
    Вы только показали нам некоторую HTML разметку, где находятся ваша фактическая главная страница .aspx и страница содержимого, чтобы мы могли увидеть, что вы пробовали ??.
  • 0
    Ваша страница контактов наследует вашу главную страницу? Inherits = "MyMAster.aspx" Я предполагаю, что вы используете ASP?
Показать ещё 1 комментарий
Теги:
master-pages

1 ответ

0
Лучший ответ

БОЛЬШАЯ проблема в том, что я НЕ понял ПОРЯДОК кодов MATTER, BIG MATTER, независимо от того, где вы помещаете эти STYLE и SCRIPT на главную или дочернюю страницу, они должны быть в точно упорядоченном порядке (например: глобальные вещи должны быть представлены до этой страницы -level things...), как в вашем шаблоне HTML. Я последовал за ним, и он РАБОТАЕТ сейчас.

Вот базовая структура главной страницы, которую я сделал:

<!-- BEGIN HEAD -->
<head id="Head1" runat="server">

    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="~/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="~/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- END GLOBAL MANDATORY STYLES -->

    <asp:ContentPlaceHolder ID="Head" runat="server">

      //Put your PAGE REQUIRED STYLE HERE in your content (child page)

    </asp:ContentPlaceHolder>

    <!-- BEGIN THEME STYLES -->
    <link href="~/assets/css/style-metronic.css" rel="stylesheet" type="text/css" />
    <link href="~/assets/css/style.css" rel="stylesheet" type="text/css" />
    <link href="~/assets/css/themes/red.css" rel="stylesheet" type="text/css" id="style_color" />
    <link href="~/assets/css/style-responsive.css" rel="stylesheet" type="text/css" />
    <link href="~/assets/css/custom.css" rel="stylesheet" type="text/css" />
    <!-- END THEME STYLES -->

    <link rel="shortcut icon" href="favicon.ico" />

    <!-- END HEAD -->
</head>

<!-- BEGIN BODY -->
<body>

    // PUT WHAT EVER YOU WANT TO PUT HERE
    // PUT WHAT EVER YOU WANT TO PUT HERE

    <!-- Load javascripts at bottom, this will reduce page load time -->
    <!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
    <!--[if lt IE 9]>
    <script src="/assets/plugins/respond.min.js"></script>  
    <![endif]-->
    <script src="/assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="/assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="/assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/assets/plugins/hover-dropdown.js"></script>
    <script type="text/javascript" src="/assets/plugins/back-to-top.js"></script>
    <!-- END CORE PLUGINS -->

    <div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">

            //Put your PAGE REQUIRED SCRIPT HERE in your content (child page)

        </asp:ContentPlaceHolder>
    </div>

    // PUT WHAT EVER YOU WANT TO PUT HERE
    // PUT WHAT EVER YOU WANT TO PUT HERE

</body>
<!-- END BODY -->
</html>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню