easyui学习笔记8—在手风琴中加载其他的页面

简介: 在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据。 1.先看看引用的资源文件 还是没有什么的变化2个js文件和三个css文件。

在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据。

1.先看看引用的资源文件

        <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>

还是没有什么的变化2个js文件和三个css文件。

2.再看看html代码

    <body>
        <h2>Loading Accordion Content with AJAX</h2>
        <div class="demo-info">
            <div class="demo-tip icon-tip"></div>
            <div>Click AJAX panel header to load content via AJAX.</div>
        </div>
        <div style="margin:10px 0;"></div>
        <div class="easyui-accordion" style="width:500px;height:300px;">
            <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
                <h3 style="color:#0099FF;">Accordion for jQuery</h3>
                <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
            </div>
            <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
                <p>The accordion allows you to provide multiple panels and display one at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
            </div>
            <div title="Ajax" data-options="href:'_content.html'" style="padding:10px">
            </div>
        </div>
    </body>    

在表格中就是data-options="href:'_content.html'"这一句起作用的,这个和上面一篇中用到的html文件是同一个的。

看看效果

可以看到这个请求是get请求。

这一片文章中也没有包含多少内容,下面的笔记中将包含好几2至3个例子。

作者:Tyler Ning
出处:http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址williamningdong@gmail.com  联系我,非常感谢。

目录
相关文章
|
7月前
|
JavaScript 前端开发 Java
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
|
6月前
基于EasyUI的后台管理系统页面原型_示例图_下载地址
基于EasyUI的后台管理系统页面原型_示例图_下载地址
36 0
EasyUI的组件加载两次的问题
EasyUI的组件加载两次的问题
|
存储 数据格式
55EasyUI 树形菜单- 树形菜单加载父/子节点
55EasyUI 树形菜单- 树形菜单加载父/子节点
36 0
|
JavaScript 前端开发 Java
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
|
应用服务中间件
EasyUI+JavaWeb奖助学金管理系统[8]-加载角色对应菜单功能实现
本文目录 1. 本章任务 2. 构造测试数据 3. 后端提供查询登录角色对应菜单的接口 4. 后台管理页面加载菜单 5. 测试验证
124 0
EasyUI+JavaWeb奖助学金管理系统[8]-加载角色对应菜单功能实现
|
JSON 前端开发 JavaScript
EasyUI–表单加载内存/本地/服务端数据
在不使用前端语言JS(jQuery等前端框架本质上也是JS)时,如果我们想往表单里面放入数据,该怎么办?比如从文件中、从数据库查出用户信息显示在表单中。
522 0
EasyUI–表单加载内存/本地/服务端数据
|
JavaScript 前端开发
easyui学习笔记4—panel的实现
这篇看看easyui是怎么实现panel的,就是类似一个容器,里面可以装具体内容或者其他的easyui控件。 1.这里先看看引用的资源文件 看到这里并没有引用一个类似panel.
896 0
|
Web App开发 JavaScript 前端开发
easyui学习笔记5—panel加载其他的页面
上一篇中我们看到了panel的基本实现,没有什么难度,最重要的是data-options和class两个标签属性的定义。这里我们将看一下在panel中如何加载其他的页面。 1.先看看引用的资源文件和html DOCTYPE html> L...
922 0
|
SQL JavaScript 前端开发
easyui学习笔记1—增删改操作
最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记。 1.在mysql中建好表之后修改id字段为递增字段,发现这个奇怪的mysql语法,如下 alter table student change id id...
973 0