众所周知,EasyUI是一套基于jQuery的插件组合,其目标是帮助web开发人员更轻松地创建丰富美观的UI。
前面我们也学习了如何创建插件,并且列出了EasyUI的所有插件。今天我们将关注两个插件——link button和Panel。
1.LinkButton组件
EasyUI中的LinkButton组件是用于创建超链接按钮的按钮组件,需要通过创建。
它可以显示图标和文本,或者只显示其中之一。按钮宽度可以动态收缩和扩展,以适应其文本标签。
如何创建一个LinkButton?之前了解过,插件的创建分为HTML创建和JS创建!
如何创建HTML:
& lta id = & quotbtn & quothref = & quot# & quot数据选项= & quoticonCls:& # 39;图标搜索& # 39;”& gteasyui & lt/a & gt;
JS创建方法:
LinkButton组件的每个属性的功能如下。
icon cls:icon;
Plain:设置为true时,显示简洁效果(实际上没有背景);
Text:按钮文本,默认为空string;
IconAlign:按钮图标位;可选值为left和right默认值为左;
禁用:是否禁用;
以下是图表中未使用的属性。
id:组件的ID属性,为空;默认情况下;
Toggle:是否可以选择效果;
Selected:定义按钮的初始选择状态;
分组:分组,一般配合toggle使用,达到单选的效果;
学习了LinkButton组件的属性和LinkButton组件的方法。
console . log($(& # 39;# btn & # 39).link button(& # 39;选项& # 39;)):返回属性对象;
$('# btn & # 39).link button(& # 39;禁用& # 39;):禁用按钮;
$('# btn & # 39).link button(& # 39;启用& # 39;):启用按钮;
$('# btn & # 39).link button(& # 39;选择& # 39;):选择按钮;
$('# btn & # 39).link button(& # 39;取消选择& # 39;):取消选择按钮;
最后,有一个对象可以覆盖默认值:$。fn . link button . defaults . icon cls = & # 39;图标-添加& # 39;。
2.面板组件
EasyUI中的面板组件是一个面板组件,需要用DIV标签创建。
面板用作装载其他内容物的容器。这是构建其他组件(如布局、选项卡、accord等)的基础。).它还提供折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到网页的任何地方。
面板的创建,以HTML为例。
图表中每个属性的功能。
标题:面板的标题;
风格:面板的风格;
IconCls:面板标题的图标;
可折叠:定义是否显示可折叠按钮;
可最小化:定义是否显示最小化按钮;
可最大化:定义是否显示最大化按钮;
可关闭:定义是否显示关闭按钮;
工具:自定义工具按钮。参数是选择器,代表选择器获取的元素中的内容是工具按钮;
Fit:设置为true时的面板大小“自适应父容器”;简单理解:我和父容器一样大。使用该属性后,我们设置的宽度和高度将无效;
LoadingMessage:加载远程数据时,在面板中显示一条消息;
Href:从URL读取远程数据并显示到面板上;通常,加载动态内容是有用的。(仅加载正文中的内容)一旦设置,面板选项卡中的内容将被覆盖。
关闭:设置是否显示面板。
有许多面板组件属性没有在图中使用,所以我给你一个例子。详情请自行查阅相关文献。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。