web-pc項目中index頁面分析
阿新 • • 發佈：2019-01-25
實現 req row -c anim 易用 更新 Language XML
先上HTML代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>何明勝的個人網站</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="歡迎來到何明勝的個人網站.本站主要用於記錄和分享本人的學習心得和編程經驗,並分享常見可復用代碼、推薦書籍以及軟件等資源.本站源碼已托管github,歡迎訪問：https://github.com/HelloHusen/web" /> <meta name="keywords" content="何明勝,何明勝的個人網站,何明勝的博客,一格的程序人生" /> <meta name="author" content="何明勝,一格"> <!-- 網站圖標 --> <link rel="shortcut icon"href="/images/favicon.ico"> <!-- jQuery --> <script src="/plugins/jquery/js/jquery-3.2.1.min.js"></script> <!-- 最新更新文章簡介 --> <link rel="stylesheet" href="/css/index/article-profile.css"> <!-- 最新更新文章簡介 --> <link rel="stylesheet" href="/css/index/index.css"> <!--加載最新3篇博客 --> <script src="/js/index/latestblog.js"></script> <!-- 加載最近3篇代碼 --> <script src="/js/index/latestcode.js"></script> <!-- js文件 --> <script src="/js/index/index.js"></script> </head> <body> <input id="menuBarNo" type="hidden" value="0" /> <div id="fh5co-page"> <!-- 左側導航 --> <!-- 中間內容 --> <div id="fh5co-main"> <!-- 首頁輪播 --> <div id="indexCarousel" class="carousel slide carousel-height carousel-margin"> <!-- 輪播（Carousel）指標 --> <ol class="carousel-indicators"> <li data-target="#indexCarousel" data-slide-to="0" class="active"></li> <li data-target="#indexCarousel" data-slide-to="1"></li> <li data-target="#indexCarousel" data-slide-to="2"></li> </ol> <!-- 輪播（Carousel）項目 --> <div class="carousel-inner"> <div class="item carousel-height active"> <img src="/images/carousel/casel-1.jpg" alt="First slide"> </div> <div class="item carousel-height"> <img src="/images/carousel/casel-2.jpg" alt="Second slide"> </div> <div class="item carousel-height"> <img src="/images/carousel/casel-3.jpg" alt="Third slide"> </div> </div> <!-- 輪播（Carousel）導航 --> <a class="left carousel-control" href="#indexCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#indexCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="fh5co-narrow-content article-box-div"> <h2 class="fh5co-heading article-bar" data-animate-effect="fadeInLeft">最近更新的博客</h2> <a href="/module/blog.hms" class="read-more-article"><span class="glyphicon glyphicon-hand-right"></span> 閱讀更多博客</a> <div id="latestBlog" class="row"></div> </div> <hr class="index-hr" /> <div class="fh5co-narrow-content article-box-div"> <h2 class="fh5co-heading article-bar" data-animate-effect="fadeInLeft">最近更新的代碼</h2> <a href="/module/code.hms" class="read-more-article"><span class="glyphicon glyphicon-hand-right"></span> 閱讀更多代碼</a> <div id="latestCode" class="row"></div> </div> <!-- 每日一言 --> <script src="https://api.lwl12.com/hitokoto/main/get?encode=js&charset=utf-8"></script> <div id="lwlhitokoto"> <script> lwlhitokoto(); </script> </div> </div> <!-- 右側導航 --> </div> </body> </html>
再上JavaScript代碼：
1 /** 2 * 首頁 3 * 4 * @author 何明勝 5 * 6 * 2017年12月15日 7 */ 8 9 /** 加載插件 * */ 10 $.ajax({ 11 url : ‘/plugins/plugins.html‘, // 這裏是靜態頁的地址 12 async : false, 13 type : ‘GET‘, // 靜態頁用get方法，否則服務器會拋出405錯誤 14 success : function(data) { 15 $($(‘head‘)[0]).find(‘script:first‘).after(data); 16 } 17 }); 18 19 $(function() { 20 /** 頂部導航欄 **/ 21 $.ajax({ 22 url : ‘/module/navigation/topbar.html‘, // 這裏是靜態頁的地址 23 async : false, 24 type : ‘GET‘, // 靜態頁用get方法，否則服務器會拋出405錯誤 25 success : function(data) { 26 $(‘#menuBarNo‘).before(data); 27 } 28 }); 29 30 /** 登錄控制 **/ 31 $.ajax({ 32 url : ‘/module/login/login.html‘, // 這裏是靜態頁的地址 33 async : false, 34 type : ‘GET‘, // 靜態頁用get方法，否則服務器會拋出405錯誤 35 success : function(data) { 36 $(‘#menuBarNo‘).before(data); 37 } 38 }); 39 40 /** 左側導航欄 **/ 41 $.ajax({ 42 url : ‘/module/navigation/leftbar.html‘, // 這裏是靜態頁的地址 43 async : false, 44 type : ‘GET‘, // 靜態頁用get方法，否則服務器會拋出405錯誤 45 success : function(data) { 46 $(‘#fh5co-main‘).before(data); 47 } 48 }); 49 50 /** 右側導航欄 **/ 51 $.ajax({ 52 url : ‘/module/navigation/rightbar.html‘, // 這裏是靜態頁的地址 53 async : false, 54 type : ‘GET‘, // 靜態頁用get方法，否則服務器會拋出405錯誤 55 success : function(data) { 56 $(‘#fh5co-main‘).after(data); 57 } 58 }); 59 }); 60 61 $(document).ready(function() { 62 $(‘#indexCarousel‘).carousel({ 63 interval : 3000 64 });// 每隔3秒自動輪播 65 });
上述JS代碼中，包含三個重要的函數 $.ajax( )、$(function() { })、$(document).ready(function() { }。
$.ajax() 方法通過 HTTP 請求加載遠程數據，該方法是 jQuery 底層 AJAX 實現，簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其創建的 XMLHttpRequest 對象，大多數情況下無需直接操作該函數，除非需要操作不常用的選項，以獲得更多的靈活性。
web-pc項目中index頁面分析