第十八章：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視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載