EasyUi – 1.入门

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

```
<!DOCTYPE html>
```

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

```
<head>
```

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

```
    <title></title>
```

    <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>

```
    <script type="text/javascript">
```
```
        var LoginAndRegDialog;
```
```
var LoginInputForm;
```
```
        $(function () {
```
```
//对话框dialog
```

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

```
                closable: false,
```
```
                modal: true,
```
```
                buttons: [{
```
```
                    text: '登录',
```
```
                    iconCls: 'icon-ok',
```

                    handler: function () {

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

```
if (LoginInputForm.form('validate')) {
```
```
//表单form提交
```
```
LoginInputForm.submit();
```
```
                        }
```
```
                    }
```
```
                }, {
```
```
                    text: '取消',
```

                    handler: function () {

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

```
                    }
```
```
                }]
```
```
            });
```
```
//表单的提交要求
```

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

```
                url: '/Login.ashx',
```
```
                onSubmit: function () {
```
```
// do some check   
```

                    // return false to prevent submit;

```
},
```

                success: function (data) {

```
//alert(data);
```
```
console.info(data);
```
```
                    $.messager.show({
```

                        title: '提示',

```
                        msg: data
```
```
                    })
```
```
                },
```
```
            });
```
```
        })
```
```
</script>
```
```
</head>
```
```
<body>
```

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

        <form id="LoginInputForm" method="post">

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

```
                <tr>
```

                    <th>用户名：</th>

```
                    <td>
```

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

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

```
                    </td>
```
```
                </tr>
```
```
                <tr>
```

                    <th align="right">密码：</th>

```
                    <td>
```

                        <input name="password" type="password" />

```
                    </td>
```
```
                </tr>
```
```
            </table>
```
```
        </form>
```
```
    </div>
```
```
</body>
```
```
</html>
```

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

public void ProcessRequest(HttpContext context)

```
        {
```

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

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

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

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

```
        }
```

jQuery EasyUI 1.3 中文帮助手册

easyUI1.3.chm.7z

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

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

随机推荐

iOS 开发初级：应用内购买 In-App Purchase
http://blog.csdn.net/songrotek/article/details/8680415 现在有很多应用都使用了In-App Purchase,虽然对于很多用户来说,可能并不喜欢甚 ...
[codevs1157]2^k进制数
[codevs1157]2k进制数试题描述设r是个2k 进制数,并满足以下条件: (1)r至少是个2位的2k 进制数. (2)作为2k 进制数,除最后一位外,r的每一位严格小于它右边相邻的那一位. ...
Ubuntu16.04/centos7 下为chrome/firefox安装flash player插件
为chrome安装flash: 打开终端,输入:sudo apt-get install pepperflashplugin-nonfree 或官网下载安装google-chrome-stable 为 ...
MY_FIRSH_MODULE
模块描述将30个字节的内存空间模仿成设备文件.每次读写不超过30个字节. 模块加载成功之后,需建立设备文件 mknod /dev/mydev c 231 0 模块代码 #include <li ...
rpm包制作(待实验)
作者:firefoxbug 时间:July 18, 2014 rpm包命名规范对于rpm包的命名符合如下规范. %{NAME}-%{VERSION}-%{RELEASE}.%{ARCH}.rpm N ...
css3 transition的各种ease效果
http://www.w3school.com.cn/tiy/t.asp?f=css3_transition-timing-function2 linear 平均速度 ease 快启动,慢停止,物理原 ...
Git索引
原文: http://gitbook.liuhui998.com/7_4.html git中的索引(index)是一个存放了排好序的路径的二进制文件(通常是.git/index), 每一个条目都附带有 ...
[转]JVM内存堆布局图解分析
JAVA能够实现跨平台的一个根本原因,是定义了class文件的格式标准,凡是实现该标准的JVM都能够加载并解释该class文件,据此也可以知道,为啥Java语言的执行速度比C/C++语言执行的速度要慢 ...
SharePoint2010母版页想要的定制
查找<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle"用style="disp ...
poj 1442
一个排序的题目. 题意:给你m个数a[m],和n个数b[n]. 首先a[0]….a[b[0]]排序.输出第一个数. 然后a[0]….a[b[1]]排序.输出第二个数. 以此类推,直到输出第n个数. 思 ...

EasyUi – 1.入门

jquery,easyui,主题easyui.css,图标ico.css,语言zh_CN.js

2.parser组件panel组件

3.Form表单的验证(validate)提交

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

随机推荐

热门专题