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. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <script src="Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
  7.     <script src="Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
  8.     <link href="Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
  9.     <link href="Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
  10.     <script src="Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
  11.     <script type="text/javascript">
  12.         var LoginAndRegDialog;
  13.         var LoginInputForm;
  14.         $(function () {
  15.             //对话框dialog
  16.             LoginAndRegDialog = $("#LoginAndRegDialog").dialog({
  17.                 closable: false,
  18.                 modal: true,
  19.                 buttons: [{
  20.                     text: '登录',
  21.                     iconCls: 'icon-ok',
  22.                     handler: function () {
  23.                         //***先验证(根据自己的需求)
  24.                         if (LoginInputForm.form('validate')) {
  25.                             //表单form提交
  26.                             LoginInputForm.submit();
  27.                         }
  28.                     }
  29.                 }, {
  30.                     text: '取消',
  31.                     handler: function () {
  32.                         $('#LoginInputForm').form('clear');
  33.                     }
  34.                 }]
  35.             });
  36.             
  37.             //表单的提交要求
  38.             LoginInputForm = $('#LoginInputForm').form({
  39.                 url: '/Login.ashx',
  40.                 onSubmit: function () {
  41.                     // do some check   
  42.                     // return false to prevent submit;   
  43.                 },
  44.                 success: function (data) {
  45.                     //alert(data);
  46.                     console.info(data);
  47.                     $.messager.show({
  48.                         title: '提示',
  49.                         msg: data
  50.                     })
  51.                 },
  52.             });
  53.         })
  54.     </script>
  55. </head>
  56. <body>
  57.     <div id="LoginAndRegDialog" title="用户登录" style="width: 250px; height: 200px;">
  58.         <form id="LoginInputForm" method="post">
  59.             <table style="margin-top: 20px">
  60.                 <tr>
  61.                     <th>用户名:</th>
  62.                     <td>
  63.                         <!--直接使用验证规则class="easyui-validatebox"-->
  64.                         <input name="name" class="easyui-validatebox" data-options="required:true" />
  65.                     </td>
  66.                 </tr>
  67.                 <tr>
  68.                     <th align="right">密码:</th>
  69.                     <td>
  70.                         <input name="password" type="password" />
  71.                     </td>
  72.                 </tr>
  73.             </table>
  74.         </form>
  75.     </div>
  76. </body>
  77. </html>
隐藏行号 复制代码 ?Login.ashx
  1.  public void ProcessRequest(HttpContext context)
  2.         {
  3.             context.Response.ContentType = "text/html";
  4.             string username = context.Request["name"];
  5.             string password = context.Request["password"];
  6.             context.Response.Write(username + "你好,你的密码是:" + password);
  7.            
  8.         }

jQuery EasyUI 1.3 中文帮助手册

easyUI1.3.chm.7z

easyui 入门的更多相关文章

  1. EasyUI学习(一)——EasyUI入门

    EasyUI学习总结(一)——EasyUI入门 一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:j ...

  2. EasyUI学习总结(一)——EasyUI入门

    一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.4.1

  3. Easyui入门视频教程 第11集---Window的使用

    目录 Easyui入门视频教程 第11集---Window的使用   Easyui入门视频教程 第10集---Messager的使用  Easyui入门视频教程 第09集---登录完善 图标自定义   ...

  4. Easyui入门视频教程 第10集---Messager的使用

    Easyui入门视频教程 第10集---Messager的使用 <script type="text/javascript"> function show(){ $.m ...

  5. Easyui入门视频教程 第09集---登录完善 图标自定义

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  6. Easyui入门视频教程 第08集---登录实现 ajax button的使用

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  7. Easyui入门视频教程 第06集---Layout初始化和属性方法使用

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  8. Easyui入门视频教程 第05集---Easyui复杂布局

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  9. Easyui入门视频教程 第04集---Easyui布局

    目录 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的 ...

  10. Easyui入门视频教程 第03集---Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教 ...

随机推荐

  1. linux系统字符集

    Linux中中文乱码问题通常是由于字符集与windows不兼容所引起,windows的中文字符集是双字节的GBK编码linux采用的是3字节的utf-8编码,所以在windows下用工具连接linux ...

  2. 克隆机器后eth1变为eth0问题

    1. 清空该文件 2.进入网络配置文件把HADDR 和UUID注释掉,并重启 3.成功修改eth0 4. 4.可以结合这篇帖子来看   http://www.cnblogs.com/zydev/p/4 ...

  3. VBA读取固定文件夹中txt内容

    Sub OneTxt() '打开一个txt文件 Dim Filename As Variant, extLine&, mArr() As String Dim i%, j%, txtpath ...

  4. spring mvc重定向页面

    @RequestMapping(value="/del/{id}") public String delUser(@PathVariable int id){ return &qu ...

  5. 使用SoundPool播放音效

    针对应用程序经常需要播放密集.短促的音效,因为MediaPlayer存在如下缺点: 1.资源占用量较高.延迟时间较长. 2.不支持多个音效同时播放. SoundPool使用音效池的概念来管理多个短促的 ...

  6. c++ 普通高精乘

    //第一次提交全错了,太过相信自己了. //给我教训是注意循环后变量的值,和pascal不一样. //就不贴错误代码了. //codevs3118 高精度练习之除法 #include<cstdi ...

  7. Ibatis.Net 各种配置说明(二)

    一.各个配置文件的作用说明 providers.config:指定数据库提供者,.Net版本等信息. xxxxx.xml:映射规则. SqlMap.config:大部分配置一般都在这里,如数据库连接等 ...

  8. android 之 XMLPull

    Pull解析 Pull的XML解析操作与SAX解析操作类似,也是采用事件驱动的方式.当XML文档开始解析或者遇到节点时都会有相应的事件代码触发. 主要涉及两个类: org.xmlpull.v1.Xml ...

  9. [转] Linux内核代码风格 CodingStyle [CH]

    from:http://blog.csdn.net/jiang_dlut/article/details/8163731 中文版维护者: 张乐 Zhang Le <r0bertz@gentoo. ...

  10. matlab函数调用及数据传递

    http://www.cnblogs.com/duanp/archive/2008/11/29/Matlab-GUIDE.html函数调用 在一个m文件中,可以定义多个函数,但是文件名一定要与第一个函 ...