EasyUi – 1.入门
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 中文帮助手册
easyUI1.3.chm.7z
转载于:https://www.cnblogs.com/tangge/p/3214496.html
EasyUi – 1.入门相关推荐
- EasyUi 快速入门
文章目录 一.easyUI的简介 二.easyUI的不足之处 三.学easyUI的好处 四.easyUI的特点 五.EasyUI的常用组件 总结 一.easyUI的简介 easyui是一款基于jQue ...
- EasyUI框架入门学习
为什么80%的码农都做不了架构师?>>> 前言 新项目的开发前端技术打算采用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给 ...
- EasyUI【入门】
如需温习上一节内容,请点击下方链接进行跳转: Bootstrap03_云彩123的博客-CSDN博客如需温习上一节内容,请点击下方链接进行跳转:Bootstrap----02_云彩123的博客-CSD ...
- EasyUI基础入门之Droppable(可投掷)
怎么说呢Droppable这个单词究竟是什么意思,准确来说easyui作者究竟要表达什么意思,还是不大好拿捏的.只是没关系,没有必要纠结与这些细枝末节的东西,依据官网的demo效果,就简单的将之定义为 ...
- EasyUI基础入门之Pagination(分页)
前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...
- EasyUI快速入门实战教程(一)
1.jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开 ...
- jquery easyUI第一篇【介绍、入门、使用常用的组件】
tags: web前端库 什么是easyUI 我们可以看官方对easyUI的介绍: easyUI就是一个在Jquery的基础上封装了一些组件....我们在编写页面的时候,就可以直接使用这些组件...非 ...
- easyui(快速入门)
目录 1.jQuery EasyUI框架概述 1.1 什么是jQuery EasyUI? 1.2 jQuery Easy的作用 1.3 EasyUI的目录说明 2.WEB项目搭建EasyUI环境 3. ...
- python快速编程入门黑马-500G 史上最全的JAVA全套教学视频网盘分享
500 G JAVA视频网盘分享(JEECG开源社区) [涵盖从java入门到深入架构,Linux.云计算.分布式.大数据Hadoop.ios.Android.互联网技术应有尽有] 2.JPA视频教程 ...
最新文章
- ssm配置socket_ssm框架中集成websocket实现服务端主动向客户端发送消息
- vue 打印 canvas 显示空白
- 汇编 过程 创建并测试 proc endp call ret uses
- APP和网站应该选择云主机还是服务器呢?
- AgilePoint商业流程管理平台
- 详解k8s deployment的滚动更新
- 在Extjs中动态增加控件
- Spark之Master主备切换机制原理
- JSP 九大内置对象及作用域(源码刨析,建议收藏)
- Zip 文件覆盖漏洞曝光,Java、.NET、Go 生态集体中枪
- Linux修改用户名(主机名)
- Vue结合uni-app实现手机端的扫码功能
- iOS录音及播放全解
- python中素数怎么判断_python怎么判断素数
- 九度OJ 1349 数字在排序数组中出现的次数 -- 二分查找
- 逐鹿中原传奇服务器维护,逐鹿中原六十九区服务端
- 可变参C API va_list,va_start,va_arg_va_end以及c++可变参模板
- JDBC-----什么是JDBC
- 出海欧洲《通用数据保护条例》解读,附GDPR白皮书下载
- python 计算股市技术分析PSY指标