pageload.js Version 2.0.0

時間 2019-11-17

標籤 pageload.js pageload version 2.0.0 欄目 JavaScript 简体版

原文原文鏈接

#Pageload.js Pageload.js是基於Bootstrap3,核心思路是把頁面分紅固定部分,對這些部分分別進行加載.下降前段頁面負載狀況,並對獨立編輯頁面,提升效率. #優勢 1.動態加載頁面,下降服務器請求內容規模
2.能夠基於Boostrap3獨立設計內容頁,下降頁面開發人員工做量.
3.模塊化分離javascript

#缺點 1.不能經過URL直接定位內容頁css

#TODO 1.屢次點擊重複加載
2.長時間loading時顯示加載進度或者提示html

#Frame頁使用java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 移動自適應 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>

    <!-- Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="resources/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="resources/normalize/3.0.2/normalize.css">

    <link rel="stylesheet" href="resources/AdminLTE/theme.css">
    <!--JQuery-->
    <script src="resources/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap 核心 JavaScript 文件 -->
    <script src="resources/bootstrap/3.3.5/js/bootstrap.js"></script>
    <!-- 頁面加載 -->
    <script src="resources/pageload/2.0.0/pageload.js"></script>
</head>
<body>
<div id="header" value="views/homepage/header.html" ></div>

<div class="wrapper">
    <div id="context" value="views/auth/login.html" ></div>
</div>

<div id="footer" value="views/homepage/footer.html" ></div>

</body>
</html>
<!-- 頁面動態內容加載 -->
<script language="javascript" type="text/JavaScript">
    //頁面準備就緒
    $(document).ready(function () {
        console.log('Html home_frame.html javascript run Debug:document loading...');

        frameload($('div#header'));
//        frameload($('div#sidebar'));
        frameload($('div#context'));
        frameload($('div#footer'));

        console.log('Html home_frame.html javascript run Debug:document load complete');
    });
</script>

#加載頁面並自動激活選項jquery

<meta charset="utf-8">
<!--<p>views/homepage/header.html</p>-->
<nav class="navbar navbar-default navbar-static-top transparent" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-menu">
                <span class="sr-only">Toggle navigation</span>
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand" href="/"><strong>Try</strong> System</a>
        </div>

        <div class="collapse navbar-collapse" id="collapse-menu">
            <ul class="nav navbar-nav navbar-right">
                <li >
                    <a href="/">首頁</a>
                </li>
                <li>
                    <a href="http://my.oschina.net/hava/blog" value="">關於咱們</a>
                </li>
                <li class="active">
                    <a href="#" value="views/auth/login.html" onclick="activeload(this)">登錄</a>
                </li>
                <li>
                    <a href="#" value="views/auth/register.html" onclick="activeload(this)">註冊</a>
                </li>
            </ul>
            <!-- /.navbar-nav -->
        </div>
        <!-- /.navbar-collapse -->
    </div>
</nav><!--/.navbar-->

#源代碼ajax

//關閉AJAX相應的緩存
$.ajaxSetup ({
    cache: false
});

//this active is base bootstrap
function activeload(my)
{
    console.log("JS pageload.js function active Debug:my == this");
    console.log("JS pageload.js function active Debug:[my]:" + my.innerHTML);
    console.log("JS pageload.js function active Debug:[my.value]:" + $(my).attr('value'));

    console.log("JS pageload.js function active Debug:active this");
    console.log("JS pageload.js function active Debug:clear active [my.parent.li`s]");
    $(my).parent().parent().children("li").attr('class','');
    console.log("JS pageload.js function active Debug:set [my.parent.class] active");
    $(my).parent().attr('class','active');

    pageload(my);
};

//use in frame page end
function frameload(tag)
{
    pageload(tag,tag);
}

//from my read url,load the url page to insert tag inner
function pageload(my,tag,url)
{
    console.log("JS pageload.js function load Debug:begin");
    if(tag == null)
        tag = 'div#context';
    if(url == null)
    {
        console.log("JS pageload.js function load Debug:[url] == null");
        if(typeof($(my).attr('value'))!="undefined")
        {
            url = $(my).attr('value');
        }
    }

    console.log("JS pageload.js function load Debug:[tag]:" + typeof(tag));
    console.log("JS pageload.js function load Debug:[url]:" + url);

    if(typeof($(my).attr('value')) == "undefined")
    {
        console.log("JS pageload.js function load Error:url value is undefined");
    }
    else
    {
        $(tag).load(url);
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。