JqueryEasyui

简介

     jQuery EasyUI是一组基于jQuery的UI插件集合体，而他的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面，开发者只需要了解一些html标签，jQuery EasyUI从名字上就一眼可以了解到Easy，他将很多css和js代码封装起来，在我们需要的时候直接引入就可以。

应用

    1、好的东西用在真实的环境中才能突显他的价值！首先我们需要先下载jQueryEasyui,下载网址如下：

                          

        2、搭建三层环境

                                                 

      3、建立一个文件夹Contents,将第一步下载的easyui中的如下内容复制进来,供我们之后调用

                            

   4、在Views文件夹下建立我们的html页

                           

   5、在我们之前的学习过程中，到了第四步就应该写css代码或者js代码，但是现在还没结束，我们应该在Controllers中添加相应Views文件夹下的控制器，这里我们用到了MVC的内容，如下：

                          

   我们打开一个cs文件，例如，AdminController，我们可以看到其中有一个Action是Index，index的名字是和Views文件夹下Admin文件下的html文件名称相同的。

               

   6、基本的环境搭建好后就要开始编写html代码了，我们首先引入我们需要用的代码，其中我们可以看到我们调用了icon.css，在我们的html代码中直接用了其中的一个data-options="iconCls:'icon-save'"

   7、最后一步就是去浏览器运行一下看看效果了，点击VS中的运行,发现无法找到资源， 看一下地址栏，发现并没有要访问的主页呀！

   然后我们输入如下地址，发现成功了，并且要说明，user是Views文件夹下方的名字，我们可以看到第5步的图中有很多的html页，如果没有指明，那么默认的就是index页，如果想访问其他页，在此举一个例子：locallhost:39456/user/basiclayout，那我们就可以访问basiclayout页了。

        

注意

Easyui的引入顺序一定要注意，jquery在前，easyui在后

    <link href="../Contents/Easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
    <link href="../Contents/Easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
    <script src="../Contents/Easyui/jquery.min.js" type="text/javascript"></script>
    <script src="../Contents/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../Contents/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>