easyUI的Dialog和Windows框的应用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head id="Head1" runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<link rel="stylesheet" href="../css/mainFrom.css" type="text/css" />
<script>
function resize() {
$('#w').window({
title: 'New Title',
width: 600,
modal: true,
shadow: false,
closed: false,
height: 300
});
}
function openW() {
$('#w').window('open');
}
function closeW() {
$('#w').window('close');
}
function test() {
$('#test').window('open');
}
// Dialog
function open1() {
$('#d2').dialog('open');
}
function close1() {
$('#d2').dialog('close');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="incontent">
<div id="contool">
<div class="tool">工具栏</div>
<a href="#"><span id="bj" runat="server">销售开单</span></a>
<a href="#">历史单据</a>
<div class="clear"></div>
</div>
<div class="contable">
<div class="clear"></div>
<div id="tb">
<div style =" margin:5px;" >
<div>
单号：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
开单时间：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>---<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="查询" />
</div>
</div>
</div>
<div id="UpdatePanel1">
<table class="easyui-datagrid" toolbar="#tb" style="width:auto; height:auto;" data-options="idField:'itemid',showFooter:true,collapsible:true" title="销售单列表">
<thead>
<tr>
<th field="itemid" width="80" checkbox="true">行号</th>
<th field="productid" width="120" sortable="true">单据日期</th>
<th field="listprice" width="120" sortable="true">单据编号</th>
<th field="unitcost" width="150"sortable="true" >客户名称</th>
<th field="attr1" width="150" sortable="true">销售金额</th>
<th field="status" width="150" sortable="true">折后金额</th>
<th field="status1" width="150" sortable="true">收款金额</th>
<th field="status2" width="200">说明</th>
<th field="status3" width="130">操作</th>
</tr>
</thead>
<tr >
<td ></td>
<td >123457645</td>
<td >2013-06-02</td>
<td >张三</td>
<td >￥15000</td>
<td >￥15000</td>
<td >￥15000</td>
<td > </td>
<td >
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="open1()" >修改</a>
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="javascript:void(0);" >删除</a>
</td>
</tr>
<tr >
<td ></td>
<td >123457645</td>
<td >2013-06-02</td>
<td >张三</td>
<td >￥15000</td>
<td >￥15000</td>
<td >￥15000</td>
<td > </td>
<td >
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="openW()" >修改</a>
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="javascript:void(0);" >删除</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="d2" title="修改单据" class="easyui-dialog" closed="true" modal="true" style="width:400px;height:200px;padding:10px;"
toolbar="#dlg-toolbar" buttons="#dlg-buttons" resizable="true">
Dialog toolbar and buttons are created from existing HTML nodes.
</div>
<div id="dlg-toolbar" style="padding:2px 0">
<table cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td style="padding-left:2px">
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a>
</td>
<td style="text-align:right;padding-right:2px">
<input class="easyui-searchbox"></input>
</td>
</tr>
</table>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" onclick="javascript:alert('save')">Save</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#d2').dialog('close')">Close</a>
</div>
<div id="w" class="easyui-window" title="My Window" closed="true" modal="true" iconCls="icon-save" style="width:500px;height:200px;padding:5px;">
<div class="easyui-layout" fit="true">
<div region="center" border="false" style="padding:10px;background:#fff;border:1px solid #ccc;">
jQuery EasyUI framework help you build your web page easily.
<br/><br/>
click <a href="#" onclick="test()">here</a> to popup another window.
</div>
<div region="south" border="false" style="text-align:right;padding:5px 0;">
<a class="easyui-linkbutton" iconCls="icon-ok" href="javascript:void(0)" onclick="resize()">Ok</a>
<a class="easyui-linkbutton" iconCls="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>
</div>
</div>
</div>
</form>
</body>
</html>
1、closed="true"//默认不显示
2 、modal="true"//是否有遮罩层
3、关闭窗口事件，无论点击取消还是窗口的关闭都会执行
$(function (){
$('#windowsMSG').window({
onClose:function(){ alert("dfsd");}
});
});
easyUI的Dialog和Windows框的应用的更多相关文章
- easyui打开dialog后给弹出框内输入框赋值问题
在写一个弹出页面的时候,里面有一些输入框,需要在弹出的时候从数据库取值并且赋值,刚开始在弹出的时候使用$(id).val(value),结果赋值失败,为空当时纠结了一会,然后突然想到在easyui打开 ...
- Easyui的Dialog的toolbar的自定义添加
最近一直在写快速定制Web表格,基于Easyui,整个过程使用了大量的Easyui的dialog,每个dialog的代码大部分都雷同,感觉代码出现了很大程度的重复,然后想写一个通用的dialog设置函 ...
- easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法
easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...
- Android 代码库（自定义一套 Dialog通用提示框 ）
做Android开发五年了,期间做做停停(去做后台开发,服务器管理),当回来做Android的时候,发现很生疏,好些控件以前写得很顺手,现在好像忘记些什么了,总要打开这个项目,打开那个项目 ...
- vue--vant组件库Dialog弹出框
安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...
- ASP.NET页面使用JQuery EasyUI生成Dialog后台取值为空
原因: JQuery EasyUI生成Dialog后原来的文档结构发生了变化,原本在form里的内容被移动form外面,提交到后台后就没有办法取值了. 解决办法: 在生成Dialog后将它append ...
- 第二百零四节，jQuery EasyUI，Dialog(对话框)组件
jQuery EasyUI,Dialog(对话框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Dialog(窗口)组件的使用方法,这个组件依赖 ...
- jQuery EasyUI/TopJUI创建文本验证框（不写js,纯HTML实现!!!）
jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!) validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改 ...
- JQuery EasyUI dialog弹出框的 close 和 destroy
开发项目中(使用JQuery EasyUI),根据业务需要重叠弹出多个提示框的情况,会出现如下情况:页面出现两个div模块调用同一个弹出页面,页面的数据接受框元素不能实时存储数据解决方案: 使用$(t ...
随机推荐
- Android 强烈推荐：程序员接私活那点事
今天周末在家宅着,并不是我不想运动,是因为北京的雨雪交加导致我想在家写文章,不过想想给大家写文章还是蛮惬意的,望一眼窗外,看一眼雪景,指尖在键盘上跳动,瞬间有种从屌丝程序员转变成了小姑娘们都羡慕的文艺 ...
- 你知道吗？使用任何HTML5开发工具都可开发iOS、Android原生App
APICloud App开发平台一直在不断升级开发工具库,这一年增加了众多开发工具.目的就是让开发者可以选择使用任何自己喜欢的HTML5开发工具去开发App.这次,APICloud把所有关于开发工具的 ...
- 可爱的Python_课后习题_CDay−2 完成核心功能
1. 在前文的grep 实现例子中,没有考虑子目录的处理方式,因为如果直接open 目录进行读grep 是古老实用且高效的模式文本匹配工具,在所有的Unix/Linux 系统中都会默认安装,它最常做的 ...
- C语言的概述--学习c的第二天
以下是整理的知识点: #include <stdio.h>/* 引入stdio.h文件c的标准函数库 */ int main(void)/* 定义一个函数main(),int定义函数返回的 ...
- HDU - 1875 畅通工程再续
Problem Description 相信大家都听说一个“百岛湖”的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实现.现在政府决定大力发展百岛湖,发展首先要解决的问 ...
- NDK开发－Android Studio+gradle-experimental开发ndk
在最新的Android Studio2.2的preview版中,增加全新的ndk支持,使用了新的gradle,以及DSL语言. 新的NDK需要使用新的Gradle插件和新的Android插件来支持! ...
- 谁也无法挡住我访问Google---使用Nginx反向代理攻略
展示最终成果: 浏览器打开 http://www.manda13.com/(慢搭搜索)这个是自己搭建的百度网盘搜索,欢迎测试 点击右上角“原版Google”,就可以访问Google. 是不是很方便. ...
- paper 116：自然图像抠图/视频抠像技术梳理（image matting, video matting）
1. Bayesian Matting, Chuang, CVPR 2001.http://grail.cs.washington.edu/projects/digital-matting/paper ...
- Python快速建站系列-Part.Six-文章内容浏览
|版权声明:本文为博主原创文章,未经博主允许不得转载. 其实到这里网站的基本功能已经完成一半了,第六节就完成文章内容的阅读功能. 完成blogview.html↓ {% extends "m ...
- 用 WEKA 进行数据挖掘，第 1 部分: 简介和回归（转）
http://www.ibm.com/developerworks/cn/opensource/os-weka1/index.html 简介 什么是 数据挖掘?您会不时地问自己这个问题,因为这个主题越 ...