初学Jquery easyui后台框架基础所了解的知识和注意要点_easyui前端框架的基础知识和使用方法-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34151023/article/details/50785706

Jqueryeasyui是一款基于jQuery的UI插件集合，旨在简化Web开发者创建美观且功能强大的用户界面的过程。只需使用特定的HTML标签，即可实现丰富的界面效果而无需编写复杂的JavaScript代码。本文介绍了如何引入必要的CSS样式和脚本文件，并通过实例展示了按钮、面板等元素的使用方法。

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

首先Jquery easyui是基于jquery语法所写的UI插件的一个集合体，他的创造是为了帮助web程序开发者提供优美并且功能性强的UI页面，开发者不用写复杂的javascript脚本定义过多的css样式，只需要添加相应的html标签即可实现想达到的界面和功能，简单方便值得拥有。

下面就来说一下具体用法，第一Jquery easyui肯定要引用easyui的一些css样式和脚本来支持，比如

                themes/default/easyui.css                themes/icon.css
                jquery.min.js                jquery.easyui.min.js
最常见的这些就可以实现大多的页面，接着写一些常用标签及用法，
     想要添加按钮功能，就需要添加class="easyui_linkbutton",
         添加div，<div id="p" class="easyui-panel" style="设计样式">data-options="iconcls:'icon-save(这里是图标)',         collapsible:true(允许收缩)">
         添加段落，<p  style="font-size:14px(字体大小)">
                  <ul><li>内容</li>
                   </ul></p>
         添加点击事件写onclick="javascript:$("#P（p为段落）").panel('open')"这里以打开段落举例。
  再来说几个方法：面板载入内容
                 <div id="p" class="easyui-panel" style=""
                      data-options="
                                   tools:[{
                                           iconCls:'icon-reload',
                                            handler:function(){
                                             $('p').panel('refresh','_content.html');
                                                               }
                                          }]  "></div> 
          面板的嵌套：
                     <div class="easyui-panel" title="" style="">
                          <div class="easyui-layout" ata-options="fit:true">
                                <div data-options="region:'west',split:true" style="">
                            这是左面嵌套内容
                                </div>
                           </div>
                     </div>
             选项卡：  
                      <div class="easyui-tabs" style=""
                          <div title="About" style="">
                          <div>
                          <div title="lll" style="">
                          </div>
                       </div> 
          添加选项卡：
                      function addTab(subtitle,url){
	if(!$('#tabs').tabs('exists',subtitle)){
		$('#tabs').tabs('add',{
			title:subtitle,
			content:createFrame(url),
			closable:true
		});
	}else{
		$('#tabs').tabs('select',subtitle);
		//$('#mm-tabupdate').click();
	}