zoukankan      html  css  js  c++  java
  • 利用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>
  • 相关阅读:
    剑指offer十二之数值的整数次方
    剑指offer十一之二进制中1的个数
    剑指offer十之矩形覆盖
    剑指offer九之变态跳台阶
    剑指offer八之跳台阶
    程序员的生活观
    程序员,如何远离你的电脑
    生活管理实用技能
    分享共筑 : 伟大的理念
    技术人员,要学会关心别人
  • 原文地址:https://www.cnblogs.com/davidgu/p/1535185.html
Copyright © 2011-2022 走看看