使用EasyUI设计.net项目的菜单数实例

最近领导说我们之前的项目采用的菜单树模型过时了,现在采用EasyUI来设计了,于是学习了第三方资源库easyUI,发觉果然是好东西,这里给大家分享下。

首先到官网下载源文件,这个是开源的,都可以下再,分为免费版和企业版,免费版可以直接下载,企业版要申请注册才行。

之后就可以通过看其Demo的源程序来玩儿了,不过需要注意的有以下一些点:

一、下载文件解压后会发现里面有许多的文件,如下图所示:

  但是这些文件具体是干啥的呢?

   demo:JQueryEasyUI的一些示例页面,在项目使用可以将该目录删除;

   locale:该目录中是一些本地化文件,用来支持不同的语言,如中文可以引用其中的easyui-lang-zh_CN.js;

   plugins和 src这两个目录中是支持JQueryEasyUI各种功能的js文件;

   themes:主题目录,目录中有三种主题,default、gray和metro,另外还有一个icons目录和icon.css,在页面使用引用icon.css即可。 

二、

   使用JQueryEasyUI需要引用四个文件,两个css和两个js文件:

   <link rel="stylesheet" type="text/css" href="../support/easy_UI/themes/gray/easyui.css" />

  <link rel="stylesheet" type="text/css" href="../support/easy_UI/themes/icon.css" />

  <script type="text/javascript" src="../support/easy_UI/jquery-1.8.0.min.js"></script>

  <script type="text/javascript" src="../support/easy_UI/jquery.easyui.min.js"></script>

  如果需要使用本地化 还需要引用下面的代码,否则你的代码用不了中文哦!:

  <script type="text/javascript" src="../Scripts/jqueryeasyui/locale/easyui-lang-zh_CN.js"></script>

   还需要注意link的时候,你在项目中第三方库的路径哦!如下图:

   

      我是在项目中建立一个名为support文件夹,再把easyUI的东西放到一个名为Easy_UI的文件下目录下的,所以link时注意我在前面代码部分标注的蓝色部分。

  三、之后只需要依葫芦画瓢就可以设计出来了,如下图:

        

、    这就是一个克折叠的目录树了,是不是比原生的VS Tree好看一些呢。而且原生的还有一些问题,比如放在一个可隐藏的容器中时就不能折叠了,而使用EasyUI就没这个问题!希望对大家有所帮助,这个确实很有意思的。

posted on 2016-05-12 18:00  木乃伊人  阅读(355)  评论(0编辑  收藏  举报

导航