jQuery Easy UI 实例
2012-06-20 17:11
162 查看
jQuery EasyUI就不用介绍了,一款轻量级UI框架,现在对于这方面的资源网上也不少,但是真正的实例却也很少,尤其是.Net方面的,不过现在孙宇一直在发布一些EasyUI的视频,对大家的帮助可能很大,我呢,仅通过一个实例给广大小白们介绍怎样使用EasyUI(其实自己也是小白,嘿嘿)。
在这里借助疯狂秀才的界面框架,大家都感觉挺不错的。
![](http://pic002.cnblogs.com/images/2012/351208/2012061918025661.jpg)
大家也都知道.Net服务器端控件的弊端,因此咱们完全放弃服务器端控件,全部用客户端控件。
下面做一些准备工作。
以下所用文件及资料随后会一并上传,供大家下载!
这里用的是jquery-easyui-1.2.6
![](http://pic002.cnblogs.com/images/2012/351208/2012061918073690.jpg)
和疯狂秀才的网站界面,秀才里面jQuery 和 jQuery EasyUI的版本比较低大家根据情况修改。
下面我只描述增加的部分:
登录窗口
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View
Code
登录窗口初始化JS
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View
Code
AJAX HandlerLogin页面代码
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View
Code
未登录页面
![](http://pic002.cnblogs.com/images/2012/351208/2012061918221078.jpg)
登录后:
![](http://pic002.cnblogs.com/images/2012/351208/2012061918240510.jpg)
主要功能:因为是简单例子,只有用户管理模块:列表、增加、修改、删除
列表:
![](http://pic002.cnblogs.com/images/2012/351208/2012062017013280.jpg)
增加:
![](http://pic002.cnblogs.com/images/2012/351208/2012062017033974.jpg)
修改:
![](http://pic002.cnblogs.com/images/2012/351208/2012062017050889.jpg)
删除:
![](http://pic002.cnblogs.com/images/2012/351208/2012062017061112.jpg)
本文是直接从本人博客园直接复制过来,欢迎大家光临博客园:博客园地址
源码下载
在这里借助疯狂秀才的界面框架,大家都感觉挺不错的。
![](http://pic002.cnblogs.com/images/2012/351208/2012061918025661.jpg)
大家也都知道.Net服务器端控件的弊端,因此咱们完全放弃服务器端控件,全部用客户端控件。
下面做一些准备工作。
以下所用文件及资料随后会一并上传,供大家下载!
这里用的是jquery-easyui-1.2.6
![](http://pic002.cnblogs.com/images/2012/351208/2012061918073690.jpg)
和疯狂秀才的网站界面,秀才里面jQuery 和 jQuery EasyUI的版本比较低大家根据情况修改。
下面我只描述增加的部分:
登录窗口
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View
Code
<div id="formLogin" method="post" url="List.aspx" style="width:300px;height:200px;" title="用户登录"> <table width="100%" style="line-height:50px;border:red 1px;"> <tr align="center"> <td align="right">用户名:</td> <td align="left"><input id="ipt_username" name="ipt_username" type="text" class="easyui-validatebox" required="true"/></td> </tr> <tr align="center"> <td align="right">密码:</td> <td align="left"><input id="ipt_userpwd" name="ipt_userpwd" type="password" class="easyui-validatebox" required="true" /></td> </tr> </table> </div>
登录窗口初始化JS
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View
Code
var formLogin = $('#formLogin'); if (getCookie('username') == null)//未登录显示登录Dialog否则不渲染 formLogin.dialog({ modal: true, closable: false, buttons: [{ text: '登录', handler: function () { if (!formLogin.form("validate")) { return; } $.post( '/Ajax/HandlerLogin.ashx', { "username": $("#ipt_username").val(), "userpwd": $("#ipt_userpwd").val() }, function (a) { if (a == '0') {//登录成功 $.messager.alert('提示', '登录成功', 'info') SetCookie('username', 'wikstone'); formLogin.dialog('close'); } else {//登录失败 $.messager.alert('提示', '登录失败', 'info') } } ); } }] } );
AJAX HandlerLogin页面代码
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View
Code
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; userName = context.Request.Form["username"].ToString(); userPwd= context.Request.Form["userpwd"].ToString(); context.Response.Write(CheckLogin(userName,userPwd)); } private string CheckLogin(string uname, string upwd) { BLL.TUser bll = new BLL.TUser(); DataTable dt = bll.GetList("UserName='"+uname+"' and UserPwd='"+upwd+"'").Tables[0]; if (dt.Rows.Count > 0) { return "0";//登录成功 } else return "1"; }
未登录页面
![](http://pic002.cnblogs.com/images/2012/351208/2012061918221078.jpg)
登录后:
![](http://pic002.cnblogs.com/images/2012/351208/2012061918240510.jpg)
主要功能:因为是简单例子,只有用户管理模块:列表、增加、修改、删除
列表:
![](http://pic002.cnblogs.com/images/2012/351208/2012062017013280.jpg)
增加:
![](http://pic002.cnblogs.com/images/2012/351208/2012062017033974.jpg)
修改:
![](http://pic002.cnblogs.com/images/2012/351208/2012062017050889.jpg)
删除:
![](http://pic002.cnblogs.com/images/2012/351208/2012062017061112.jpg)
本文是直接从本人博客园直接复制过来,欢迎大家光临博客园:博客园地址
源码下载
相关文章推荐
- 工作记录:jquery easy ui和struts2的批量删除实例
- jQuery Easy UI实例(二)
- jQuery Easy UI实例(二)
- jquery easy ui 1.3.4 布局layout(4)
- jQuery UI Draggable + Sortable 结合使用(实例讲解)
- jQuery Easy UI ProgressBar(进度条)组件
- jquery easy ui 学习 (3) window 限制在父类窗体内
- jquery Easy ui 设置下拉combobox 可用与不可用
- easy ui jquery 添加时样式出现问题
- jQuery Easy UI 开发笔记
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- jquery easy ui 选项卡
- jquery easy ui ComboBox 内容过滤
- JQuery Easy Ui dataGrid 数据表格 -->转
- Jquery easy ui的分页,table,数据加载
- 7个jquery easy ui 基本组件图解
- JQuery Easy Ui dataGrid 数据表格
- jQuery Easy UI的使用