web-pc项目中index页面分析

最新推荐文章于 2024-03-30 18:55:28 发布

weixin_30772105

最新推荐文章于 2024-03-30 18:55:28 发布

阅读量697

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/ratels/p/10320441.html

版权

先上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>&nbsp;阅读更多博客</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>&nbsp;阅读更多代码</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 对象，大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性。

$(function() { })是简写，$(function() { });=$(document).ready(function() { })，用来在DOM加载完成（文档载入完毕）之后执行一系列预先定义好的函数。与window.onload = function() { }很像，但是执行的时间不一样，$(function() { });是页面框架（页面DOM）加载完成就执行，window.onload = function() { }是页面中所有内容（页面DOM和图片）加载完成才执行。

转载于:https://www.cnblogs.com/ratels/p/10320441.html

weixin_30772105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web-pc项目中index页面分析

先上HTML代码：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title&gt...
复制链接

扫一扫