前言

今天下午的天气感觉格外的气闷,整个人有一种黏糊糊的感觉,格外的不舒服。加之立即要放假了了,感觉自己全然坐不住呢(节前综合症么)。只是学习还是的继续的。

原定计划这篇文章本来应该是关于searchBox的介绍的,只是鉴于easyloader里面的依赖关系,searchBox依赖于menubutton,menubutton又依赖于menu和linkbutton。于是乎,打算先对easyui组件中的菜单和按钮进行学习了解。

LinkButton(链接button)

对于链接button因为前面已经做过相关介绍了,这里就不再赘述了.參考"EasyUI基础入门之pagination"就可以。

Menu(菜单)

使用$.fn.menu.defaults重载默认值。

菜单一般是用于上下文菜单的。这是基本组件构建其它菜单组件如menubutton、splibutton。它还能够用于导航和运行命令。

菜单项(menu item)

菜单项代表的是一个单独的项目,是显示在一个菜单里的。包括例如以下属性:

名称 类型 描写叙述信息        默认值
id string 菜单项"id"  
text string 菜单项名称  
iconCls string 一个css类在菜单项右边显示一个16*16图标  
href string 设置点击菜单项的链接  
disable boolean 定义是否禁止菜单项 false
onclik function 单击菜单项函数  

菜单属性

到最新版本号,菜单具有例如以下的一些属性:

名称 类型 描写叙述信息     默认值
zIndex number 菜单的z-index样式,从第一个菜单開始递增(默认值如此大,基本保证了全部菜单项在最上层) 11000000
left number 菜单的左边距 0
top number 菜单的顶边距 0
minWidth number 菜单的最小宽度 120
hideOnUnhover boolean 当设置为true时,鼠标退出时自己主动的隐藏菜单 true

事件

名称 属性 描写叙述信息                      
onShow none 当一个菜单被显示的时候触发。
onHide none 当一个菜单被隐藏的时候触发。
onClick item

当一个菜单被点击时触发。以下的样例显示了怎样处理全部菜单项的点击事件:

<div class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
<div data-options="name:'new'">New</div>
<div data-options="name:'save',iconCls:'icon-save'">Save</div>
<div data-options="name:'print',iconCls:'icon-print'">Print</div>
<div class="menu-sep"></div>
<div data-options="name:'exit'">Exit</div>
</div>
<script type="text/javascript">
function menuHandler(item){
alert(item.name)
}
</script>

方法

对菜单的操作都会有一些方法,比方打开"File"菜单,这一操作什么时候被触发,了解这些在处理起来会更加的心应手(后期查API也是能够的啦)。

名称 參数 描写叙述信息                                                 
options none 返回菜单的options參数对象
show pos 在一个特定的位置显示菜单
hide none 隐藏一个菜单
destroy none 销毁一个菜单
getItem itemEl

获得菜单项数据并将其返回,数据包括下面属性:

target:DOM对象,菜单项目。

id:字符串,分配给元素的ID。

text:字符串,菜单项的文本。

href:字符串,超链接的地址。

disabled:boolean,菜单项是否启用。

onclick:function,点击菜单时将运行的函数。

iconCls:字符串,图标css类。

以下是一个简单的样例:

<div id="mm" class="easyui-menu" style="width:120px;">

<div id="m-new">New</div>

<div>

<span>Open</span>

<div style="width:150px;">

<div><b>Word</b>

</div>

<div>Excel</div>

<div>PowerPoint</div>

</div>

</div>

<div data-options="iconCls:'icon-save'">Save</div>

<div class="menu-sep"></div>

<div>Exit</div>

</div>

var itemEl = $('#m-new')[0]; // the menu item element

var item = $('#mm').menu('getItem', itemEl);

console.log(item);

console.info(item);

之后我们在打开chrome浏览器按F12就可以看到例如以下效果:

setText param   

设置特定菜单的文本,'param'參数包括2个属性:

target:DOM对象,将要被设置的菜单项

text:字符串,新的文本值

一个简单的演示样例:

$(function () {

var item = $('#mm').menu('findItem', 'Save');

$('#mm').menu('setText', {

target: item.target,

text: 'Saving'

});

});

原本的菜单项字符串属性值为"Save",运行上述代码之后变为了"Saving"这里就不再贴图了,可尝试之。

setIcon param

设置特定的菜单项的图标,'param'參数包括两个属性:

target:DOM对象,菜单项目。

iconCls:新的图标css类。

一个简单的样例:

$('#mm').menu('setIcon', {
target: $('#m-open')[0],
iconCls: 'icon-closed'
});
findItem text

依据给定的text查找特定的菜单项,与getItem返回同样的数据。

一个简单样例:

// find 'Open' item and disable it
var item = $('#mm').menu('findItem', 'Open');
$('#mm').menu('disableItem', item.target);
appenditem options

加入一个新的菜单项,參数表示新条目属性。默认情况下,加入的项目将成为一个顶级菜单项,附加的子菜单。附加的子菜单项,父属性应该设置为指定父条目元素,已经有字条目。

