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)提交




隐藏行号 复制代码 ？ index.html




  1. <!DOCTYPE html>
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5.     <title></title>
    6. 

  6.     <script src="Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
    7. 

  7.     <script src="Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
    8. 

  8.     <link href="Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
    9. 

  9.     <link href="Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
    10. 

  10.     <script src="Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
    11. 

  11.     <script type="text/javascript">
    12. 

  12.         var LoginAndRegDialog;
    13. 

  13. var LoginInputForm;
    14. 

  14.         $(function () {
    15. 

  15. //对话框dialog
    16. 

  16. LoginAndRegDialog = $("#LoginAndRegDialog").dialog({
    17. 

  17.                 closable: false,
    18. 

  18.                 modal: true,
    19. 

  19.                 buttons: [{
    20. 

  20.                     text: '登录',
    21. 

  21.                     iconCls: 'icon-ok',
    22. 

  22.                     handler: function () {
    23. 

  23. //***先验证（根据自己的需求）
    24. 

  24. if (LoginInputForm.form('validate')) {
    25. 

  25. //表单form提交
    26. 

  26. LoginInputForm.submit();
    27. 

  27.                         }
    28. 

  28.                     }
    29. 

    30. 

  30.                 }, {
    31. 

  31.                     text: '取消',
    32. 

  32.                     handler: function () {
    33. 

  33.                         $('#LoginInputForm').form('clear');
    34. 

  34.                     }
    35. 

  35.                 }]
    36. 

  36.             });
    37. 

    38. 

  38. //表单的提交要求
    39. 

  39. LoginInputForm = $('#LoginInputForm').form({
    40. 

  40.                 url: '/Login.ashx',
    41. 

  41.                 onSubmit: function () {
    42. 

  42. // do some check   
    43. 

  43.                     // return false to prevent submit;   
    44. 

  44. },
    45. 

  45.                 success: function (data) {
    46. 

  46. //alert(data);
    47. 

  47. console.info(data);
    48. 

  48.                     $.messager.show({
    49. 

  49.                         title: '提示',
    50. 

  50.                         msg: data
    51. 

  51.                     })
    52. 

  52.                 },
    53. 

  53.             });
    54. 

    55. 

    56. 

    57. 

    58. 

    59. 

  59.         })
    60. 

  60. </script>
    61. 

  61. </head>
    62. 

  62. <body>
    63. 

    64. 

  64.     <div id="LoginAndRegDialog" title="用户登录" style="width: 250px; height: 200px;">
    65. 

  65.         <form id="LoginInputForm" method="post">
    66. 

  66.             <table style="margin-top: 20px">
    67. 

  67.                 <tr>
    68. 

  68.                     <th>用户名：</th>
    69. 

  69.                     <td>
    70. 

  70. <!--直接使用验证规则class="easyui-validatebox"-->
    71. 

  71. <input name="name" class="easyui-validatebox" data-options="required:true" />
    72. 

  72.                     </td>
    73. 

  73.                 </tr>
    74. 

  74.                 <tr>
    75. 

  75.                     <th align="right">密码：</th>
    76. 

  76.                     <td>
    77. 

  77.                         <input name="password" type="password" />
    78. 

  78.                     </td>
    79. 

  79.                 </tr>
    80. 

  80.             </table>
    81. 

  81.         </form>
    82. 

  82.     </div>
    83. 

    84. 

  84. </body>
    85. 

  85. </html>
    86. 











隐藏行号 复制代码 ？ Login.ashx




  1. public void ProcessRequest(HttpContext context)
    2. 

  2.         {
    3. 

  3.             context.Response.ContentType = "text/html";
    4. 

  4. string username = context.Request["name"];
    5. 

  5. string password = context.Request["password"];
    6. 

  6.             context.Response.Write(username + "你好,你的密码是：" + password);
    7. 

    8. 

  8.         }










jQuery EasyUI 1.3 中文帮助手册


