初学jQuery Easy UI的总结

最新推荐文章于 2022-11-19 17:11:20 发布

西雅图奶奶

最新推荐文章于 2022-11-19 17:11:20 发布

阅读量2.1k

点赞数 3

分类专栏：所学新知识文章标签： jQuery Easy UI

本文链接：https://blog.csdn.net/qq_38306741/article/details/79114306

版权

所学新知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.使用jQuery Easy UI的目的：

jQuery Easy UI是一组基于jQuery的UI插件集合，而jQuery Easy UI 的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的 UI界面。

官方网站 http://www.jeasyui.com

2.使用jQuery Easy UI完善项目——电脑操作系统，做出以下效果：

2.1引入jQuery 核心库：
<script type="text/javascript" src="jquery.min.js"></script>
引入jQuery EasyUI 核心库：
<script type="text/javascript" src="jquery.easyui.min.js"></script>
添加文件themes(EasyUI中文件)，建议创建一个sourse文件放进去。

添加一个jar包：struts2-spring-plugin-2.3.32.jar

以及插入自己所要用到的html页面

2.2在首页引入EasyUI所需要的界面，在head中所写的内容，复杂的代码可以直接复制源码。

注意：href中路径问题，要根据自己放的地方修改路径。
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
在body中所添加的内容，显示出来的效果就是最外层的样式，
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px" >电脑系统</div>
	<div data-options="region:'west',split:true,title:'West'" style="width:200px;padding:10px;">
	<div class="easyui-accordion">	</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
我所实现的是在最左边的west样式中，显示手风琴的效果，也就是显示四个栏目

在west中添加div,p标签中是跳转的栏目
<div title="查看电脑配件" data-options="iconCls:'icon-ok'" style="padding:10px;">
 <p><a href="look" target="look" >XX电脑配件</a></p> 		
</div>
为了适应所有的页面在center中加入iframe标签，name自己定义名字，并在weast中的div p标签添加target属性，target属性引用

的是iframe中定义的name，这样就可以适应到所要跳转的页面。
<iframe name="look" frameborder="0" width="100%" height="100%"  style="background-color: transparent"></iframe>
2.3手风琴中树状图的引用是用的json，具体实现如下：

定义一个实体类Tree,必须定义的属性如下需要get set，并生成它的映射文件。
private Integer id;
private String text;
private String state;
private Integer parentid;
对Tree进行业务处理，并实现业务，首先通过id对目录进行查询，实现方法返回定义的listre。
//树状图
public List<Tree> findTre(Integer id);
public List<Tree> findTre(Integer id) {
		List<Tree> listre = (List<Tree>) hibernateTemplate.find("from Tree where parentid = ?",id);
		return listre;
	}
新建一个TreeAction，写一个Treejson方法，返回success，调用业务，返回listre。
public String Treejson() {
        listre = comm.findTre(id);
	return SUCCESS;
	}
配置hibernate.cfg.xml，test，xml及struts.xml。下边是struts.xml的配置,里面重要的是type属性是json,param放值
<action name="Treejson" class="TreeAction" method="Treejson">
	<result type="json" name="success">index.jsp
	<param name="root">listre</param>
	</result>
</action>  
最后一步在页面配置，url传的是action里面的name
<div class="easyui-panel" style="padding: 5px">
 <ul class="easyui-tree" data-options="url:'Treejson',method:'get'"></ul>
</div>
最终运行的效果就是开始的界面。

西雅图奶奶

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
初学jQuery Easy UI的总结

1.使用jQuery Easy UI的目的： jQuery Easy UI是一组基于jQuery的UI插件集合，而jQuery Easy UI 的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的 UI界面。官方网站 http://www.jeasyui.com 2.使用jQuery Easy UI完善项目——电脑操作系统，做出以下效果： 2.
复制链接

扫一扫