easyui 入门
http://www.cnblogs.com/tangge/p/3214496.html
1.页面引用.
jquery,easyui,主题easyui.css,图标ico.css,语言zh_CN.js
<script src="Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script> <script src="Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script> <link href="Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" /> <link href="Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" /> <script src="Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script> |
2.parser组件panel组件
<body>
<div id="p" class="easyui-panel" title="My Panel"
style="width: 500px; height: 150px; padding: 10px; background: #fafafa;"
data-options="iconCls:'icon-save',closable:true,
collapsible:true,minimizable:true,maximizable:true">
<p>panel content.</p>
<p>panel content.</p>
</div>
<input type="button" name="" onclick="$('#p').panel('open')" value="显示" />
<input type="button" name="" onclick="$('#p').panel('close')" value="关闭" />
<input type="button" name="" onclick="$('#p').panel('destroy')" value="销毁" />
</body>

3.Form表单的验证(validate)提交
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script src="Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<link href="Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
<link href="Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
<script src="Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var LoginAndRegDialog;
var LoginInputForm;
$(function () {//对话框dialog
LoginAndRegDialog = $("#LoginAndRegDialog").dialog({closable: false,
modal: true,
buttons: [{text: '登录',
iconCls: 'icon-ok',
handler: function () {//***先验证(根据自己的需求)
if (LoginInputForm.form('validate')) {//表单form提交
LoginInputForm.submit();
}
}
}, {text: '取消',
handler: function () {$('#LoginInputForm').form('clear');}
}]
});
//表单的提交要求
LoginInputForm = $('#LoginInputForm').form({url: '/Login.ashx',
onSubmit: function () {// do some check
// return false to prevent submit;
},
success: function (data) {//alert(data);
console.info(data);
$.messager.show({title: '提示',
msg: data
})
},
});
})
</script>
</head>
<body>
<div id="LoginAndRegDialog" title="用户登录" style="width: 250px; height: 200px;">
<form id="LoginInputForm" method="post">
<table style="margin-top: 20px">
<tr>
<th>用户名:</th>
<td>
<!--直接使用验证规则class="easyui-validatebox"-->
<input name="name" class="easyui-validatebox" data-options="required:true" />
</td>
</tr>
<tr>
<th align="right">密码:</th>
<td>
<input name="password" type="password" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
public void ProcessRequest(HttpContext context)
{context.Response.ContentType = "text/html";
string username = context.Request["name"];
string password = context.Request["password"];
context.Response.Write(username + "你好,你的密码是:" + password);
}

jQuery EasyUI 1.3 中文帮助手册
easyui 入门的更多相关文章
- EasyUI学习(一)——EasyUI入门
EasyUI学习总结(一)——EasyUI入门 一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:j ...
- EasyUI学习总结(一)——EasyUI入门
一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.4.1
- Easyui入门视频教程 第11集---Window的使用
目录 Easyui入门视频教程 第11集---Window的使用 Easyui入门视频教程 第10集---Messager的使用 Easyui入门视频教程 第09集---登录完善 图标自定义 ...
- Easyui入门视频教程 第10集---Messager的使用
Easyui入门视频教程 第10集---Messager的使用 <script type="text/javascript"> function show(){ $.m ...
- Easyui入门视频教程 第09集---登录完善 图标自定义
目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义 Easyui入门视频教程 第08集---登录实现 ajax button的使用 ...
- Easyui入门视频教程 第08集---登录实现 ajax button的使用
目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义 Easyui入门视频教程 第08集---登录实现 ajax button的使用 ...
- Easyui入门视频教程 第06集---Layout初始化和属性方法使用
目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义 Easyui入门视频教程 第08集---登录实现 ajax button的使用 ...
- Easyui入门视频教程 第05集---Easyui复杂布局
目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义 Easyui入门视频教程 第08集---登录实现 ajax button的使用 ...
- Easyui入门视频教程 第04集---Easyui布局
目录 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义 Easyui入门视频教程 第08集---登录实现 ajax button的 ...
- Easyui入门视频教程 第03集---Easyui布局
Easyui入门视频教程 第03集---Easyui布局 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义 Easyui入门视频教 ...
随机推荐
- PHP获取汉字的转化为拼音字母实现程序
一个完整的php获取汉字拼音字母的实现程序,有需要的朋友可参考一下. <?php class GetPingYing { private $pylist = array( 'a'=>-20 ...
- NSDateFormatter 根据时间戳求出时间
NSDateFormatter 根据时间戳求出时间 - (void)detailWithStyle:(NSString*)style time:(NSInteger)time { // NSStrin ...
- IBatis.Net系列-多参数的SQL语句的配置
我们在使用IBatis.net操作数据的时候,肯定会碰到SQL参数当我们有一个参数时,IBatis的xml映射文件如下: <statement id="getProduct" ...
- CSS基本特性
1.块状元素有大小:行内元素没有,除非脱离文档流(如float.absolute) 2.内部元素决定大小 不管外面元素是哪种类别(块状或行内),里面元素都可以撑大外面 3.外部元素决定位置
- linux之开发板与宿主机通信--ftp使用
在目标板终端上输入命令: # ftp 192.16.77.66 //192.16.77.66是宿主机IP # cd /home/ //这里可以使用linux命令,但不能使有TAB键 # get ...
- matlab图形句柄属性总结
原文在于雪漫的bloghttp://blog.sina.com.cn/s/blog_4b9b714a0100cce2.html这两天在看句柄式图形方面的东西,以下是我在看书过程中整理的学习笔记,比较详 ...
- Android的R.java文件
1.Android资源管理简介: Android应用程序资源可以分为两大类,分别放在assets和res文件夹下.assets目录下保存的是一些原始的文件,可以以任何方式来进行组织.这些文件最终会被原 ...
- [转] Android资源管理框架(Asset Manager)简要介绍和学习计划
转自:http://blog.csdn.net/luoshengyang/article/details/8738877 Android应用程序主要由两部分内容组成:代码和资源.资源主要就是指那些与U ...
- SharePoint 2013 开发——开发自定义操作APP
博客地址:http://blog.csdn.net/FoxDave 自定义操作即我们所说的Ribbon和ECB(Edit Control Block),在SharePoint 2013之前,我们可以 ...
- IOS文件管理-NSFileMangager-NSdata
Ios下的文件管理, Ios下不像windows 文件系统那样可以访问任何的文件目录,如C盘.D盘什么的.在Ios中每个应用程序只能访问当前程序的目录,也即sandbox(沙盒模型). iOS为每个应 ...