jQuery Div中加载其他页面的实现代码

经过一翻尝试,终于找到了一个自大比较满意的解决方法,现写在自己的博客中与大家分享。
第一步需要在签核页面中提供一个区域用来显示表单内容,这里使用的是DIV。


复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function() {
loadPage("doc_view", "<?php echo $this->doc_view_url . '/flag/1'; ?>");
});
</script>
<?php
$p = new Portlet();
$p->setCaption("Document View")
->setShowBorder(false)
->addItem("<div id='doc_view'></div>") //这个DIv就是用来显示表单内容的容器
->render();
echo $this->partial("approval/CommentsList.phtml", array("approval_list" => $this->approval_list));
?>

第二步就是编写一段JavaScript用来获取表单页面,使用jQuery


复制代码 代码如下:

//动态加载页面
//id 显示页面的容器组件ID
//url 欲加载页面网址
function loadPage(id, url) {
$("#"+id).addClass("loader");
$("#"+id).append("Loading......");
$.ajax({
type: "get",
url: url,
cache: false,
error: function() {alert('加载页面' + url + '时出错!');},
success: function(msg) {
$("#"+id).empty().append(msg);
$("#"+id).removeClass("loader");
}
});
}

时间: 2009-02-26

用jQuery模拟页面加载进度条的实现代码

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: *{margin:0;padding:0;font-size:12px} .loading{position:relative;top:0;le

jQuery页面加载初始化常用的三种方法

当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javascript" src="./js/jquery-1.7.min.js"></script> 复制代码 代码如下: <script type="text/javascript">

jquery实现在页面加载的时自动为日期插件添加当前日期

在页面加载的时候自动为日期插件添加当前日期. <script type="text/javascript"> $(document).ready(function(){ $("#startTime").val(formatDate()); $("#endTime").val(formatDate()); } jsp页面的body部分代码: <td><label>日期:</label></td&

jquery 图片预加载 自动等比例缩放插件

复制代码 代码如下: /* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大

jquery 页面滚动到底部自动加载插件集合

很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPagination jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件. 2. jQuery Screw Screw (scroll + view) 是一个 jQuery 插件当用户滚动页面的时候加载内容,是一个无限滚动翻页的插件. 3

基于JQuery实现滚动到页面底端时自动加载更多信息

关键代码: 复制代码 代码如下: var stop=true; $(window).scroll(function(){     totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());     if($(document).height() <= totalheight){         if(stop==true){             stop=false;           

jquery加载页面的方法(页面加载完成就执行)

1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).ready(function(){ $("#a").click(function(){ //adding your code here }); }); 3.window.onload = function(){ $("#a").click(function(){ //add

jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

jQuery实现的自动加载页面功能示例

本文实例讲述了jQuery实现的自动加载页面功能.分享给大家供大家参考,具体如下: demo.html: <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>---------------</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"

Jquery实现页面加载时弹出对话框代码

复制代码 代码如下: <script type="text/javascript" src="jquery-1.4.2.js"></script> //下载 <script type="text/javascript"> $(document).ready(function(){ alert("您好,欢迎来到Jquery!"); }) </script> 将以上代码置于head标

基于jquery实现页面滚动到底自动加载数据的功能

现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由于它每次只加载一部分数据,当我们有大量的数据,但不能显示所有,这时我们可以考虑使用异步方式加载数据. 数据异步加载可以发生在用户点击"查看更多"按钮或滚动条滚动到窗口的底部时自动加载:在接下来的博文中,我们将介绍如何实现自动加载更多的功能. 图1 微博加载更多功能 正文 假设,在我们的数据库中存放着用户的消

运用JQuery的toggle实现网页加载完成自动弹窗

toggle()事件 它主要切换元素的可见状态. 1.toggle(switch) ①switch是一个可选值,如果不填则原来元素是显示则将其隐藏,如果是隐藏则显示. HTML 代码: 复制代码 代码如下: <p>Hello</p><p style="display: none">Hello Again</p> jQuery 代码: 复制代码 代码如下: $("p").toggle() 结果: 复制代码 代码如下: &

jquery显示loading图片直到网页加载完成的方法

本文实例讲述了jquery显示loading图片直到网页加载完成的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html class="no-js"> <head> <meta charset='UTF-8'> <title>Simple Loader</title> <style> /* This only works with JavaScript, if it'

jQuery实现彩带延伸效果的网页加载条loading动画

本文实例讲述了jQuery实现彩带延伸效果的网页加载条loading动画.分享给大家供大家参考,具体如下: 这里介绍的jQuery彩带效果网页加载条动画,我觉得挺有创意的,虽然难度不算大,但能想到用这样一个背景来做Loading加载条,也实属不易,不服气的,你为什么就没有想到这样做呢?本网页加载条效果使用了jQuery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n-color-cha-web-loading-demo/

jquery网页加载进度条的实现

本次主要介绍一下网页加载进度的实现.如下图,在页面加载的时候,上方红色的进度条 网页加载进度的好处是能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我

JavaScript实现网页加载进度条代码超简单

网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行

javascript实现一个网页加载进度loading

loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈","省略号"等等. 网页loading有很多用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(ajax completed)结束loading效果,就可以了. 但是页面的加载进

JS+CSS实现网页加载中的动画效果

本文实例为大家分享了JS实现网页加载中效果的具体代码,供大家参考,具体内容如下 需要材料: 一张loading动画的gif图片 基本逻辑: 模态框遮罩 + loading.gif动图, 默认隐藏模态框 页面开始发送Ajax请求数据时,显示模态框 请求完成,隐藏模态框 下面我们通过Django新建一个web应用,来简单实践下 实践 1.新建一个Django项目,创建应用app01, 配置好路由和static,略.将gif动图放到静态文件夹下,结构如下: 2.视图中定义一个函数,它返回页面test.

jQuery基于ajax实现页面加载后检查用户登录状态的方法

本文实例讲述了jQuery基于ajax实现页面加载后检查用户登录状态的方法.分享给大家供大家参考,具体如下: 拥有会员功能的网站,如果会员已经登录,那么要显示相应的登录状态,而且这种显示的需求是在网站的每个页面都有的(目前国内网站貌似都是这么做的,还没有见过其他形式的状态显示方式),这样,在打开一个新的页面时就要知道这个会员是否已经登录,需要判断登录的状态. 1.解决方案. 为了能够实现在每一个页面判断会员登录状态的功能,我采用了页面时通过ajax传递参数通过后端返回的登录状态结果进行判断,当然

js 延迟加载 改变JS的位置加快网页加载速度

当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码 复制代码 代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/javascript"> setTimeout(&quo

关于JS与jQuery中的文档加载问题

jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的 1.jquery中的可以简化为$().ready(),$(function),   而js却不行必须全部写完. 2.同时js的window.onload()只能有一个,而jquery的$(document).ready()却可以有多个. 3.最重要的一点是window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.   $(documen