Easyui概述:
easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。easyui是个完美支持HTML5网页的完整框架。easyui节省您网页开发的时间和规模。easyui很简单但功能强大的。
在jQuery 和 HTML5 上轻松使用EasyUI
jQuery EasyUI 提供易于使用的组件,它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。 这些功能使您的应用适合今天的网络。 有两个方法声明的 UI 组件:
1. 直接在 HTML 声明组件。
2. 编写 JavaScript 代码来创建组件。
- <div class="easyui-dialog" style="width:400px;height:200px"
- data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
- dialog content.
- </div>
- <input id="cc" style="width:200px" />
- $('#cc').combobox({
- url: ...,
- required: true,
- valueField: 'id',
- textField: 'text'
- });
参考资料网站:http://www.jeasyui.net/
下面以介绍在mvc中使用easyui 的方法:(将插件下载过来)
1.新建一个MVC项目,这个就过了。
2.在项目中新建一个文件夹存放插件,如图:
3.接下来去模板中引用 , 如图:
代码:
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="~/asset/easyui1.5/themes/default/easyui.css" rel="stylesheet" />
<script src="~/asset/easyui1.5/jquery.min.js"></script>
<script src="~/asset/easyui1.5/jquery.easyui.min.js"></script>
<script src="~/asset/easyui1.5/locale/easyui-lang-zh_CN.js"></script>
@RenderSection("script",false)
<style>
html,body{
margin:0;
padding:0;
}
</style>
</head>
<body class="easyui-layout">
@RenderBody()
</body>
</html>
4.测试
新建一个控制器,在控制器中新建一个视图(写一个登录表单)
4.1.新建控制器
/// <summary>
/// 用户登录视图
/// </summary>
/// <returns></returns>
public ActionResult Login() {
return View();
}
视图代码:
@{
ViewBag.Title = "登录视图";
Layout = "~/Views/_Layout1.cshtml"; //引用模板
}
<span>用户名:</span><input class="esayui-textbox" type="text" name="uid"/> @*easyui textbox 元素*@
<span>密码:</span><input class="esayui-textbox" type="password" name="uid" />
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">确定</a> @* easyUI 连接按钮*@
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">取消</a>
运行测试: