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




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

  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. 

  54. 

    

    55. 

  55. 

    

    56. 

  56. 

    

    57. 

  57. 

    

    58. 

  58. 

    

    59. 

  59. 

            })
    

    60. 

  60. 

        </script>
    

    61. 

  61. 

    </head>
    

    62. 

  62. 

    <body>
    

    63. 

  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. 

  83. 

    

    84. 

  84. 

    </body>
    

    85. 

  85. 

    </html>
    

    86. 

  86. 

    

    87. 





 


 




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

            }
    

    9. 





 


image


 


 




jQuery EasyUI 1.3 中文帮助手册


easyUI1.3.chm.7z














		

			posted on 
2015-10-24 15:47 
imsoft 
阅读(491) 
评论(0) 
编辑 
收藏 
举报

		

	

	
	
	






    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    






    




    
        

        

导航