easyUI1.3.chm.7z
												


											
EasyUi – 1.入门的更多相关文章
	

    
								
  1. EasyUI基础入门之Pagination(分页)
		
    前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...
    
		
    2. 
						
  2. EasyUI基础入门之Parser(解析器)
		
    前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...
    
		
    3. 
						
  3. EasyUI基础入门之Easyloader(载入器)
		
    在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的 ...
    
		
    4. 
						
  4. jQuery UI 之 EasyUI 快速入门
		
    jQuery EasyUI 基础 转载自(http://www.shouce.ren/api/view/a/3350) jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面 ...
    
		
    5. 
						
  5. EasyUI基础入门之Resiable(可缩放)
		
    easyui的base插件学习已经进行到Resizable(可缩放)了.照旧看看easyui官网的API. Resiable 正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展 ...
    
		
    6. 
						
  6. EasyUI之Hello world（EasyUI的入门学习）
		
    1:创建一个动态web工程:    去官网http://www.jeasyui.net/download/下载官网文档    我去官网下载的最新版本,个人根据自己的需求下载即可.2:在webConte ...
    
		
    7. 
						
  7. easyUI基础入门
		
    头部需要引人文件:<!DOCTYPE html><html><head> <meta charset="utf-8"> <ti ...
    
		
    8. 
						
  8. EasyUi – 1.入门
		
    1.页面引用. jquery,easyui,主题easyui.css,图标ico.css,语言zh_CN.js <script src="Scripts/jquery-easyui-1 ...
    
		
    9. 
						
  9. EasyUI基础入门之Droppable(可投掷)
		
    怎么说呢Droppable这个单词究竟是什么意思,准确来说easyui作者究竟要表达什么意思,还是不大好拿捏的.只是没关系,没有必要纠结与这些细枝末节的东西,依据官网的demo效果,就简单的将之定义为 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. CoreGraphics QuartzCore CGContextTranslateCTM 用法
			
      原点是: 左下角 旋转: 逆时针 位移: 右上为正, 左下为负 CGContextTranslateCTM CGContextRotateCTM CGContextScaleCTM 而且, 以上几 ...
    
			
    2. 
						
  2. 2015安徽省赛 J.镜像树
			
    http://xcacm.hfut.edu.cn/problem.php?id=1214 乱搞题 数组+结构体 递归遍历 #include<iostream> #include<cs ...
    
			
    3. 
						
  3. 6 HandlerDescriptor 处理程序描述类——Live555源码阅读(一)基本组件类
			
    这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/oloroso ...
    
			
    4. 
						
  4. 微博转发关系采集，可拓展关键字采集，评论采集（Java版）
			
    微博模拟登录获取cookis,配置采集深度,采集一条微博转发关系页面,同时解析页面,生成一条微博的传播图,数据集可做微博影响力分析和传播分析 gitthub:https://github.com/ch ...
    
			
    5. 
						
  5. 7.7---找只含3,5,7的数（CC150）
			
    ----思路:利用三个队列,一个存3,一个存5,一个存7. 然后,3*3的都放第一个.然后3*5,5*5的放第二个.然后,3*7,5*7,7*7的都放第三个. 答案: public static in ...
    
			
    6. 
						
  6. poj 1125 (floyd)
			
    http://poj.org/problem?id=1125. 题意:在经纪人的圈子里,他们各自都有自己的消息来源,并且也只相信自己的消息来源,他们之间的信息传输也需要一定的时间.现在有一个消息需要传 ...
    
			
    7. 
						
  7. ios awakeFromNib 和 initWithCoder:
			
    During the instantiation process, each object in the archive is unarchived and then initialized with ...
    
			
    8. 
						
  8. Cxgrid获取选中行列，排序规则，当前正在编辑的单元格内的值
			
    Delphi Cxgrid获取选中行列,排序规则,当前正在编辑的单元格内的值 cxGrid1DBTableView1.Controller.FocusedRowIndex 当前行号 cxGrid1DB ...
    
			
    9. 
						
  9. Application.AddMessageFilter(this);
			
    开发环境:windows 8(x64), vs2013 只要“项目属性-调试”中选中“启用Visual Studio承载进程“,在VS2013中用F5调试,调用Application.AddMessa ...
    
			
    10. 
						
  10. [转]Android中Application类的用法
			
    原文链接:http://www.cnblogs.com/renqingping/archive/2012/10/24/Application.html Application类 Application ...
    
			
    11.