1、菜单
(1)、用法
通过标记创建菜单(menu)应该添加 'easyui-menu' class 到 <div> 标记。每个菜单项(menu item)通过 <div> 标记创建。我们可以添加 'iconCls' 属性到菜单项(menu item),以定义一个显示在菜单项(menu item)左边的图标。添加 'menu-sep' class 到菜单项(menu item)将产生一个菜单(menu)分隔符。
编程创建菜单(menu)并侦听'onClick'事件。
显示菜单(Menu):当菜单(menu)被创建时,它是隐藏不可见的。调用 'show' 方法来显示菜单(menu)。
(2)、菜单项
菜单项(menu item)代表一个显示在菜单中的单独的项目。它包含下列属性:
名称 | 类型 | 描述 | 默认值 |
id | string | 菜单项(menu item)的 id 属性。 |
|
text | string | 项目文本。 |
|
iconCls | string | 在项目左边显示一个 16x16 图标的 CSS class。 |
|
href | string | 当点击菜单项(menu item)时设置页面位置。 |
|
disabled | boolean | 定义是否禁用菜单项(menu item)。 | false |
onclick | function | 当点击菜单项(menu item)时被调用的函数。 |
|
(3)、菜单属性
名称 | 类型 | 描述 | 默认值 |
zIndex | number | 菜单(Menu)的 z-index 样式,从它开始增加。 | 110000 |
left | number | 菜单(Menu)的左边位置。 | 0 |
top | number | 菜单(Menu)的顶部位置。 | 0 |
minWidth | number | 菜单(Menu)的最小宽度。该属性自版本 1.3.2 起可用。 | 120 |
hideOnUnhover | boolean | 如果设置为 true,当鼠标离开它时自动隐藏菜单(menu)。该属性自版本 1.3.5 起可用。 | true |
(4)、菜单事件
名称 | 参数 | 描述 |
onShow | non e | 当菜单(menu)显示之后触发。 |
onHide | none | 当菜单(menu)隐藏之后触发。 |
onClick | item | 当点击菜单项(menu item)时触发。下面的实例演示如何处理所有菜单项点击: |
(5)、菜单方法
名称 | 参数 | 描述 |
options | none | 返回选项(options)对象。 |
show | pos | 在指定的位置显示菜单(menu)。 |
hide | none | 隐藏菜单(menu)。 |
destroy | none | 销毁菜单(menu)。 |
getItem | itemEl | 获取包含 'target' 属性(指示项目 DOM 元素)的菜单项(menu item) 属性。 下面的实例 演示如何通过 id 获取指定的项目: |
setText | param | 给指定的菜单项(menu item)设置文本。'param' 参数包含两个属性: |
setIcon | param | 给指定的菜单项(menu item)设置图标。'param' 参数包含两个属性: |
findItem | text | 找到指定的菜单项(menu item),返回对象与 getItem 方法相同。 |
appendItem | options | 追加一个新的菜单项(menu item),'param' 参数指示新的项目属性。 默认情况下,新增的项目将作为顶级菜单项(menu item)。如需追加 一个子菜单项,需设置 'parent' 属性,用来指示已经有子项目的父 项目元素。 代码实例: |
removeItem | itemEl | 移除指定的菜单项(menu item)。 |
enableItem | itemEl | 启用菜单项(menu item)。 |
disableItem | itemEl | 禁用菜单项(menu item)。 |
(6)、示例
2、链接按钮(Link Button)
通常情况下,使用 <button> 元素来创建按钮,而链接按钮(Link Button)则是使用 <a> 元素来创建的。所以实际上一个链接按钮(Link Button)就是一个显示为按钮样式的 <a> 元素。为了创建链接按钮(Link Button),所有您需要做的就是添加一个名为 'easyui-linkbutton' 的 class 属性到 <a> 元素。
(1)、用法
从标记创建链接按钮(linkbutton)更容易。
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
编程创建链接按钮(linkbutton)也是允许的。
处理链接按钮(linkbutton)上的点击。链接按钮(linkbutton)上的点击将把用户引导到其他页面。
<a href="otherpage.php" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
下面的实例将警告一个消息。
使用 jQuery 绑定 click 处理程序。
(2)、属性
名称 | 类型 | 描述 | 默认值 |
id | string | 该组件的 id 属性。 | null |
disabled | boolean | 如果设置为 true,则禁用按钮。 | false |
toggle | boolean | 如果设置为 true,则允许用户切换按钮的选中状态。该属性自版本 1.3.3 起可用。 | false |
selected | boolean | 定义按钮状态是否已选择。该属性自版本 1.3.3 起可用。 | false |
group | string | 指示按钮所属的分组名称。该属性自版本 1.3.3 起可用。 | null |
plain | boolean | 如果设置为 true,则显示一个简单的效果。 | false |
text | string | 按钮文本。 | '' |
iconCls | string | 在左边显示一个 16x16 图标的 CSS class。 | null |
iconAlign | string | 按钮图标的位置。可能的值:'left'、'right'。该属性自版本 1.3.2 起可用。 | left |
(3)、方法
名称 | 参数 | 描述 |
options | none | 返回选项(options)属性(property)。 |
disable | none | 禁用按钮。 $('#btn').linkbutton('disable'); |
enable | none | 启用按钮。 $('#btn').linkbutton('enable'); |
select | none | 选中按钮。该方法自版本 1.3.3 起可用。 |
unselect | none | 未选中按钮。该方法自版本 1.3.3 起可用。 |
(4)、示例
3、菜单按钮(Menu Button)
菜单按钮(Menu Button)包含一个按钮(button)和一个菜单(menu)组件,当点击或移动鼠标到按钮上,将显示一个对应的菜单。为了定义一个菜单按钮(Menu Button),您应该定义一个链接按钮(Link Button)和一个菜单(menu).
(1)、用法
通常,菜单按钮(menubutton)以声明的方式从标记创建。
使用 javascript 创建菜单按钮(menubutton)。
(2)、属性
该属性扩展自链接按钮(linkbutton),下面是菜单按钮(menubutton)增加的属性。
名称 | 类型 | 描述 | 默认值 |
plain | boolean | 如果设置为 true,则显示一个简单的效果。 | true |
menu | string | 用于创建对应菜单(menu)的选择器。 | null |
duration | number | 当悬停在按钮上时,以毫秒为单位定义的,显示菜单(menu)的持续时间。 | 100 |
(3)、方法
该方法继承自链接按钮(linkbutton),下面是菜单按钮(menubutton)增加的或重写的方法。
名称 | 参数 | 描述 |
options | none | 返回选项(options)对象。 |
disable | none | 禁用菜单按钮(menubutton)。 |
enable | none | 启用菜单按钮(menubutton)。 |
destroy | none | 销毁菜单按钮(menubutton)。 |
(4)、示例
4、分割按钮(Split Button)
与菜单按钮(menubutton)相似,分割按钮(splitbutton)也与链接按钮(linkbutton)及菜单(menu)有关。与菜单按钮(menubutton)不同的是,分割按钮(splitbutton)被分割为两部分。当移动鼠标到分割按钮(splitbutton)上时,将显示一条分割线。只有当移动鼠标在分割按钮的右侧部分时才显示菜单(menu)。
(1)、用法
从标记创建分割按钮(splitbutton)。
使用 javascript 创建分割按钮(splitbutton)。
(2)、属性
该属性扩展自链接按钮(linkbutton),下面是分割按钮(splitbutton)增加的属性。
名称 | 类型 | 描述 | 默认值 |
plain | boolean | 如果设置为 true,则显示一个简单的效果。 | true |
menu | string | 用于创建对应菜单(menu)的选择器。 | null |
duration | number | 当悬停在按钮上时,以毫秒为单位定义的,显示菜单(menu)的持续时间。 | 100 |
(3)、方法
该方法继承自链接按钮(linkbutton),下面是分割按钮(splitbutton)增加的或重写的方法。
名称 | 参数 | 描述 |
options | none | 返回选项(options)对象。 |
disable | none | 禁用分割按钮(splitbutton)。代码实例: $('#sb').splitbutton('disable'); |
enable | none | 启用分割按钮(splitbutton)。代码实例: $('#sb').splitbutton('enable'); |
destroy | none | 销毁分割按钮(splitbutton)。 |
(4)、示例