通过 $.fn.menu.defaults 重写默认的 defaults。
菜单(Menu)通常用于上下文菜单。它是创建其他菜单组件(比如:menubutton、splitbutton)的基础组件。它也能用于导航和执行命令。
用法
创建菜单(Menu)
通过标记创建菜单(menu)应该添加 'easyui-menu' class 到
<div id&#61;"mm" class&#61;"easyui-menu" style&#61;"width:120px;"><div>Newdiv><div><span>Openspan><div style&#61;"width:150px;"><div><b>Wordb>div><div>Exceldiv><div>PowerPointdiv>div>div><div data-options&#61;"iconCls:&#39;icon-save&#39;">Savediv><div class&#61;"menu-sep">div><div>Exitdiv>
div>
编程创建菜单&#xff08;menu&#xff09;并侦听 &#39;onClick&#39; 事件。
$(&#39;#mm&#39;).menu({onClick:function(item){//...}
});
显示菜单&#xff08;Menu&#xff09;
当菜单&#xff08;menu&#xff09;被创建时&#xff0c;它是隐藏不可见的。调用 &#39;show&#39; 方法来显示菜单&#xff08;menu&#xff09;。
$(&#39;#mm&#39;).menu(&#39;show&#39;, {left: 200,top: 100
});
菜单项
菜单项&#xff08;menu item&#xff09;代表一个显示在菜单中的单独的项目。它包含下列属性&#xff1a;
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
id | string | 菜单项&#xff08;menu item&#xff09;的 id 属性。 | |
text | string | 项目文本。 | |
iconCls | string | 在项目左边显示一个 16x16 图标的 CSS class。 | |
href | string | 当点击菜单项&#xff08;menu item&#xff09;时设置页面位置。 | |
disabled | boolean | 定义是否禁用菜单项&#xff08;menu item&#xff09;。 | false |
onclick | function | 当点击菜单项&#xff08;menu item&#xff09;时被调用的函数。 |
菜单属性
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
zIndex | number | 菜单&#xff08;Menu&#xff09;的 z-index 样式&#xff0c;从它开始增加。 | 110000 |
left | number | 菜单&#xff08;Menu&#xff09;的左边位置。 | 0 |
top | number | 菜单&#xff08;Menu&#xff09;的顶部位置。 | 0 |
minWidth | number | 菜单&#xff08;Menu&#xff09;的最小宽度。该属性自版本 1.3.2 起可用。 | 120 |
hideOnUnhover | boolean | 如果设置为 true&#xff0c;当鼠标离开它时自动隐藏菜单&#xff08;menu&#xff09;。该属性自版本 1.3.5 起可用。 | true |
菜单事件
名称 | 参数 | 描述 |
---|---|---|
onShow | none | 当菜单&#xff08;menu&#xff09;显示之后触发。 |
onHide | none | 当菜单&#xff08;menu&#xff09;隐藏之后触发。 |
onClick | item | 当点击菜单项&#xff08;menu item&#xff09;时触发。下面的实例演示如何处理所有菜单项点击&#xff1a;
|
菜单方法
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项&#xff08;options&#xff09;对象。 |
show | pos | 在指定的位置显示菜单&#xff08;menu&#xff09;。 pos 参数有两个属性&#xff1a; left&#xff1a;新的左边位置。 top&#xff1a;新的顶部位置。 |
hide | none | 隐藏菜单&#xff08;menu&#xff09;。 |
destroy | none | 销毁菜单&#xff08;menu&#xff09;。 |
getItem | itemEl | 获取包含 &#39;target&#39; 属性&#xff08;指示项目 DOM 元素&#xff09;的菜单项&#xff08;menu item&#xff09;属性。下面的实例演示如何通过 id 获取指定的项目&#xff1a;
|
setText | param | 给指定的菜单项&#xff08;menu item&#xff09;设置文本。&#39;param&#39; 参数包含两个属性&#xff1a; target&#xff1a;DOM 对象&#xff0c;被设定的菜单项&#xff08;menu item&#xff09;。 text&#xff1a;string&#xff0c;新的文本值。 代码实例&#xff1a;
|
setIcon | param | 给指定的菜单项&#xff08;menu item&#xff09;设置图标。&#39;param&#39; 参数包含两个属性&#xff1a; target&#xff1a;DOM 对象&#xff0c;即菜单项&#xff08;menu item&#xff09;。 iconCls&#xff1a;新图标的 CSS class。 代码实例&#xff1a;
|
findItem | text | 找到指定的菜单项&#xff08;menu item&#xff09;&#xff0c;返回对象与 getItem 方法相同。 代码实例&#xff1a;
|
appendItem | options | 追加一个新的菜单项&#xff08;menu item&#xff09;&#xff0c;&#39;param&#39; 参数指示新的项目属性。默认情况下&#xff0c;新增的项目将作为顶级菜单项&#xff08;menu item&#xff09;。如需追加一个子菜单项&#xff0c;需设置 &#39;parent&#39; 属性&#xff0c;用来指示已经有子项目的父项目元素。 代码实例&#xff1a;
|
removeItem | itemEl | 移除指定的菜单项&#xff08;menu item&#xff09;。 |
enableItem | itemEl | 启用菜单项&#xff08;menu item&#xff09;。 |
disableItem | itemEl | 禁用菜单项&#xff08;menu item&#xff09;。 |
通过 $.fn.linkbutton.defaults 重写默认的 defaults。
链接按钮&#xff08;linkbutton&#xff09;用于创建一个超链接按钮。它是一个正常的 标记的表示。它可显示图标和文本&#xff0c;或者仅仅显示图标和文本中的一个。按钮宽度可动态收缩/扩展以适应其文本标签。
用法
创建链接按钮&#xff08;linkbutton&#xff09;
从标记创建链接按钮&#xff08;linkbutton&#xff09;更容易。
<a id&#61;"btn" href&#61;"#" class&#61;"easyui-linkbutton" data-options&#61;"iconCls:&#39;icon-search&#39;">easyuia>
编程创建链接按钮&#xff08;linkbutton&#xff09;也是允许的。
<a id&#61;"btn" href&#61;"#">easyuia>
$(&#39;#btn&#39;).linkbutton({iconCls: &#39;icon-search&#39;
});
处理链接按钮&#xff08;linkbutton&#xff09;上的点击。
链接按钮&#xff08;linkbutton&#xff09;上的点击将把用户引导到其他页面。
<a href&#61;"otherpage.php" class&#61;"easyui-linkbutton" data-options&#61;"iconCls:&#39;icon-search&#39;">easyuia>
下面的实例将警告一个消息。
<a href&#61;"#" class&#61;"easyui-linkbutton" data-options&#61;"iconCls:&#39;icon-search&#39;"onclick&#61;"Javascript:alert(&#39;easyui&#39;)">easyuia>
使用 jQuery 绑定 click 处理程序。
<a id&#61;"btn" href&#61;"#" class&#61;"easyui-linkbutton" data-options&#61;"iconCls:&#39;icon-search&#39;">easyuia>
$(function(){$(&#39;#btn&#39;).bind(&#39;click&#39;, function(){alert(&#39;easyui&#39;);});
});
属性
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
id | string | 该组件的 id 属性。 | null |
disabled | boolean | 如果设置为 true&#xff0c;则禁用按钮。 | false |
toggle | boolean | 如果设置为 true&#xff0c;则允许用户切换按钮的选中状态。该属性自版本 1.3.3 起可用。 | false |
selected | boolean | 定义按钮状态是否已选择。该属性自版本 1.3.3 起可用。 | false |
group | string | 指示按钮所属的分组名称。该属性自版本 1.3.3 起可用。 | null |
plain | boolean | 如果设置为 true&#xff0c;则显示一个简单的效果。 | false |
text | string | 按钮文本。 | &#39;&#39; |
iconCls | string | 在左边显示一个 16x16 图标的 CSS class。 | null |
iconAlign | string | 按钮图标的位置。可能的值&#xff1a;&#39;left&#39;、&#39;right&#39;。该属性自版本 1.3.2 起可用。 | left |
方法
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项&#xff08;options&#xff09;属性&#xff08;property&#xff09;。 |
disable | none | 禁用按钮。 代码实例&#xff1a;
|
enable | none | 启用按钮。 代码实例&#xff1a;
|
select | none | 选中按钮。该方法自版本 1.3.3 起可用。 |
unselect | none | 未选中按钮。该方法自版本 1.3.3 起可用。 |
扩展自 $.fn.linkbutton.defaults。通过 $.fn.menubutton.defaults 重写默认的 defaults。
菜单按钮&#xff08;menubutton&#xff09;是下拉菜单的一部分。它与链接按钮&#xff08;linkbutton&#xff09;及菜单&#xff08;menu&#xff09;有关。显示链接按钮&#xff08;linkbutton&#xff09;&#xff0c;隐藏菜单&#xff08;menu&#xff09;。当用户点击或移动鼠标到链接按钮&#xff08;linkbutton&#xff09;上时&#xff0c;将显示菜单&#xff08;menu&#xff09;以允许用户点击菜单。
依赖
- menu
- linkbutton
用法
通常&#xff0c;菜单按钮&#xff08;menubutton&#xff09;以声明的方式从标记创建。
<a href&#61;"Javascript:void(0)" id&#61;"mb" class&#61;"easyui-menubutton"data-options&#61;"menu:&#39;#mm&#39;,iconCls:&#39;icon-edit&#39;">Edita>
<div id&#61;"mm" style&#61;"width:150px;"><div data-options&#61;"iconCls:&#39;icon-undo&#39;">Undodiv><div data-options&#61;"iconCls:&#39;icon-redo&#39;">Redodiv><div class&#61;"menu-sep">div><div>Cutdiv><div>Copydiv><div>Pastediv><div class&#61;"menu-sep">div><div data-options&#61;"iconCls:&#39;icon-remove&#39;">Deletediv><div>Select Alldiv>
div>
使用 Javascript 创建菜单按钮&#xff08;menubutton&#xff09;。
<a href&#61;"Javascript:void(0)" id&#61;"mb">Edita>
<div id&#61;"mm" style&#61;"width:150px">
...
div>
$(&#39;#mb&#39;).menubutton({iconCls: &#39;icon-edit&#39;,menu: &#39;#mm&#39;
});
属性
该属性扩展自链接按钮&#xff08;linkbutton&#xff09;&#xff0c;下面是菜单按钮&#xff08;menubutton&#xff09;增加的属性。
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
plain | boolean | 如果设置为 true&#xff0c;则显示一个简单的效果。 | true |
menu | string | 用于创建对应菜单&#xff08;menu&#xff09;的选择器。 | null |
duration | number | 当悬停在按钮上时&#xff0c;以毫秒为单位定义的&#xff0c;显示菜单&#xff08;menu&#xff09;的持续时间。 | 100 |
方法
该方法继承自链接按钮&#xff08;linkbutton&#xff09;&#xff0c;下面是菜单按钮&#xff08;menubutton&#xff09;增加的或重写的方法。
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项&#xff08;options&#xff09;对象。 |
disable | none | 禁用菜单按钮&#xff08;menubutton&#xff09;。 |
enable | none | 启用菜单按钮&#xff08;menubutton&#xff09;。 |
destroy | none | 销毁菜单按钮&#xff08;menubutton&#xff09;。 |
扩展自 $.fn.linkbutton.defaults。通过 $.fn.splitbutton.defaults 重写默认的 defaults。
与菜单按钮&#xff08;menubutton&#xff09;相似&#xff0c;分割按钮&#xff08;splitbutton&#xff09;也与链接按钮&#xff08;linkbutton&#xff09;及菜单&#xff08;menu&#xff09;有关。与菜单按钮&#xff08;menubutton&#xff09;不同的是&#xff0c;分割按钮&#xff08;splitbutton&#xff09;被分割为两部分。当移动鼠标到分割按钮&#xff08;splitbutton&#xff09;上时&#xff0c;将显示一条分割线。只有当移动鼠标在分割按钮的右侧部分时才显示菜单&#xff08;menu&#xff09;。
依赖
- menubutton
用法
从标记创建分割按钮&#xff08;splitbutton&#xff09;。
<a href&#61;"Javascript:void(0)" id&#61;"sb" class&#61;"easyui-splitbutton"data-options&#61;"menu:&#39;#mm&#39;,iconCls:&#39;icon-ok&#39;" onclick&#61;"Javascript:alert(&#39;ok&#39;)">Oka>
<div id&#61;"mm" style&#61;"width:100px;"><div data-options&#61;"iconCls:&#39;icon-ok&#39;">Okdiv><div data-options&#61;"iconCls:&#39;icon-cancel&#39;">Canceldiv>
div>
使用 Javascript 创建分割按钮&#xff08;splitbutton&#xff09;。
<a href&#61;"Javascript:void(0)" id&#61;"sb" onclick&#61;"Javascript:alert(&#39;ok&#39;)">Oka>
<div id&#61;"mm" style&#61;"width:100px;">
...
div>
$(&#39;#sb&#39;).splitbutton({iconCls: &#39;icon-ok&#39;,menu: &#39;#mm&#39;
});
属性
该属性扩展自链接按钮&#xff08;linkbutton&#xff09;&#xff0c;下面是分割按钮&#xff08;splitbutton&#xff09;增加的属性。
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
plain | boolean | 如果设置为 true&#xff0c;则显示一个简单的效果。 | true |
menu | string | 用于创建对应菜单&#xff08;menu&#xff09;的选择器。 | null |
duration | number | 当悬停在按钮上时&#xff0c;以毫秒为单位定义的&#xff0c;显示菜单&#xff08;menu&#xff09;的持续时间。 | 100 |
方法
该方法继承自链接按钮&#xff08;linkbutton&#xff09;&#xff0c;下面是分割按钮&#xff08;splitbutton&#xff09;增加的或重写的方法。
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项&#xff08;options&#xff09;对象。 |
disable | none | 禁用分割按钮&#xff08;splitbutton&#xff09;。代码实例&#xff1a;
|
enable | none | 启用分割按钮&#xff08;splitbutton&#xff09;。代码实例&#xff1a;
|
destroy | none | 销毁分割按钮&#xff08;splitbutton&#xff09;。 |
转:https://www.cnblogs.com/jiangxiaobo/p/7115494.html