第十八章：splitButton（分割按钮）组件
学习要点：
- 加载方式
- 属性列表
- 菜单方法
一、加载方式：
1.class 加载方式：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<a href="javascript:void(0)" id="edit" class="easyui-splitbutton" data-options="iconCls:'icon-edit',menu='#box'">编辑</a>
<div id="box" style="width:150,">
<div>剪切</div>
<div>复制</div>
<div>粘贴</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">删除</div>
</div>
</body>
</html>
2.JS调用加载：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<a href="javascript:void(0)" id="edit">编辑</a>
<div id="box" style="width:150,">
<div>剪切</div>
<div>复制</div>
<div>粘贴</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">删除</div>
</div>
</body>
</html>
$(function(){
$('#edit').splitbutton({
});
});
二、属性列表：
| SplitButton属性列表 | ||
|---|---|---|
| 属性名 | 值 | 说明 |
| plain | boolean | 为true时显示简易效果，默认为true。 |
| menu | string | 用来创建一个对应菜单的选择器。 |
| duration | number | 定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒，默认值100。 |
三、菜单方法：
| 菜单方法 | ||
|---|---|---|
| 属性名 | 值 | 说明 |
| options | none | 返回属性对象 |
| disable | none | 禁用菜单按钮 |
| enable | none | 启用菜单按钮 |
| destory | none | 销毁菜单按钮 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<a href="javascript:void(0)" id="edit">编辑</a>
<div id="box" style="width:150,">
<div>剪切</div>
<div>复制</div>
<div>粘贴</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">删除</div>
</div>
</body>
</html>
$(function(){
$('#edit').splitbutton({
menu:'#box',
iconCls:'icon-edit',
plain:false,
duration:500,
//disable:true,
});
//console.log($('#edit').splitbutton('options'));
$('#edit').splitbutton('disable');
$('#edit').splitbutton('enable');
$('#edit').splitbutton('distroy');
});
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/102951545
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载