堆棧內存溢出
  簡體   English   中英

如何在母版頁和內容（子）頁中包含（引用）CSS Javascript jQuery

[英]How to include (referencing) CSS Javascript jQuery in master page and content (child) page

 原文  2014-02-20 16:05:10  5   1    c#/ jquery/ asp.net/ css/ master-pages

問題描述

我有一個HTML模板，每個頁面中都有很多jQuery，CSS引用，我嘗試使用master，但是很難弄清楚放置哪些引用以及將這些引用放在哪里，好是模板告訴我們哪些是全局級別的，哪些是頁面級別的要求。

我試圖將那些全局的東西放到母版頁中並將那些子事物放到內容頁中，但是它們不起作用（顯然，head標簽中的“ STYLE ”是有效的，而body標簽底部的那些“ SCRIPT ”卻不起作用（我使用了“控制台” “在網絡瀏覽器的開發人員模式下，並收到“ Uncaught ReferenceError：未定義jQuery ”），還有一件事是在SCRIPT和STYLE中都有很多冗余引用，請建議我找到構建母版頁的最佳方法，子頁面，如果您能給我一個很好的母版頁和內容頁結構示例。

以下是2個原始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>

1 個解決方案

解決方案1
 0 已采納  2014-02-20 19:14:17

最大的問題是，我不知道代碼的順序的確很重要，大的事情，無論你在哪里把那些作風和腳本主機或子頁面，他們必須在准確順序（例如：全球性的東西必須在這些頁面之前提交級內容...），就像在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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在網頁中隱藏母版頁內容 如何為內容頁面自定義母版頁代碼 如何從母版頁更新內容頁？ 如何在內容頁面后添加母版頁 在子頁面中覆蓋母版頁CSS div寬度 如何使用Javascript或JQuery獲取頁面內容 母版頁中的JQuery菜單在每個子頁中重新加載 我如何從內容頁面到母版頁面加載創建javascript 內容頁面上的母版頁控件 主頁面和內容頁面中的ScriptManager
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM