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




隐藏行号 复制代码 ？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. 

  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. 

  7.            
    8. 

  8.         }








jQuery EasyUI 1.3 中文帮助手册


easyUI1.3.chm.7z




												


																

最新文章
	

    
						
  1. 项目积累html标签
		
    2. 
						
  2. Nagios监控平台之一：在Centos上安装Nagios服务
		
    3. 
						
  3. NYOJ题目872开会
		
    4. 
						
  4. SqlServer Alter Table 语句的用法
		
    5. 
						
  5. CSMA/CD协议
		
    6. 
						
  6. hdu 4502 吉哥系列故事——临时工计划_简单dp
		
    7. 
						
  7. Centos7网络配置+图形界面设置
		
    8. 
						
  8. 简明CSS属性：定位
		
    9. 
						
  9. 2.WP8.1开发_在顶部显示标题和进度
		
    10. 
						
  10. Jenkins : 邮件通知
		
    11. 
						
  11. TOMCAT启动到一半停止如何解决
		
    12. 
						
  12. python dns查询与DNS传输漏洞查询
		
    13. 
						
  13. 洛谷 P3177 树上染色 解题报告
		
    14. 
						
  14. 文件进行MD5计算
		
    15. 
						
  15. java-设计模式-索引
		
    16. 
						
  16. Python：Day06  元组、字典、字符串
		
    17. 
						
  17. 修改输入框placeholder的样式
		
    18. 
						
  18. Java_Mybatis_注解代理写法
		
    19. 
						
  19. JS 通过字符串取得对应对象
		
    20. 
						
  20. hdu4280 Island Transport 最大流
		
    21. 
		

	


热门文章
	

    
									
  1. 谈谈CSS的布局，display、position、float
			
    2. 
						
  2. 使用System.Timers.Timer类实现程序定时执行
			
    3. 
						
  3. list集合的遍历3种方法
			
    4. 
						
  4. POJ 1422 二分图（最小路径覆盖）
			
    5. 
						
  5. 怎么学好python？
			
    6. 
						
  6. Scss   sass
			
    7. 
						
  7. JavaScript中Date的一些细节
			
    8. 
						
  8. iOS多线程之NSOperation，NSOperationQueue
			
    9. 
						
  9. Python   类的一些BIF
			
    10. 
						
  10. Java Proxy
			
    11.