easyUi初次学习之accordion使用

最新推荐文章于 2021-11-10 10:36:21 发布

小熊️程序猿

最新推荐文章于 2021-11-10 10:36:21 发布

阅读量188

点赞数

CC 4.0 BY-SA版权

文章标签： easy-ui

本文链接：https://blog.youkuaiyun.com/lijie_insist/article/details/84687565

本文介绍jQueryEasyUI，一个基于jQuery的UI插件集合体，旨在帮助开发者轻松创建功能丰富且美观的网页UI。通过使用jQueryEasyUI提供的组件如datagrid、treegrid、panel等，开发者无需复杂的JavaScript和深入的CSS知识即可快速实现界面设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签

jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid（数据网格）、treegrid（树形表格）、 panel（面板）、combo（下拉组合）等等。用户可以组合使用这些组件，也可以单独使用其中一个。

[img]http://dl2.iteye.com/upload/attachment/0103/5662/9ecba015-97f7-3c5a-9053-0797833921d6.jpg[/img]

根据自己的路劲导入需要的css文件和js文件

<head>
	<link rel="stylesheet" type="text/css" href="css/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="js/jquery/jquery-easyui-1.2.1/themes/icon.css">
	<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery/jquery-easyui-1.2.1/jquery.easyui.min.js"></script>

  </head>

<body>
   <div id='tt' class="easyui-accordion" style="width: 100px"> 
    	<div title='tab1'  style="overflow: hidden;"  >
    		accordion1
    	</div>
    	<div title='tab2' class="subContent">
    		accordion2
    	</div>
    	<div title='tab3' icon="icon-reload"  class="subContent">
    		accordion3
    	</div>
    </div>	
  </body>

记得class=easyui-accordion!我是用的eclipse创建的web项目,所以启动tomcat,输入地址得到如下结果:

[img]http://dl2.iteye.com/upload/attachment/0103/5676/8b6c19f1-a0fa-3f96-8cb7-d7a49344a0e1.jpg[/img]