编程 Javascript

利用JQuery的load函数动态加载其它页面的内容的实现代码

Posted in Javascript onDecember 14, 2010

在线演示:http://demo.3water.com/js/JQueryload/index.htm
全部代码

<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="http://demo.3water.com/jslib/jquery/jquery-1.3.2.min.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>

loadContent1.htm

3water.com

loadContent2.htm

sc.3water.com

代码打包下载

利用JQuery的load函数动态加载其它页面的内容的实现代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jquery的横向滚动条（滑动条）

Feb 24 Javascript

基于jquery的3d效果实现代码

Mar 23 Javascript

js open() 与showModalDialog()方法使用介绍

Sep 10 Javascript

jQuery:delegate中select()不起作用的解决方法(实例讲解)

Jan 26 Javascript

Javascript闭包实例详解

Nov 29 Javascript

AngularJS实现textarea记录只能输入规定数量的字符并显示

Apr 26 Javascript

利用jquery实现瀑布流3种案例

Sep 18 Javascript

基于Javascript倒计时效果

Dec 22 Javascript

jQuery实现标签子元素的添加和赋值方法

Feb 24 jQuery

Vue实现导出excel表格功能

Mar 30 Javascript

Vue 路由间跳转和新开窗口的方式（query、params）

Dec 25 Javascript

js面向对象方式实现拖拽效果

Mar 03 Javascript

Jquery练习之表单验证实现代码

Dec 14 #Javascript

基于Jquery的淡入淡出的特效基础练习

Dec 13 #Javascript

Juqery Html(),append()等方法的Bug解决方法

Dec 13 #Javascript

JQuery中getJSON的使用方法

Dec 13 #Javascript

JavaScript 学习历程和心得分享

Dec 12 #Javascript

JavaScript Title、alt提示（Tips）实现源码解读

Dec 12 #Javascript

js中的值类型和引用类型小结文字说明与实例

Dec 12 #Javascript