jQuery EasyUI插件的学习，LinkButton和Panel组件-前端培训

我们都知道了，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创建方式：

<a id="btn" href="#">Button</a>
<script>
    $(function(){
      
      
        $("#btn").linkbutton({
      
      
            //设置图标
            iconCls:'icon-search',
            //显示简洁效果
            plain:false,
            text:'',
            //可用值有：left，right
            iconAlign:'right',
            //是否禁用按钮
            disabled:true
        });
        //
        $("#btn").linkbutton('enable');
    });
</script>

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为例。

<div id="p" class="easyui-panel" title="面板"
    style="width:300px; height:200px; padding:10px;"
    iconCls="icon-save"
    collapsible="true"
    minimizable="false"
    maximizable="true"
    closable="true"
    tools="#tt"
    fit="false"
    loadingMessage="加载中..."
    href="#">

图中各属性作用。

Title：面板的标题；

style：面板的样式；

iconCls：面板标题的图标；

collapsible：定义是否显示可折叠按钮；

minimizable：定义是否显示最小化按钮；

maximizable：定义是否显示最大化按钮；

closable：定义是否显示关闭按钮；

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

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

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

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

closed ：设置面板是否显示。

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

jQuery EasyUI插件的学习，LinkButton和Panel组件-前端培训

猜你喜欢