easyUI 如何不跳转页面,只是加载替换center部分内容
以前做的一个故障报修系统,前端框架使用easyUI框架,layout布局,center使用datagrid 。点击左边树形菜单时时页面跳转,想要知道如何点击菜单时不进行页面跳转,而是只对center模块的东西进行加载更新?
HTML代码:
<div class="easyui-layout" style="width:100%;height:100%;" data-options="fit:true">
<!-- 上边 -->
<div region="north" style="height:80px;background-color:#2d8bef; overflow: hidden;" >
<div id="pageNorth" class="easyui-panel" style="width: 100%;background-color:#2d8bef;" border="false">
</div>
</div>
<!-- 左边 -->
<div region="west" style="width:150px; overflow: hidden;">
<div id="pageWest" class="easyui-panel" style="width: 100%;" border="false">
</div>
</div>
<!-- 中间区域 -->
<div id="content" region="center" style="overflow: hidden;" border="false">
<div id="pageContent" class="easyui-panel" style="width: 100%;height:100%;" border="false">
</div>
</div>
<!-- 下边版权区 -->
<div region="south" style="height: 30px; background-color: #2d8bef; text-align:center; line-height: 30px; color:#fff;" border="false">
版权所有 © XX XXX有限公司
</div>
</div>
jQuery代码: 使用panel 的 refresh 方法
$(function(){
$("#pageNorth").panel("refresh", "title.html");
$("#pageWest").panel("refresh", "menu.html");
openURL("欢迎您", "welcome.html");
});
function openURL(title, url) {
$("#pageContent").panel({
title: title,
href: url
});
}
在menu中的每个链接添加点击事件时调用函数openURL() (两种方法都可以实现 也可以在js代码中使用事件委托,再分别判断具体点击的是哪个 链接,switch case)
<li><span><a href="javascript:openURL('学校管理', 'school_mng/school.html')">学校管理</a></span></li>
<!-- <li><span><a href="javascript:void(0)" onclick="openURL('学校管理', 'school_mng/school.html')">学校管理</a></span></li> -->
easyUI 如何不跳转页面,只是加载替换center部分内容的更多相关文章
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- mpvue 页面预加载,新增preLoad生命周期
存在的必要性:mpvue开发微信小程序,在页面跳转到新页面的过程中会有200ms左右的延迟,这个200ms如果用来请求新页面的接口,那么跳转到新页面或许已经渲染好了页面. 就是两种方式: 1.新页面跳 ...
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面
创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...
- Vue-Router 页面正在加载特效
Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染 ...
- 使用 SVG 实现一个漂亮的页面预加载效果
今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...
- yii2 如何在页面底部加载css和js
作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...
- js和jquery页面初始化加载函数的方法及先后顺序
运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <! ...
- 关于asp.net中页面事件加载的先后顺序
一.ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件 ...
- jquery的 $(function(){ }) = $(document).ready(function(){ }) ,及页面的加载顺序
document.ready和onload的区别:一.JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二.是onloa ...
随机推荐
- android JNI 调用NDK方法
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- yii2分页扩展之实现跳转到具体某页
作者:白狼 出处:http://www.manks.top/yii2_linkpager_widget.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文 ...
- Linux Shell脚本逻辑操作符简介
在写程序时,会用到条件判断,测试条件是否成立.很多时候,判断条件是多个的,这个时候需要用到逻辑操作符.shell脚本中常用的有哪些逻辑操作符呢? 1.逻辑与: -a 格式: conditon1 -a ...
- 部署JProfiler监控tomcat
下载JProfiler包 wget http://download-keycdn.ej-technologies.com/jprofiler/jprofiler_linux_9_2.rpm 安装JPr ...
- 【Pyrosim案例】01:空气流动
1 案例说明 Pyrosim是一款FDS前后处理软件.以一个非常简单的案例来描述Pyrosim的工作流程.本案例计算域中包含一个空气入口,一个环境出口. 案例主要演示以下内容: 创建Vents 增加切 ...
- Android ListView ArrayAdapter 的简单使用
前面写了3篇关于android的文章,其中的演示程序都写在了一个工程中,当时为了方便测试就在启动页MainActivity中放了3个按钮,点击不同的按钮进入不同的示例程序页面,MainActivity ...
- Dubbo学习之简单环境搭建
Dubbo服务的发展和作用: 首先,看下一般网站架构随着业务的发展,逻辑越来越复杂,数据量越来越大,交互越来越多之后的常规方案演进历程. 其次,当服务越来越多之后,我们需要做哪些服务治理? 最后,是d ...
- Java程序设计之链表结构
唉,说点废话,昨天偶尔看到一年前自己用C解约瑟夫环问题的循环链表,唏嘘不已,想想自己一年前嵌入式的梦呢,这两天发生了许多,而有些人不在了就真的不在了,心情不好,不多说了,直接上代码,只是些链表的基本操 ...
- jdbc java数据库连接 11)中大文本类型的处理
1. Jdbc中大文本类型的处理 Oracle中大文本数据类型, Clob 长文本类型 (MySQL中不支持,使用的是text) Blob 二进制类型 MySQL数据库, Text ...
- IE10 IE11 中 网站无法登录问题cookie
方法一: 在程序文件中添加此文件 在项目中创建一个文件夹将下载的文件直接拖入文件夹中 来源于:http://www.hanselman.com/blog/BugAndFixASPNETFailsToD ...