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

2016-02-19 16:04 28 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享jQuery Div中加载其他页面的实现代码,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

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

来源:http://www.tulaoshi.com/n/20160219/1611007.html

延伸阅读
标签: Web开发
其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验。由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较“庞大”的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask、unmask方法来实现该效果。大家知道jquery是一个优秀的javascript框架,不但...
标签: Web开发
打包下载 查了一下jq的官方插件编写文档( http://docs.jquery.com/Plugins/Authoring )以及文档中推荐的Mike Alsup写的一篇 A Plugin Development Pattern 。英语不是很好,但还是努力看下来(既学习到知识又能练习英语,何乐不为),照猫画虎的写了一个处女作——tabBox。 顾名思义,这个插件就是方便的产生具有tab选项卡功能“盒子...
标签: Web开发
基于jquery的锁定弹出层 这个东西也是随手总结出来的,引用了一些js框架jquery的方法。 div遮盖其他控件的方法参考了 对于需要遮盖flash的,请将flash控件的WMode变量值设置为Transparent 使用方法: 代码如下: script src="jquery.js"/script script src="effect/maskDiv.js"/script script //配置模块 var moduleEvent = [{"i...
标签: Web开发
多选效果如下图 代码如下: 代码如下: script type="text/javascript"!-- $(document).ready(function() { $("#selectall").click(selectAll); }); function selectAll() { var checked = $("#selectall").attr("checked"); $(".selectable").each(function() { var subchecked = $(this).attr("checked"); if (subchecked != ch...
标签: Web开发
从那以后,我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法。但最近我要写一篇如何 使用jQuery编写简单代码实现它的教程。 我将向你们逐步解说整个的过程,不仅仅因为要展示jQuery代码的简介,同时也要揭示jQuery库中的若干高级特性。 首先,代码 代码如下: $(document).ready(function() { $('.styleswitch').click(funct...

经验教程

453

收藏

43
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部