easyui的入门

最新推荐文章于 2024-07-25 21:13:00 发布

槿辰_00

最新推荐文章于 2024-07-25 21:13:00 发布

阅读量346

点赞数 2

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/cxy_06/article/details/124575075

版权

   从效果来看easyui的界面效果要远远差于bootstrap
   跟layui比，界面效果也更差
   从金钱的角度上，开发首先会排除掉bootstrap
   从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要
   优于layui
    从公司的角度考虑选用那个框架
   成本、公司的后端技术人员前端功底、前端的社区活跃度

一、easyui是什么？

easyui就是一套基础JQuery的富客户端的UI框架。将常用的控件封装成一个UI库的框架统称富客户端框架。

二、使用步骤

1.导入easyui的库文件

创建一个项目，将easyui的js的框架复制到项目里

2.编写代码

编写一个index.jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'操作一下',split:true" style="width:100px;">
    	<ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>  
    </div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>
</body>  
</html>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了easyui的使用，easyui的优点。

槿辰_00

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
easyui的入门

从效果来看easyui的界面效果要远远差于bootstrap 跟layui比，界面效果也更差从金钱的角度上，开发首先会排除掉bootstrap 从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要优于layui从公司的角度考虑选用那个框架成本、公司的后端技术人员前端功底、前端的社区活跃度文章目录前言一、easyui是什么？二、使用步骤 1.导入easyui的库文件 2.读入数据总结...
复制链接

扫一扫