上一篇中我们看到了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加载其他的页面的更多相关文章

  1. thinkphp学习笔记9—自动加载

    原文:thinkphp学习笔记9-自动加载 1.命名空间自动加载 在3.2版本中不需要手动加载类库文件,可以很方便的完成自动加载. 系统可以根据类的命名空间自动定位到类库文件,例如定义了一个类Org\ ...

  2. node 学习笔记 - Modules 模块加载系统 (1)

    本文同步自我的个人博客:http://www.52cik.com/2015/12/11/learn-node-modules-path.html 用了这么久的 require,但却没有系统的学习过 n ...

  3. Openstack本学习笔记——Neutron-server服务加载和启动源代码分析（三）

    本文是在学习Openstack过程中整理和总结.因为时间和个人能力有限.错误之处在所难免,欢迎指正! 在Neutron-server服务载入与启动源代码分析(二)中搞定模块功能的扩展和载入.我们就回到 ...

  4. easyui学习笔记4—panel的实现

    这篇看看easyui是怎么实现panel的,就是类似一个容器,里面可以装具体内容或者其他的easyui控件. 1.这里先看看引用的资源文件 <link rel="stylesheet& ...

  5. Spring学习笔记(1)——资源加载

    <!-- 占坑,迟点补充底层原理 --> Spring支持4种资源的地址前缀 (1)从类路径中加载资源——classpath: classpath:和classpath:/是等价的,都是相 ...

  6. node 学习笔记 - Modules 模块加载系统 (2)

    本文同步自我的个人博客:http://www.52cik.com/2015/12/14/learn-node-modules-module.html 上一篇讲了模块是如何被寻找到然后加载进来的,这篇则 ...

  7. 【EF学习笔记08】----------加载关联表的数据 显式加载

    显式加载 讲解之前,先来看一下我们的数据库结构:班级表 学生表 加载从表集合类型 //显示加载 Console.WriteLine("=========查询集合===========&quo ...

  8. 【EF学习笔记07】----------加载关联表的数据 贪婪加载

    讲解之前,先来看一下我们的数据库结构:班级表 学生表 贪婪加载 //贪婪加载 using (var db = new Entities()) { var classes = db.Classes.Wh ...

  9. 【EF学习笔记06】----------加载关联表的数据 延迟加载

    讲解之前,先来看一下我们的数据库结构:班级表 学生表 延迟加载 //延迟加载 using (var db = new Entities()) { //查询班级 var classes = (from ...

随机推荐

  1. Android OpenGL教程-第四课【转】

    第四课 旋转: 在这一课里,我将教会你如何旋转三角形和四边形.左图中的三角形沿Y轴旋转,四边形沿着X轴旋转. 我们增加两个变量来控制这两个对象的旋转.这两个变量加在程序的开始处其他变量的后面.它们是浮 ...

  2. 使用Charles为Android设备抓取https请求的包

    之前开发的Android APP使用的都是http请求,之后改成了https,就出现了以下情况,无法正常读取抓取的内容 找了好多资料说法大概差不多,照着弄,结果出现如下情况,后来发现这种情况其实是手机 ...

  3. [转]使用依赖关系注入在 ASP.NET Core 中编写干净代码

    本文转自:http://blog.jobbole.com/101270/ 原文出处: Steve Smith    ASP.NET Core 1.0 是 ASP.NET 的完全重新编写,这个新框架的主 ...

  4. web.coofig 配置跨域问题

    <customHeaders> <add name="/> <add name="Access-Control-Allow-Origin" ...

  5. SEO学习

    一.什么是SEO SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”!SEO是指通过对网站进行站内优化(网站结构调整.网站内容建设.网站代码优化等 ...

  6. [android] 练习viewpagerindicator的使用（二）

    主要还是想实现滑动的tab切换效果 MainActivity.java package com.example.csdn; import com.viewpagerindicator.TabPageI ...

  7. animate默认时长所带来的问题及解决

    一.需求描述 做一个进度条长度逐渐减少的动画,当进度条长度小于等于0时,关闭动画,并弹出透明底板显示新提示. 二.问题描述 初始代码如下: //设置进度条初始长度 var progressLength ...

  8. csharp: HttpWebRequest and HttpWebResponse

    http://stackoverflow.com/questions/4015324/http-request-with-post Response.Charset = "GBK" ...

  9. css移动端:acitve效果的实现

    做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有“ ...

  10. javastscript获取光标位置

    需求是获取某元素的内容,然后将该内容插入到文本框当前的光标位置 (function($) { $.fn.extend({ insertAtCaret: function(myValue) { var ...