使用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就没这个问题!希望对大家有所帮助,这个确实很有意思的。