easyui中建立下拉菜单很简单,定义菜单栏和菜单的MARKUP,然后用jQuery让其运转起来。
先看一个例子的效果图:
现在来看菜单栏怎么定义:
<div style="background:#EDF4E6;padding:5px;width:300px;border:1px solid #ccc;">
<a href="javascript:void(0)" id="sb1" icon="icon-edit" onclick="javascript:alert('edit')">Edit</a>
<a href="javascript:void(0)" id="sb2" icon="icon-ok" onclick="javascript:alert('ok')">Ok</a>
<a href="javascript:void(0)" id="mb3" icon="icon-help">Help</a>
</div>
这栏的markup再简单不过了,再来看看菜单的定义:
<div id="mm1" style="width:150px;">
<div icon="icon-undo">Undo</div>
<div icon="icon-redo">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div>
<span>工具栏</span>
<div style="width:150px;">
<div>地址</div>
<div>链接</div>
<div>导航工具栏</div>
<div>书签工具栏</div>
<div class="menu-sep"></div>
<div>新建工具栏...</div>
</div>
</div>
<div icon="icon-remove">Delete</div>
<div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
<div icon="icon-ok">Ok</div>
<div icon="icon-cancel">Cancel</div>
</div>
<div id="mm3" style="width:150px;">
<div>Help3</div>
<div class="menu-sep"></div>
<div>About3</div>
</div>
这里定义了三个菜单,都是HTML MARKUP,一看就明白。
最后执行菜单的建立语句:
$('#sb1').splitbutton({menu:'#mm1'});
$('#sb2').splitbutton({menu:'#mm2'});
$('#mb3').menubutton({menu:'#mm3'});
这里建立了二种BUTTON,分别称为MenuButton和SplitButton,将其和菜单联系起来。
需要编写的JS语句就这三行。
- 大小: 7.4 KB
分享到:
相关推荐
jQuery EasyUI 1.5.5 版本更新内容 Bug(修复) tabs:修复当标题包含符合元素时,所选择的历史顺序错误的问题; combo:修复当设置了一个较大的'delay'值的时候下拉面板可能不会被隐藏的问题; layout:修复当鼠标...
EasyUI又更新了,这次更新内容还是不少的,具体内容请参考下面的更新说明,官方的更新说明中还少了1条,我给补上了。 jQuery EasyUI 1.3.5版本更新内容: Bug(修复) searchbox:修复“searcher”函数提供的...
使用Jquery-EasyUi完成的一个demo,该Demo是个完成话的前台窗体,实现了各种前台技术,下拉菜单,书签页面。想学习Jquery的同学 可以下载学习。
实用的技术文档,包括树形,下拉菜单,级联查询。分页。页面效果非常好,而且代码比较简洁
拖动与菜单 一般拖动 - Draggable 拖放 - DragDrop 拖放二 - DragDrop 拖放三 - DragDrop 缩放 - Resizable 滑动条 - Slider 菜单 - Menu 菜单按钮 - MenuButton 分隔按钮 - SplitButton 树形...
jQuery EasyUI 1.5.5版本更新内容: Bug(修复) tabs:修复当标题包含符合元素时,所选择的历史顺序错误的问题; combo:修复当设置了一个较大的'delay'值的时候下拉面板可能不会被隐藏的问题; layout:修复当...
jQuery EasyUI 1.5.5 版本更新内容 Bug(修复) • tabs:修复当标题包含符合元素时,所选择的历史顺序错误的问题; • combo:修复当设置了一个较大的'delay'值的时候下拉面板可能不会被隐藏的问题; • layout:...
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验。本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单。
多年收集积累的JS、jQuery插件、UI集合(90个),前端学习资料 11款JQuery动画效果的导航菜单‘等资料 ...CSS图形下拉菜单.rar jQuery+php实现ajax文件即时上传.zip jquery下拉竖导航菜单代码.zip jQuery个性网站桌面
其它的都不说,使用easyui实现三级联动主要就是一层套一层,大家且看代码 html表单 <input id="txtPipeRowName" style="width:150px;"> <input id="txtPipeName" style="width:150px;"> easyUi的...