首先找到相关的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 的核心在于其组件系统,这些组件包括但不限于数据网格(datagrid)、下拉菜单(combobox)、对话框(dialog)、表单(form)、布局(layout)、菜单(menu)、面板(panel)、进度条(progressbar)、...
- **菜单(Menu)**:创建多级下拉菜单,常用于导航和操作选项。 - **按钮(Button)**:包括普通按钮、链接按钮、提交按钮等,可触发特定事件。 - **对话(Dialog)**:与窗口类似,但通常用于更复杂的情境,如确认...
在初试 Jquery EasyUI 的 Demo 中,你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码,可以运行...
要实现三级菜单导航,我们需要使用 `jQuery EasyUI` 的 `menu` 组件。这个组件可以方便地创建下拉菜单,通过嵌套的 `menu` 元素实现多级结构。以下是一个基本的代码示例: ```html <ul id="navMenu"> 一级菜单 ...
EasyUI 是基于 jQuery 的一组 UI 组件,它为开发者提供了诸如表格(datagrid)、下拉菜单(combobox)、树形控件(tree)、对话框(dialog)等常见的网页元素。这些组件不仅具有丰富的样式,还内置了大量的功能,如...
1. **组件库**:jQuery EasyUI 提供了多种UI组件,如对话框(Dialog)、表单(Form)、表格(Grid)、树形视图(Tree)、下拉菜单(Menu)等。这些组件都有完整的API和丰富的样式,可以满足开发各种类型Web应用的...
3. **Menu(菜单)**:通过 jQuery EasyUI 的 Menu,可以方便地创建下拉式菜单,用于组织和展示网站的功能。菜单项可以包含子菜单,形成多层次结构,提高用户导航效率。 4. **Form(表单)**:EasyUI 提供的 Form ...
通过`.menu()`,可以创建下拉菜单或者多级菜单,为用户提供直观的操作入口。 4. **按钮(Button)**:不仅仅是简单的点击触发器,EasyUI 的按钮组件还支持图标、状态(如禁用、加载中)以及与其他组件的联动。 5. **...
EasyUI 提供的组件包括窗口(Window)、表格(Grid)、表单(Form)、菜单(Menu)、树形结构(Tree)、下拉树(Combobox)、按钮(Button)等,这些组件都经过精心设计,具有良好的交互性和响应性。 1. **窗口...
1. **组件使用**:首先,你需要熟悉jQuery EasyUI的各种组件,例如`datagrid`用于展示数据表格,`form`处理用户输入,`dialog`创建弹窗对话框,`menu`构建导航菜单等。理解这些组件的API和配置选项,是构建界面的...
5. **菜单(Menu)**: 创建下拉菜单或级联菜单,用于导航或操作。 6. **按钮(Button)**: 包括普通按钮、链接按钮、复选按钮等,可触发事件或操作。 7. **对话框(Dialog)**: 弹出式对话框,常用于确认、提示、...
EasyUI 是一套轻量级的前端框架,它基于jQuery,提供了诸如对话框、表格、下拉菜单、树形结构、面板等众多UI组件。1.4.5版本在前一版本的基础上优化了性能,增加了新功能,并修复了一些已知问题,为开发者带来更...
4. **菜单(Menu)**:创建下拉或级联菜单,方便实现导航和操作选项。 5. **表单(Form)**:提供各种表单元素和验证机制,便于用户输入和数据提交。 6. **按钮(Button)**:创建具有不同功能的按钮,如普通按钮...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,如对话框、表格、下拉菜单等,帮助开发者快速构建用户界面。这个1.3版本的中文离线帮助手册是为开发者提供详尽的文档和示例,便于在...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,如对话框、表格、下拉菜单、树形结构等,帮助开发者快速构建用户界面。1.4.5 版本是该框架的一个稳定版本,其API中文版对于国内开发者...
2. 组件丰富:包括对话框(Dialog)、表格(Grid)、表单(Form)、菜单(Menu)、树形控件(Tree)、下拉选择(Combobox)等多种常见UI组件,满足各种界面需求。 3. 主题支持:内置多套主题,可自定义样式,满足...
1. **组件化**:jQueryEasyUI将常见的用户界面元素如表格、对话框、菜单、按钮等封装为独立的组件,每个组件都有丰富的配置选项和API,便于开发者定制和交互。 2. **数据绑定**:jQueryEasyUI支持通过JSON或Ajax...
- **菜单(Menu)**:创建下拉或弹出菜单,方便用户导航。 - **按钮(Button)**:包括普通按钮、复选按钮、单选按钮等,可与各种事件结合使用。 - **表单(Form)**:提供了各种表单元素,支持验证和数据提交。 3. **...
6. **菜单(Menu)**:创建下拉菜单或级联菜单,常用于网站导航或操作选项。 7. **按钮(Button)**:创建各种类型的按钮,如普通按钮、链接按钮、提交按钮等,可添加图标和事件处理。 8. **布局(Layout)**:...