利用JQuery的load函数动态加载页面

JQuery有好多Ajax函数，其中load是用来动态加载一个页面的内容到指定的dom元素上。

我们来做个例子：
做一个上下（左右）结构的页面，其中下左部分放2个以前我们做过的div按钮，下右部分则为动态加载内容。
按每个按钮，加载该按钮相应的网页内容到下右区域。

基本语法为：
$('#区域id').load('页面名称');

完整的网页代码如下：
<html xmlns="http://www.w3.org/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>这是要被加载的区域</h2>
    </div>

</div>

</form>

</body>
</html>
posted @ 2009-07-30 16:33  Master HaKu  阅读(26849)  评论(3)  编辑  收藏  举报