EasyUI的使用

标签：布局   html   

准备阶段

本次云平台系统使用的是easyui1.3.2， EasyUI 是div布局和jquery的集合体。

我们将jquery-easyui压缩包解压到

，可以看到

在上述文件中被红框框起来的使我们真正需要的。下面一一介绍红框中的文件。

1Demo

demo中是各种easyui的小例子，大家可以用浏览器打开。例如双击..\jquery-easyui\demo\datebox文件下的basic, 打开，在打开的界面中右击查看源代码（或用firebug查看），我们看到关于此页面的div布局，和引用的js,css文件

2Local

Local 是语言包我们只需要easyui-lang-zh_CN,是简体中文的封装。

3jquery-1.8.0.min

jquery-1.8.0.min是我们常说的jquery，是javascript函数的封装，jquery.easyui.min是建立在jquery基础之上的。所以若要引用jquery.easyui.min,则必须引用jquery-1.8.0.min。

4themes

themes中是各种样式，有黑色，灰色… demo中使用的是default，

当然我们可以根据需要引用某个风格文件夹中的easyui.css,easyui.css中定义了所有的demo所需要的css样式，所以我们只要保留easyui.css。

icons文件夹，里边存在的是这几个样式中公共的icon

icon.css中定义的是标志的显示方式和路径。

在MVC应用程序中应用easyui

那么我们如何在MVC应用程序中应用easyui呢。

1. 我们在jquery-easyui中需要的东西保留，或者可以全部保留，因为easyui整体不大，对一个程序的加载，不存在过多的影响。

2. 将jquery-easyui文件夹复制到客户端的Content文件夹下

以上是easyui使用的主意事项。

具体到我们的基础系统：

1. 将四个系统总体框架所需要的文件，粘贴到相应的位置：

这样我们已经完成了大部分工作

2. 接下来我们要做的是改变系统的起始布局页
   1. 打开_ViewStart.cshtml,将布局页改为EasyUILayout.cshtml

4. 从新生成解决方案，运行，就可以看到
5. 那么大家肯定会有疑问，添加校区页面是如何显示在框架内部的。

其实很简单，我们在EasyUILayOut.cstml中可以找到

这里的@RenderBody就是盛放系统起始页内容的位置。也就是~/Campus/Index中的内容。

每个布局页之间都是可以相互引用的，所以我们在人事的index页中以部分页的方式，引用添加项目分布页。

并将global.aspx中的起始页定位人事中的index,

从新生成解决方案，并运行，即可得到

布局页面还有节（Section）的概念，也就是说，如果某个视图模板中定义了一个节，那么可以把它单独呈现出来，用法如下：

@RenderPage(“~/Views/Shared/_Header.cshtml”) 

@RenderBody() 

@RenderSection(“footer”)

当然还要在视图中定义节，否则会出现异常：

@section footer { 

   <b>Footer Here</b> 

}

easyui的使用，就介绍到这，如有疑惑，请联系我

EasyUI的使用

标签：布局   html   

原文地址：http://blog.csdn.net/tgbsqliuying/article/details/43339947