JQuery EasyUI(17)_easyui 1.10.17-优快云博客

第十七章：MenuButton（菜单按钮）组件

学习要点：

加载方式
属性列表
菜单方法

一、加载方式：

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-menubutton" data-options="iconCls:'icon-edit',menu='#box'">编辑</a>

      <div id="box" class="easyui-menu" 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" class="easyui-menubutton" 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>

$(function(){

  $('#box').menubutton({
      
  });
});

二、属性列表：

MenuButton属性列表
属性名	值	说明
plain	boolean	为true时显示简易效果，默认为false。
menu	string	用来创建一个对应菜单的选择器。
duration	number	定义鼠标划过按钮时显示菜单所持续的时间，单位为ms，默认为100。

三、菜单方法：

菜单方法
属性名	值	说明
options	none	返回属性对象
disable	none	禁用菜单按钮
enable	none	启用菜单按钮
destory	none	销毁菜单按钮

扩展自$.fn.linkbutton.defaults。使用$.fn.menubutton.defaults重写默认值对象。

<!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').menubutton({
      menu:'#box',
      iconCls:'icon-edit',
      plain:false,
      duration:500,
      //disable:true,
  });
     //console.log($('#edit').menubutton('options'));
      $('#edit').menubutton('disable');
      $('#edit').menubutton('destory');
      $('#edit').menubutton('enable');
});

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102951545

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载