1. 首頁
  2. 問答
  3. 如何在主頁面和內容（子頁面）頁面中包含（引用）CSS Javascript jQuery

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

2014-02-20 44 views
0

我有一個HTML模板，它在每個頁面中都有很多jQuery，CSS引用，我試圖用master但很難弄清楚應該放置什麼以及在哪裏放置這些引用，好處是該模板告訴我們哪些是全局級別的，哪些是頁面級別的需求。如何在主頁面和內容（子頁面）頁面中包含（引用）CSS Javascript jQuery

我試圖把在母版頁這些全球的事情，在內容頁的子事情，但他們沒有在頭標記工作（顯然是那些「風格」的工作，但那些「SCRIPT」在身體的底部標籤不是（我在web瀏覽器的開發人員模式中使用「控制檯」，並得到「未捕獲的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>

來源

2014-02-20 Ronaldinho Learn Coding

+0

你只是向我們展示了一些'HTML'標記，這裏是你的實際'.aspx'母版頁和內容頁，以便我們能夠看到你有什麼嘗試??。 – rommel

+0

您的聯繫人頁面是否繼承了您的母版頁？ Inherits =「MyMAster.aspx」我假設你使用的是asp？ – KevDevMan

+0

抱歉，由於缺乏注意力，過去一小時我試圖修復它，現在工作正常。我正要顯示母版頁標記代碼，但由於我不斷修改它，錯誤也在變化。最大的問題是，我沒有意識到代碼的ORDER是否MATTER，BIG MATTER，不管你把這些STYLE和SCRIPT放在主頁面或子頁面的哪裏，它們必須按照正確的順序排列（例如：全局事物必須在那些頁面之前呈現水平的東西......），就像你的HTML模板一樣。我跟着它，現在它工作。 –

回答

0

最大的問題是，我不知道訂購代碼做的事情，大事情，無論身在何處你把那些STYLE和SCRIPT在主頁面或子頁面中，它們必須按照正確的順序排列（例如：全局事物必須在頁面級別的事物之前呈現），就像在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>

來源

2014-02-20 19:14:17

相關問題

 相關問題