您的位置：首页 > 产品设计 > UI/UE

easyUi的环境搭建以及简单应用

2018-01-08 18:48 302 查看
  这是笔者的第一篇博客，希望能够帮到那些和我一样爱学习的人，写的不好还请大家见谅。

 作为一个后端程序员，前端的布局以及样式的编写一直让我很头疼，最近学习了easyUI前端框架，发现前端也可以如此简单，自己也可以做出漂亮的页面了，话不多说，进入正题吧

 首先是easyUI的环境搭建

1.第一步

先从官网http://www.jeasyui.com/download/index.php下载easyUI组件，点击Freeware Edition下面的Download下载即可，下载后进行解压，会有好多文件夹，把目录下的demo删点，这是官网为我们提供的一些例子，可供我们学习的，至于配置上是不需要的。



2.第二步：

打开eclipse或者myeclipse,新建一个web项目，这里笔者以eclipse为例进行配置。将删除demo后的文件夹复制粘贴到WebContent目录下



3.第三步，也是大家比较容易出错的一步了，新建一个jsp文件easyuisupport.jsp，在这个文件里面进行easyUI的引用，这样做是为了防止以后大家要用的时候频繁引用它，浪费了时间也使页面显得太杂乱了，所以统一写在一个页面上，便与查看，也方便其他jsp引用，其他jsp可以通过<jsp:includepage="commonpage/easyuisupport.jsp"/> 或者是<%@ include file="inlayingJsp.jsp" %>的方式引入这个jsp

easyuisupport.jsp中的配置如图



<link rel="stylesheet"type="text/css"href="jquery-easyui-v1.5.3/themes/default/easyui.css"></link>

<link rel="stylesheet"type="text/css"href="jquery-easyui-v1.5.3/themes/icon.css"></link>

<scripttype="text/javascript"src="jquery-easyui-v1.5.3/jquery.min.js"></script>

<scripttype="text/javascript"src="jquery-easyui-v1.5.3/jquery.easyui.min.js"></script>

配置上这四个引用easyUI的环境部署就完成了，剩下的就是他的一个简单使用了

4.第四步

easyUI的简单应用

新建测试jsp test.jsp

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

<jsp:include page="commonpage/easyuisupport.jsp"/>

</head>

<body>

<div id="p" class="easyui-panel" title="Basic Panel" style="width:500px;height:200px;padding:10px;">    

我的hello word! 

</div>

</body>

</html>

然后进行运行测试，看到下图所示界面，表示easyUI配置成功了，后续可以多看看官方包里面的demo，更容易理解如何去使用它。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  前端easyUI的简单配置
相关文章推荐
新的分享
章节导航