easyui学习笔记5—panel加载其他的页面
上一篇中我们看到了panel的基本实现,没有什么难度,最重要的是data-options和class两个标签属性的定义。这里我们将看一下在panel中如何加载其他的页面。
1.先看看引用的资源文件和html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Load Panel Content - jQuery EasyUI Demo</title>
<link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" />
<link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" />
<link rel="stylesheet" href="jquery-easyui-1.3.5/demo/demo.css" />
<script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
</head>
<body>
<h2></h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the refresh button on top right of panel to load content.</div>
</div>
<div style="margin:10px 0;"></div>
<div id="p" class="easyui-panel" title="Load Panel Content" style="width:500px;height:200px;padding:10px;" data-options="
tools:[{iconCls:'icon-reload',handler:function(){$('#p').panel('refresh','_content.html')}}]
"> </div>
</body>
</html>
这里没有什么要说的了还是两个主要的js文件jquery.min.js和jquery.easyui.min.js最主要的选项是data-options=" tools:[{iconCls:'icon-reload',handler:function(){$('#p').panel('refresh','_content.html')}}] "指定了这个panel的标签样式和加载的页面,执行的动作是refresh。
2.再看看这个加载的html文件,其实就是一一段简单的文字,如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX Content</title>
</head>
<body>
<p style="font-size:14px">Here is the content loaded via AJAX.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</body>
</html>
3.注意在jquery里面所有的关键字都是区分大小写的,这个和javascript是一致的
$('#centerContent').panel({
href:"_publish.html?Id="+selectedRow.Id,
onLoad:function(){
//alert("aa");
$('#comBusiness').combobox('setValue', selectedRow.Business);
if(selectedRow.Business!=null){
$('#comBusiness').combobox('setValue', selectedRow.Business);
}
if(selectedRow.Solution!=null){
$('#comSolution').combobox('setValue', selectedRow.Solution);
}
if(selectedRow.Service!=null){
$('#comService').combobox('setValue', selectedRow.Service);
}
if(selectedRow.About!=null){
$('#comAbout').combobox('setValue', selectedRow.About);
}
}
});
在这一段中,我错误的把onLoad写成了onload,然后悲剧了折磨了我两个小时,写成小写的是不管用的,切记,切记!
easyui学习笔记5—panel加载其他的页面的更多相关文章
- thinkphp学习笔记9—自动加载
原文:thinkphp学习笔记9-自动加载 1.命名空间自动加载 在3.2版本中不需要手动加载类库文件,可以很方便的完成自动加载. 系统可以根据类的命名空间自动定位到类库文件,例如定义了一个类Org\ ...
- node 学习笔记 - Modules 模块加载系统 (1)
本文同步自我的个人博客:http://www.52cik.com/2015/12/11/learn-node-modules-path.html 用了这么久的 require,但却没有系统的学习过 n ...
- Openstack本学习笔记——Neutron-server服务加载和启动源代码分析(三)
本文是在学习Openstack过程中整理和总结.因为时间和个人能力有限.错误之处在所难免,欢迎指正! 在Neutron-server服务载入与启动源代码分析(二)中搞定模块功能的扩展和载入.我们就回到 ...
- easyui学习笔记4—panel的实现
这篇看看easyui是怎么实现panel的,就是类似一个容器,里面可以装具体内容或者其他的easyui控件. 1.这里先看看引用的资源文件 <link rel="stylesheet& ...
- Spring学习笔记(1)——资源加载
<!-- 占坑,迟点补充底层原理 --> Spring支持4种资源的地址前缀 (1)从类路径中加载资源——classpath: classpath:和classpath:/是等价的,都是相 ...
- node 学习笔记 - Modules 模块加载系统 (2)
本文同步自我的个人博客:http://www.52cik.com/2015/12/14/learn-node-modules-module.html 上一篇讲了模块是如何被寻找到然后加载进来的,这篇则 ...
- 【EF学习笔记08】----------加载关联表的数据 显式加载
显式加载 讲解之前,先来看一下我们的数据库结构:班级表 学生表 加载从表集合类型 //显示加载 Console.WriteLine("=========查询集合===========&quo ...
- 【EF学习笔记07】----------加载关联表的数据 贪婪加载
讲解之前,先来看一下我们的数据库结构:班级表 学生表 贪婪加载 //贪婪加载 using (var db = new Entities()) { var classes = db.Classes.Wh ...
- 【EF学习笔记06】----------加载关联表的数据 延迟加载
讲解之前,先来看一下我们的数据库结构:班级表 学生表 延迟加载 //延迟加载 using (var db = new Entities()) { //查询班级 var classes = (from ...
随机推荐
- windows下安装node环境,以及grunt试水笔记
grunt,当下前端界知名度最高的工作流处理工具. 在一线的互联网公司,它早已经被用烂了,而我真正接触,是在去年年底... 期间还因为内心太杂分心玩乐而荒废学途,以致到最近才重拾学业,在这里BS一下自 ...
- FocusBI: SSIS体系结构(原创)
关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. <商业智能教程>pdf下载地址 链接:https://pan.baidu.com/ ...
- JavaScript中 运算符
运算符对一个或多个变量或值(操作数)进行运算,并返回一个新值 根据所执行的运算,运算符可分为以下类别: (1) 算术运算符 (2) 比较运算符 运算符 说 明 示 例 == 等于. 如果两个操作数相 ...
- MongoDB 线上环境按照及配置(授权方式启动)
1创建文件repo文件 #vim /etc/yum.repos.d/mongodb-org-3.4.repo [mongodb-org-3.4] name=MongoDB Repository bas ...
- MySql 双实例安装
1.官网下载压缩包 https://dev.mysql.com/downloads/mysql/ 2.解压到D盘 3.修改my.ini 文件 [mysql] # 设置mysql客户端默认字符集 def ...
- Java 线程--继承java.lang.Thread类实现线程
现实生活中的很多事情是同时进行的,Java中为了模拟这种状态,引入了线程机制.先来看线程的基本概念. 线程是指进程中的一个执行场景,也就是执行流程,进程和线程的区别: 1.每个进程是一个应用程序,都有 ...
- autocomplete 属性 清除input框输入存留历史值,防止下拉历史值显示
autocomplete 属性规定输入字段是否应该启用自动完成功能. 自动完成允许浏览器预测对字段的输入.当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项. 注释:aut ...
- js表单快速取值/赋值 快速生成下拉框
1.表单取值/赋值公共方法 //表单序列化:文本框的name字段和数据源一致<form id="myForm" onsubmit="return false;&qu ...
- mockjs
首先还是那句话,进来的GodBoy and GoodGirl 不妨看完再离开. 一个走在路上的前端攻城狮-along 一.mock的由来 mock有“愚弄.欺骗”之意,在前端领域,mock可以理解为 ...
- npm全局安装失效修复
一.windows下 先查看npm包的默认安装目录 npm config get prefix 修改配置 npm config set prefix "nodeJs的安装目录" 二 ...