利用JQuery的load函數(shù)動態(tài)加載頁面 - Master HaKu - 博客園

悟靜 2011-05-15

展開全文

JQuery有好多Ajax函數(shù)，其中l(wèi)oad是用來動態(tài)加載一個頁面的內(nèi)容到指定的dom元素上。

我們來做個例子：
做一個上下（左右）結(jié)構(gòu)的頁面，其中下左部分放2個以前我們做過的div按鈕，下右部分則為動態(tài)加載內(nèi)容。
按每個按鈕，加載該按鈕相應(yīng)的網(wǎng)頁內(nèi)容到下右區(qū)域。

基本語法為：
$('#區(qū)域id').load('頁面名稱');

完整的網(wǎng)頁代碼如下：

<html xmlns="http://www./1999/xhtml" >
<head runat="server">
    <title>JQuery - Load</title>
    <link rel="stylesheet" media="all" type="text/css" href="../CSS/myStyle.css" />
    <script type="text/javascript" src="../JsLib/jquery-1.3.2.min.js"></script>//必須，且在某目錄下要存在
    <script type="text/javascript" src="../JS/basicEffect.js"></script>//必須，且在某目錄下要存在
    <style type="text/css">
        #header {
          margin-bottom: 1em;
          padding-bottom: 1em;
          border-bottom: 1px solid #eee;
        }
        .buttonListArea {
          float: left;
          width: 150px;
          padding-right: 10px;
          border-right: 1px solid #eee;
          margin-right: 10px;
        }
        .buttonArea {
          margin: 10px;
          padding-bottom:20px;
        }
        #load_content {
          float: left;
          width: 550px;
          text-align:center;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnLoad1.button').click(function() {
                $('#load_content').load('loadContent1.htm');
            });
            $('#btnLoad2.button').click(function() {
                $('#load_content').load('loadContent2.htm');
            });
        });
    </script>
</head>
<body>

<form id="form1" runat="server">

<div id="container">

    <div id="header">
        <h2>JQuery Load Example</h2>
    </div>

    <div class="buttonListArea">
        <div class="buttonArea">
            <div class="button" id="btnLoad1">Load 1</div>
        </div>

        <div class="buttonArea">
            <div class="button" id="btnLoad2">Load 2</div>
        </div>
    </div>

    <div id="load_content">
        <h2>這是要被加載的區(qū)域</h2>
    </div>

</div>

</form>

</body>
</html>