'param'參数包括例如以下属性:

parent:待加入新菜单的DOM对象,假设没有被设置,新菜单项将作为顶级菜单加入。

text:字符串,菜单项文本。

href:字符串,超链接地址。

onclick:字符串或者函数,当用户点击菜单项时将要被运行的脚本代码。

iconCls:图标类。

一个简单的演示样例:

// append a top menu item

$('#mm').menu('appendItem', {

text: 'New Item',

iconCls: 'icon-ok',

onclick: function () {

alert('New Item')

}

});



// append a sub menu item

var item = $('#mm').menu('findItem', 'Open'); // find 'Open' item

$('#mm').menu('appendItem', {

parent: item.target, // the parent item element

text: 'Open Excel',

iconCls: 'icon-excel',

onclick: function () {

alert('Open Excel')

}

});

removeitem

itemEl

移除指定的菜单项。
enableitem itemEl 启用指定的菜单项。
disableitem itemEl 禁用菜单项。

Tips: 上面代码演示样例中使用了console.info(console.log),console是控制台打印日志信息的,主要是用于调试的。这里也是建立使用console方式来调试(FF,Chrome)。新手一般使用alert进行调试,这样不仅会是程序中断运行(假设alert在loop中,呵呵累死你),并且打印的信息太简单,并不适合调试。

console能够完美纠正。

使用menu

1、创建菜单

使用html标签创建菜单必须对<div>标签引用'easyui-menu'类,每一个菜单项都将使用<div>标签创建。为菜单加入'iconCls'属性能够指定一个显示在菜单项左側的图标。对菜单引用'menu-sep'类将生成一条菜单分隔线。

<div id="mm" class="easyui-menu" style="width:120px;">
<div>New</div>
<div>
<span>Open</span>
<div style="width:150px;">
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">Save</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>

使用脚本创建菜单而且监听'onClick'事件。

$('#mm').menu({
onClick: function (item) {
if(item.text=="保存")
{
alert("你点击了保存button");
}
}
});

2、显示菜单

当一个菜单创建完成后,默认情况下它是隐藏而不可见的,调用show方法能够显示菜单

$('#mm').menu('show', {
left: 200,
top: 100
});

对于菜单的学习基本上也就这样了,更加具体的内容和Demo能够去easyui官网了解学习。

MenuButton(菜单button)

有了linkbutton和menu的基础之后接下来就能够进入到MenuButton的学习中了。菜单button能够说是下拉菜单的一部分,由一个链接button盒菜单组成。这个链接菜单默认将隐藏显示在菜单内。当用户点击或鼠标移动到链接button时,菜单将显示且同意点击它。

继承$.fn.linkbutton.defaults,使用$.fn.menubutton重载默认值。

依赖于menu和linkbutton

属性

继承linkbutton的属性,也有菜单按钮的独有属性。

名称 类型 描写叙述信息                                              默认值
plain boolean 设置为true的时候将显示简洁效果(链接菜单没有边框) true
menu string 用来创建一个对应菜单的选择器 null
menuAlign string 菜单的对齐方式,从1.3.6開始,可选值为left、right left
duration number 定义鼠标划过button时显示菜单所须要的时间,单位毫秒(几秒之后显示,点击button就可以立即显示) 100

方法

这些方法继承至linkbutton,以下的是为splitbutton加入和重写的。

名称 属性 描写叙述信息                    
options none 返回属性对行啊                                                       
disable none 禁用菜单button
enable none 启用菜单button
destroy none 注销菜单button

使用方式

1、通常情况下使用html创建button:

<div id="mm" style="width:150px;">
<div data-options="iconCls:'icon-undo'">Undo</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>

2、使用javascript创建:

<a href="javascript:void(0)" id="mb">Edit</a>
<div id="mm" style="width:150px;">
<div data-options="iconCls:'icon-undo'">Undo</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
<script>
$(function () {
$('#mb').menubutton({
iconCls: 'icon-edit',
menu: '#mm'
}); });
</script>

关于一些demo,这里就不再做演示了,官网的样例也是比較简单易懂的啦。

SlitButton(分隔button)

移动到分隔或者点击才下拉的菜单button,分隔button有链接button和菜单组长。菜单button被分为两部分。当鼠标移动到分隔符上,一个split会显示出来。菜单显示时鼠标光标位于链接button邮冊部分。

继承$.fn.linkbutton.defaults,使用$.fn.splitbutton.defaults重载默认值。

依赖于菜单和链接button。

属性

属性继承链接button,也有其独有属性,独有属性和菜单按是一样的,这里我就不再展示了,可參考上面菜单button的属性表。

方法

名称 属性 描写叙述信息                                                                            
options none 返回属性对象
disable none

禁用分隔button。演示样例:

$('#sb').splitbutton('disable');
enable none 启用分隔button
destroy none 注销分隔button

使用及Demo

1、使用标签创建分隔button:

