首先找到相关的Menu CSS文件:
.menu{
position:absolute;
background:#f0f0f0 url('images/menu.gif') repeat-y;
margin:0;
padding:2px;
border:1px solid #ccc;
overflow:hidden;
}
.menu-item{
position:relative;
margin:0;
padding:0;
height:22px;
line-height:20px;
overflow:hidden;
font-size:12px;
cursor:pointer;
/*border:1px solid transparent;
_border:1px solid #f0f0f0;*/
background-color:#181c25;
color:#FFF;
}
.menu-text{
position:absolute;
text-align:center;
top:0px;
}
.menu-icon{
position:absolute;
width:16px;
height:16px;
top:3px;
left:2px;
}
.menu-rightarrow{
position: absolute;
width:4px;
height:7px;
top:7px;
right:5px;
background:url('images/menu_rightarrow.png') no-repeat;
}
.menu-sep{
margin:3px 0px 3px 24px;
line-height:2px;
font-size:2px;
background:url('images/menu_sep.png') repeat-x;
}
.menu-active{
/*border:1px solid #7eabcd;
background-color:#3573b1;
-moz-border-radius:3px;
-webkit-border-radius: 3px;*/
background-color:#3573b1;
}
悬停样式定义,对齐样式CSS:
a:hover.l-btn{
background-position: bottom right;
outline:none;
}
a:hover.l-btn span.l-btn-left{
background-position: bottom left;
}
a:hover.l-btn-plain{
width:100px;
color:#EEE;
outline:none;
}
a:hover.l-btn-disabled{
background-position:top right;
}
a:hover.l-btn-disabled span.l-btn-left{
background-position:top left;
}
页面引用CSS文件和easyui JS文件,调用方式:
<div id="menudiv"style="width:100px;overflow:hidden;margin:0px;padding:0px;"class="opt_normal">
<a href="javascript:void(0)" id="mb1" class="easyui-menubutton" menu="#mm1" >更多记录</a>
</div>
<div id="mm1" style="width:100px;overflow:hidden;backgroundcolor:black;margin:0px;padding:0px;">
<div style="width:100px;border-color:black;" >Copy</div>
<div style="width:100px;border-color:black;">Cut</div>
</div>
若在ie6下会被Select下拉框遮挡在DIV中加入
<iframe style="position:absolute;z-index:-1;width:100%;height:100%;left:0;top:0;" frameborder="0" scrolling="no" src="about:blank"></iframe>
分享到:
相关推荐
jquery EasyUI的API,方便使用easyui查看。。。。。。
jqueryEasyUI 下载,及api下载 jqueryEasyUI 下载,及api下载
jquery easyui 帮助文档 非常好用的
jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jQuery EasyUI EasyUI 组件范例
jQuery EasyUI 1.4.3 API 中文 jQuery EasyUI 1.4.3 API jQuery EasyUI 1.4.3 API
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...
jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
通过jquery easyui 实现三级菜单导航栏
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
jQuery EasyUI 1.5API 中文版文档 最新版jQuery easy ui
jQuery EasyUI 1.4.2 版 API 中文版手册
jquery easyui 中文api文档 jQuery EasyUI 1.2.4+API.chm jquery.easyui-1.2.6API.chm jquery.EasyUI-1.3.1 API_疯狂秀才.chm
jQuery EasyUI中文参考手册.chm
jQuery EasyUI 1.0.5在menu组件上增加了一个href属性,改属性允许用户在同一个浏览器窗口内展示不同的页面 3. jQuery EasyUI 1.0.5增加了validatebox组件的的校验器。 4. jQuery EasyUI 1.0.5改进了dialog组件,...
使用Jquery EasyUI制作的日历,单击input控件弹出日历选择日期,代码很简单,仅供参考
ssm框架+jquery easyui案例