easyui--之总和使用方法--对话框dialog--工具栏toolbar-按钮button--tabs忒博页--树tree--表格table

原创 2013年12月05日 22:15:37

1

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<div style="margin:10px 0;"></div>
	<div class="easyui-accordion" style="width:150px;height:200px;">
		<div title="系统管理"  style="overflow:auto;padding:10px;">
			<h3 style="color:#0099FF;">Accordion for jQuery</h3>
			<p>Accordion</p>
		</div>
		<div title="功能菜单"  style="padding:10px;">
			<p>The accordion</p> 		
		</div>
		<div title="用户管理" style="padding:10px;">
			<p>The accordion</p> 		
		</div>
		<div title="目标管理"  style="padding:10px;">
			<p>The accordion</p> 		
		</div>
	</div>
	<div>
	<ul class="easyui-tree">
				<li>
					<span>Foods</span>
					<ul>
						<li>
							<span>Fruits</span>
							<ul>
								<li>apple</li>
								<li>orange</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		
		<div class="easyui-tabs" style="width:700px;height:300">
		<div title="首页" style="padding:10px">
			<p style="font-size:14px">jQuery EasyUI framework help you build your web page easily.</p>
			<ul>
				<li>hello welcome</li>
			</ul>
		</div>
		<div title="系统管理" style="padding:10px" data-options="closable:true">
			<ul>
				<li>系统管理</li>
			</ul>
		</div>
		</div>
		
			<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
			data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>
<!-- 	-->	<input type="button" value="submit" style="background-image: url(../../themes/icons/ok.png);" src="../../themes/icons/ok.png" size="20">
	<div style="padding:10px 0 0 30px">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">Ok</a>
</div> 
	<div id="dlg" class="easyui-dialog" title="Basic Dialog" style="width:400px;height:200px;padding:10px" 	data-options="
				iconCls: 'icon-save',
				toolbar: [{
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
						alert('add')
					}
				}],
				buttons: [{
					text:'Ok',
					iconCls:'icon-ok',
					handler:function(){
						alert('ok');
					}
				}]
			" >
		The dialog content.
	</div>
</body>
</html>
2



相关文章推荐

EasyUi常用组件(四)Dialog对话框、创建按钮(Buttons)、创建工具栏(Toolbar)

对话框(Dialog)非常简单,可以从 DIV 标记创建,如下所示:
  • szyly
  • szyly
  • 2016年07月07日 09:47
  • 2860

android 8种对话框(Dialog)使用方法汇总

转载这篇文章,供自己学习用。

Android-- Dialog对话框的使用方法

Activities提供了一种方便管理的创建、保存、回复的对话框机制,例如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog...

easyui datagrid 表格组件列属性formatter和styler使用方法

 明确单元格DOM结构 要想弄清楚formatter和styler属性是怎么工作的,首先要弄清楚datagrid组件内容单元格的DOM接口,注意,这里指的是内容单元格,不包括标题单元格,标题单...

easyui datagrid 表格组件列属性formatter和styler使用方法

明确单元格DOM结构 要想弄清楚formatter和styler属性是怎么工作的,首先要弄清楚datagrid组件内容单元格的DOM接口,注意,这里指的是内容单元格,不包括标题单元格,标题单元格...

easyui tree使用方法

加载数据 $('#treeul').tree({ checkbox:true, url:'initTree.aspx', ...

easyui tree使用方法

加载数据 $('#treeul').tree({ checkbox:true, url:'initTree.aspx', ...
  • dqsweet
  • dqsweet
  • 2012年02月24日 16:09
  • 15022

对Android APP的各种样式统一修改方法(这里列举了通知状态栏StatueBar,标题栏ActionBar,ToolBar和按钮Button的样式修改)

有些时候为了UI美化和主题的统一,需要我们对APP的主题样式进行修改,比如修改状态栏,ActionBar 的背景色,设置能对特定控件的样式进行自定义,就不必要我们在每个创建控件中去修改他的样式,大大减...

放大对话框时,改变按钮的位置(EasySize.h使用方法)

设创建的对话框的类名是CMyDlg,具体过程如下: 步骤一:把easysize.h拷贝到CMyDlg项目文件夹中,同时在CMyDlg的.h文件和.cpp文件中加入#include "easysize...

Jquery的tabs使用方法。

  • 2011年11月02日 10:47
  • 109KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui--之总和使用方法--对话框dialog--工具栏toolbar-按钮button--tabs忒博页--树tree--表格table
举报原因:
原因补充:

(最多只允许输入30个字)