EasyUI的jQuery分裂按钮部件

EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。

在这篇文章中，我们将学习如何使用jQuery EasyUI设计splitbutton。分割按钮是下拉菜单的一部分。它与一个链接按钮和菜单相关联。链接按钮被显示，而菜单被隐藏。

EasyUI for jQuery的下载：

https://www.jeasyui.com/download/index.php

语法:

<div class="splitbutton">
</div>

属性:

duration。悬停在按钮上时显示菜单的时间，以毫秒为单位。
menu。一个选择器，用于创建一个相应的菜单。
plain。这是一个布尔值，用来定义效果，默认值为 “true”，显示普通效果。

方法:

options。该方法返回选项对象。
disable:它已被用于禁用分割按钮。
Enable。它已被用来启用分割按钮。
destroy。该方法用于销毁splitbutton。

CDN链接：首先，添加你的项目需要的jQuery Easy UI脚本，链接是本地路径。

<script type=”text/javascript” src=”jquery.min.js”>
</script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript”
src=”jquery.easyui.min.js”>
</script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript”
src=”jquery.easyui.mobile.js”>
</script>

示例:

<!doctype html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,
        maximum-scale=1.0, user-scalable=no">
             
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
        href="themes/metro/easyui.css">
 
    <link rel="stylesheet" type="text/css"
        href="themes/mobile.css">
 
    <link rel="stylesheet" type="text/css"
        href="themes/icon.css">
 
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js">
    </script>
 
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
        src="jquery.easyui.min.js">
    </script>
     
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
        src="jquery.easyui.mobile.js">
    </script>
 
    <script type="text/javascript">
       $(document).ready(function (){$ ('#gfg').splitbutton({
          disabled: true
        });
      });
    </script>
</head>
 
<body>
 
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery splitbutton widget</h3>
    <a id="gfg" class="easyui-splitbutton">Menu 1</a>
 
</body>
</html>

输出:

EasyUI的jQuery分裂按钮部件