做优质教育·育智慧人才
咨询热线:028-83328890
菁瑞优智it培训 当前位置: 首页> 新闻资讯> 正文

jQuery EasyUI插件的学习,LinkButton和Panel组件-菁瑞优智前端培训

来源:菁瑞优智 作者:小菁 时间:2021-12-28

我们都知道了,EasyUI是一组基于jQuery的插件组合,目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。

前面我们也学习了插件的创建方式,并列举出了EasyUI所有的插件。今天我们着重讲解其中的两个插件-LinkButton和Panel组件。

1、LinkButton组件

EasyUI中的LinkButton组件是一个按钮组件,用于创建一个超链接按钮,需要通过<a>进行创建。

它可显示图标和文本,或者仅仅显示图标和文本中的一个。按钮宽度可动态收缩和扩展以适应其文本标签。

菁瑞优智前端培训

如何创建链接按钮LinkButton?前面已经学习过,插件的创建分为HTML创建和JS创建!

HTML创建方式:

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

JS创建方式:

菁瑞优智前端培训

LinkButton组件各个属性的作用如下。

iconCls:图标;

plain:设置true时显示简洁效果(其实就是没有背景);

text:按钮文字,默认为空字符串;

iconAlign:按钮图标位,可以选值为left,right,默认为left;

disabled:是否禁用;

下面是图中未使用到的属性。

id:组件的ID属性,默认为null;

toggle:是否可以选中效果;

selected:定义按钮初始的选择状态;

group:分组,一般与toggle配合使用,达到单选效果;

学习了LinkButton组件的属性,还有LinkButton组件的方法。

console.log($('#btn').linkbutton('options')):返回属性对象;

$('#btn').linkbutton('disable'):禁用按钮;

$('#btn').linkbutton('enable'):启用按钮;

$('#btn').linkbutton('select'):选择按钮;

$('#btn').linkbutton('unselect'):取消选择按钮;

最后,还有一个可以使用重写默认值对象:$.fn.linkbutton.defaults.iconCls = 'icon-add'。

2、Panel组件

EasyUI中的Panel组件是一个面板组件,需要通过DIV标签进行创建。

面板作为承载其它内容的容器。这是构建其他组件的基础(比如:layout,tabs,accordion等)。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。

Panel的创建,以HTML为例。

菁瑞优智前端培训

图中各属性作用。

Title:面板的标题;

style:面板的样式;

iconCls:面板标题的图标;

collapsible:定义是否显示可折叠按钮;

minimizable:定义是否显示最小化按钮;

maximizable:定义是否显示最大化按钮;

closable:定义是否显示关闭按钮;

tools: 自定义工具按钮。参数是一个选择器,代表选择器获取元素中的内容就是工具按钮;

fit:设置为true的时候面板大小"将自适应父容器";简单理解:父容器多大,我就多大。使用了该属性后,我们设置宽高将失效;

loadingMessage:加载远程数据的时候在面板内显示一条消息;

href:从URL读取远程数据并且显示到面板;一般用于加载动态的内容比较有用. (只加载body里面内容) 一旦设置,那么面板标签中内容会被覆盖掉;

closed :设置面板是否显示。

还有很多图中没有使用到的Panel组件属性,就不一一例举了,详情请自行查看相关文献。

免费预约,试听课程
即将开班,名额有限,火热预约中

免费提升

课程升级,老学员免费学习

免费指导

老学员遇到技术难题,提供技术支持

免费探讨

不定期开展线上、线下公开课

免费吃喝

学员交流会(免费吃喝玩儿乐交友)