<head>
<meta charset="UTF-8">
<title>Basic Draggable - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
data-options="menu:'#mm',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>
<div id="mm" style="width:100px;">
<div data-options="iconCls:'icon-ok'">Ok</div>
<div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>

2、使用脚本创建:

<a href="javascript:void(0)" id="sb" onclick="javascript:alert('ok')">Ok</a>
<div id="mm" style="width:100px;">
<div data-options="iconCls:'icon-ok'">Ok</div>
<div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>
<script>
$(function () {
$('#sb').splitbutton({
iconCls: 'icon-ok',
menu: '#mm'
}); });
</script>

事实上,spliteButton的效果和菜单button的效果很相似,仅仅是细节上spliteButton仅仅有点击或者鼠标移动到分隔符才干下拉菜单。对于其Demo,相同官方的demo十分简单易懂,这里我也就不在演示了。OVER!

EasyUI学习之menu and button(菜单和按钮)的更多相关文章

  1. Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)

    详情请查看http://aehyok.com/Blog/Detail/16.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  2. Android学习笔记--Menu菜单的使用

    实现选项菜单.上下文菜单,以及菜单内部的子菜单. 视图效果: MainActivity 选项菜单 选项菜单的子菜单 上下文菜单(按住按钮或者EditText弹出) 注意:上下文菜单如何弹出?在注册该菜 ...

  3. 菜单和按钮-EasyUI Menu 菜单、EasyUI Linkbutton 链接按钮、EasyUI Menubutton 菜单按钮、EasyUI Splitbutton 分割按钮

    EasyUI Menu 菜单 通过 $.fn.menu.defaults 重写默认的 defaults. 菜单(Menu)通常用于上下文菜单.它是创建其他菜单组件(比如:menubutton.spli ...

  4. bootstrap基础学习【菜单、按钮、导航】(四)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JQUERY 插件开发——MENU(导航菜单)

    JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...

  6. wxPython中菜单、按钮学习

    ---恢复内容开始--- wx.Window 是一个基类,许多构件从它继承.包括 wx.Frame 构件.技术上这意味着,我们可以在所有的 子类中使用 wx.Window 的方法.我们这里介绍它的几种 ...

  7. JQuery EasyUI学习笔记

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html  简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用 ...

  8. Android学习之Menu

    1.普通的Menu 在Activity中覆盖onCreateOptionsMenu(Menu menu)方法,该方法负责生产menu,它是一个回调函数,即当按下手机设备上的menubutton时And ...

  9. Android学习笔记——Menu(二)

    知识点: 这次将继续上一篇文章没有讲完的Menu的学习,上下文菜单(Context menu)和弹出菜单(Popup menu). 上下文菜单 上下文菜单提供对UI界面上的特定项或上下文框架的操作,就 ...

随机推荐

  1. 2、Python基本数据类型

    1.算数运算: 2.比较运算: 3.赋值运算: 4.逻辑运算: 5.成员运算: 基本数据类型 1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即- ...

  2. MySQL的安装及使用教程

    MySQL的安装及使用教程 一.  MySQL的下载及安装 首先登陆MySQL的官网,选择Downloads→Windows→MySQL Installer→Windows(x86,32-bit),M ...

  3. bootstrap课程3 bootstrap中常用的排版样式有哪些

    bootstrap课程3 bootstrap中常用的排版样式有哪些 一.总结 一句话总结:bootstrap里面对常用表情比如p.h1.code等html中的常用表情都修改了样式,照着手册用就好,样式 ...

  4. 【HDU】病毒侵袭(AC自己主动机模板题)

    AC自己主动机的模板题.因为输入的字符串中的字符不保证全为小写字母.所以范围应该在130之前,而前31位字符是不可能出如今字符串的(不懂得查下ACSII表即可了).所以仅仅须要开的结点数组大小为130 ...

  5. Uploadify404无效链接

    Uploadify404无效链接 在使用Jquery Uploadify插件的時候.会发如今请求中有个返回值为404的请求. 假如如今的location为www.aa.com/bugs/more. h ...

  6. 应用 Valgrind 发现 Linux 程序的内存问题及交叉编译for arm

    Valgrind 概述 体系结构 Valgrind是一套Linux下,开放源代码(GPL V2)的仿真调试工具的集合.Valgrind由内核(core)以及基于内核的其他调试工具组成.内核类似于一个框 ...

  7. php获取调用本方法的上个方法,php堆栈,函数入库

    $array =debug_backtrace(); //print_r($array);//信息很齐全 unset($array[0]); foreach($array as $row) { $ht ...

  8. 用Ajax图片上传、预览、修改图片

    首选图片的上传和下载并不是很难,但要注意细节. 一,给出前端图片上传的html代码 1.图片上传的控件 <img src="/${res}/images/default.png&quo ...

  9. iOS8下注冊push方式变更

    if (IOS8_) { UIUserNotificationSettings *settings = [UIUserNotificationSettings settingsForTypes:(UI ...

  10. HTML代码简写法:Emmet和Haml(转)

    HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法----简写法. 常用的简写法,目前主要是Emmet和Haml ...