easyui 例子2

!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#ud{

margin-top:-5px;

}

ul li {

list-style:none;

}

ul li a {

color:blue;
text-decoration:none;
}
</style>
</head>
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_CN.js"></script>
<link href="themes/default/easyui.css" rel="stylesheet" />
<link href="themes/icon.css" rel="stylesheet" />

<body class="easyui-layout">
<div data-options="region:‘north‘,split:false,title:‘North Title‘," style="height:100px;"></div>
<div data-options="region:‘south‘,title:‘South Title‘,split:false" style="height:100px;"></div>
<div data-options="region:‘east‘,collapsible:false,split:false,iconCls:‘icon-reload‘,title:‘East‘," style="width:100px;"></div>
<div data-options="region:‘west‘,collapsible:false,split:false,title:‘West‘," style="width:180px;">
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="人员配置" data-options="iconCls:‘icon-save‘" 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="信息管理" data-options="iconCls:‘icon-reload‘,selected:true" style="padding:10px;">
<ul id="ud">
<li><a href="#" class="munn" targeturl="HtmlPage2.html">教师介绍</a></li>
<li><a href="#"class="munn">校友采访</a></li>
<li><a href="#"class="munn">校园风采</a></li>
<li><a href="#"class="munn">校长简介</a></li>
</ul>
</div>
<div title="领导介绍">
content3
</div>
</div>

</div>
<div data-options="region:‘center‘,split:false,title:‘center title‘" style="padding:5px;background:#eee;">
<div id="tabs" class="easyui-tabs" data-options="fit:true">

</div>

</div>
<script type="text/javascript">

$(‘.munn‘).click(function () {

$(‘#tabs‘).tabs(‘add‘, {
title: $(this).text(),
href: $(this).attr(‘targeturl‘),
closable: true,

});

})

</script>
</body>

</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<table class="easyui-datagrid" style=""
data-options="fit:true,singleSelect:true,collapsible:true,url:‘datagrid_data1.json‘,method:‘get‘">
<thead>
<tr>
<th data-options="field:‘bianhao‘,width:80">编号</th>
<th data-options="field:‘name‘,width:100">姓名</th>
<th data-options="field:‘sex‘,width:80,align:‘right‘">年龄</th>
<th data-options="field:‘age‘,width:80,align:‘right‘">性别</th>
<th data-options="field:‘hdry‘,width:250">获得荣誉</th>
<th data-options="field:‘beizhu‘,width:60,align:‘center‘">备注</th>
</tr>
</thead>
</table>
</body>
</html>

时间: 2024-11-07 05:09:29

easyui 例子2的相关文章

easyUI例子学习

1.http://www.w3cschool.cc/jeasyui/jeasyui-datagrid-datagrid21.html 2.但是自己折腾以后出现的是这样子: 3.虽然添加了数据库,也在源码的基础上做了一些修改,但是因为看不懂源码,所以少了那个"+"" -"号也不是很明白,还需要研究一下:https://github.com/zxyvirgo/easyUI/tree/master#easyui

TWaver初学实战——如何在EasyUI中插入TWaver(续)

上次文章虽然简单易懂,但很有些小伙伴不满意:你这TWaver和EasyUI结合,只不过生硬地把TWaver图形插进去了,数据和人家EasyUI没一毛钱关系.嘿嘿,不就是想发生关系嘛,没问题啊!咱就还用原来的EasyUI的代码,看看怎么把它表格中的数据用拓扑的方式显示出来. 在本机发布web程序 这次再干咱要有新路,不能再把数据写到代码里了,乱乱乎乎的很不专业,必须原汁原味就用json文件.别小看这一改变,需要在本机搭建服务器,要是原来没接触还真得忙活一阵子.不过这些工作可不白做,那是玩网页开发的

给div设置一个关闭按钮.

造轮子好难. 用惯了框架提供的组件,某天自己要做个伪组件(或者在他人创建的页面效果上添加新功能)会发现很难. 所以,碰到了,就一定要做下记录.以供日后查阅. 如图,弹出DIV右上角的关闭按钮是我此次添加的.  观众老爷可能会纳闷,原来设计中没有关闭按钮,设计不合理啊. 确实原设计没有.我才得有此经历. 页面是使用的easyui. 弹出的窗口没用window是客户不喜欢那样的效果. 弹出的div是开发人员自己手写的一个div. 添加的按钮,代码如下: <div id="aa" st

easyui combotree combobox 使用例子

一:引入easyui 二:使用例子 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Resurces/themes/easyui.css" rel="stylesheet" /> <link href="Resur

easyui控件使用例子

1.easyui之dataGrid分页加载数据例子 注意:1)分页表格通过url获得数据会提交page,rows两个参数:后台需要获取这两个参数并且由此得到 int pageSize=rows/page;//每页记录数 int pageNum=page;//当前页面 之后获得分页数据可用sql:............LIMIT "+(pageNum-1)*pageSize+","+pageSize;放回需要的指定页面数据 2)后台代码需要放回固定格式的json数据{&quo

关于easyui模拟win2012桌面的一个例子系列

最近时间比较充裕,想到之前领导问我,什么界面更适合公司这种屏幕小但是又要求可以同时处理更多的工作. 我感觉  windows是最合适的,毕竟微软已经做了这么多年的系统了,人的操作习惯已经被他们确定了. 先看一下效果吧,这个是第一版. 第一版只加入了开始菜单 弹窗 ,不想做菜单在最底部的兼容性所以把菜单放在了上面 菜单有点小气,用的是easyui的菜单 时间是秒跳 弹窗里面的内容是用的iframe加载的百度首页 百度的前端工程师还给开了个小玩笑 这个版本用到了2个框架: jquery 1.11 e

easyui datagrid 使用例子

一:引入easyui 1:参考官网:http://www.jeasyui.net/ 2:引入 整个文件夹:themes,包括:icon.css.image 等等 3:引入easyui.css 4:引入:jquery.min.js . jquery.easyui.min.js

EasyUI DataGrid 实用例子(2015-05-22)

代码经过精心改良,可以直接使用,具体看注释吧. 1,前台,代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LineInfoManagement.aspx.cs" Inherits="LMX.XiAnPeiHua.Web.Admin.UnitManagement.LineInfoManagement" %> <!DOCTYPE ht

EasyUi datagrid 表格分页例子

1.首先引入 easyui的 css 和 js 文件 2.前台 需要写的js //源数据 function Async(action,args,callback){  $.ajax({  url: action ,  type:"POST",  dataType:"json",  timeout: 10000,  data: args,  success: function(data){   if(callback){  callback(data);  } } }