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>
  • 相关阅读:
    java 基础
    ruby on rails
    try catch 与 return 和 finally 关系。
    Oracle 左连接,右连接,内链接。【百度知道】
    java单例模式【csdn-炸死特】
    <jsp:include>和<%@include file=""%>有什么区别?
    List list = new ArrayList()和ArrayList list = new ArrayList()的区别?
    面向连接与面向无连接
    单​工​,​半​双​工​,​全​双​工​的​含​义​及​区​别
    对于java中接口的作用与理解
  • 原文地址:https://www.cnblogs.com/davidgu/p/1535185.html
Copyright © 2011-2022 走看看