easyui 入门

简介: http://www.cnblogs.com/tangge/p/3214496.html 1.页面引用. jquery,easyui,主题easyui.css,图标ico.css,语言zh_CN.

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.                 }, {
  31.                     text: '取消',
  32.                     handler: function () {
  33.                         $('#LoginInputForm').form('clear');
  34.                     }
  35.                 }]
  36.             });
  37.             
  38.             //表单的提交要求
  39.             LoginInputForm = $('#LoginInputForm').form({
  40.                 url: '/Login.ashx',
  41.                 onSubmit: function () {
  42.                     // do some check   
  43.                     // return false to prevent submit;   
  44.                 },
  45.                 success: function (data) {
  46.                     //alert(data);
  47.                     console.info(data);
  48.                     $.messager.show({
  49.                         title: '提示',
  50.                         msg: data
  51.                     })
  52.                 },
  53.             });
  54.  
  55.  
  56.  
  57.  
  58.  
  59.         })
  60.     </script>
  61. </head>
  62. <body>
  63.  
  64.     <div id="LoginAndRegDialog" title="用户登录" style="width: 250px; height: 200px;">
  65.         <form id="LoginInputForm" method="post">
  66.             <table style="margin-top: 20px">
  67.                 <tr>
  68.                     <th>用户名:</th>
  69.                     <td>
  70.                         <!--直接使用验证规则class="easyui-validatebox"-->
  71.                         <input name="name" class="easyui-validatebox" data-options="required:true" />
  72.                     </td>
  73.                 </tr>
  74.                 <tr>
  75.                     <th align="right">密码:</th>
  76.                     <td>
  77.                         <input name="password" type="password" />
  78.                     </td>
  79.                 </tr>
  80.             </table>
  81.         </form>
  82.     </div>
  83.  
  84. </body>
  85. </html>
  86.  

 

 

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

 

image

 

 

jQuery EasyUI 1.3 中文帮助手册

easyUI1.3.chm.7z

目录
相关文章
|
Web App开发 JavaScript 前端开发
EasyUI之Hello world(EasyUI的入门学习)
1:创建一个动态web工程:    去官网http://www.jeasyui.net/download/下载官网文档    我去官网下载的最新版本,个人根据自己的需求下载即可。 点击之后看到很多版本,根据自己的需求进行下载:   选择版本之后就可以进行下载了(这里下载免费版本):   2:在webContent下面创建js文件和easyUi文件。
1342 0
|
前端开发 JavaScript 程序员
EasyUI入门:如何引入及简单使用
        也许,只有当做比较大的项目的时候,才会发现封装好的东西会为程序猿们带来多少方便。合作开发的时候更应该强调复用,才能更加发挥团队的优势。         今天使用了一些EasyUI,发现很wonderful!         比如,以前,我们为了写一个还看得过去的按钮,得先在HTML里面加入按钮,然后在CSS里面写入样式,又用JS控制它的事件,整个按钮写下来,我们已经快被烦死了,抬起头看看,我们还有label,dropList,text......等N多个这样的东西要写。
1337 0

相关实验场景

更多