`
CL315917525
  • 浏览: 232441 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Jquery easyui menu 修改成自己的下拉菜单

阅读更多

首先找到相关的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 帮助文档

    jQuery EasyUI 的核心在于其组件系统,这些组件包括但不限于数据网格(datagrid)、下拉菜单(combobox)、对话框(dialog)、表单(form)、布局(layout)、菜单(menu)、面板(panel)、进度条(progressbar)、...

    jqueryEasyUI

    - **菜单(Menu)**:创建多级下拉菜单,常用于导航和操作选项。 - **按钮(Button)**:包括普通按钮、链接按钮、提交按钮等,可触发特定事件。 - **对话(Dialog)**:与窗口类似,但通常用于更复杂的情境,如确认...

    初试JqueryEasyUI(附Demo)

    在初试 Jquery EasyUI 的 Demo 中,你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码,可以运行...

    jquery easyui 三级菜单导航

    要实现三级菜单导航,我们需要使用 `jQuery EasyUI` 的 `menu` 组件。这个组件可以方便地创建下拉菜单,通过嵌套的 `menu` 元素实现多级结构。以下是一个基本的代码示例: ```html &lt;ul id="navMenu"&gt; 一级菜单 ...

    jQuery easyui 全套文件

    EasyUI 是基于 jQuery 的一组 UI 组件,它为开发者提供了诸如表格(datagrid)、下拉菜单(combobox)、树形控件(tree)、对话框(dialog)等常见的网页元素。这些组件不仅具有丰富的样式,还内置了大量的功能,如...

    jQueryEasyUI1.3.6版本

    1. **组件库**:jQuery EasyUI 提供了多种UI组件,如对话框(Dialog)、表单(Form)、表格(Grid)、树形视图(Tree)、下拉菜单(Menu)等。这些组件都有完整的API和丰富的样式,可以满足开发各种类型Web应用的...

    jquery easyui api

    3. **Menu(菜单)**:通过 jQuery EasyUI 的 Menu,可以方便地创建下拉式菜单,用于组织和展示网站的功能。菜单项可以包含子菜单,形成多层次结构,提高用户导航效率。 4. **Form(表单)**:EasyUI 提供的 Form ...

    jquery easyui demo

    通过`.menu()`,可以创建下拉菜单或者多级菜单,为用户提供直观的操作入口。 4. **按钮(Button)**:不仅仅是简单的点击触发器,EasyUI 的按钮组件还支持图标、状态(如禁用、加载中)以及与其他组件的联动。 5. **...

    Jquery easyUI api 下载

    EasyUI 提供的组件包括窗口(Window)、表格(Grid)、表单(Form)、菜单(Menu)、树形结构(Tree)、下拉树(Combobox)、按钮(Button)等,这些组件都经过精心设计,具有良好的交互性和响应性。 1. **窗口...

    《jQuery EasyUI开发指南》书籍源码

    1. **组件使用**:首先,你需要熟悉jQuery EasyUI的各种组件,例如`datagrid`用于展示数据表格,`form`处理用户输入,`dialog`创建弹窗对话框,`menu`构建导航菜单等。理解这些组件的API和配置选项,是构建界面的...

    JqueryEasyUI1.4参考手册

    5. **菜单(Menu)**: 创建下拉菜单或级联菜单,用于导航或操作。 6. **按钮(Button)**: 包括普通按钮、链接按钮、复选按钮等,可触发事件或操作。 7. **对话框(Dialog)**: 弹出式对话框,常用于确认、提示、...

    jquery-easyui-1.4.5_easyuiapi_

    EasyUI 是一套轻量级的前端框架,它基于jQuery,提供了诸如对话框、表格、下拉菜单、树形结构、面板等众多UI组件。1.4.5版本在前一版本的基础上优化了性能,增加了新功能,并修复了一些已知问题,为开发者带来更...

    jQuery EasyUI 1.4.2 版 API 中文版.zip

    4. **菜单(Menu)**:创建下拉或级联菜单,方便实现导航和操作选项。 5. **表单(Form)**:提供各种表单元素和验证机制,便于用户输入和数据提交。 6. **按钮(Button)**:创建具有不同功能的按钮,如普通按钮...

    jQuery EasyUI 1.3 中文离线帮助手册

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,如对话框、表格、下拉菜单等,帮助开发者快速构建用户界面。这个1.3版本的中文离线帮助手册是为开发者提供详尽的文档和示例,便于在...

    jQuery EasyUI 1.4.5 版 API 中文版.rar

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,如对话框、表格、下拉菜单、树形结构等,帮助开发者快速构建用户界面。1.4.5 版本是该框架的一个稳定版本,其API中文版对于国内开发者...

    jquery-easyui-1.7.0.zip官方文档

    2. 组件丰富:包括对话框(Dialog)、表格(Grid)、表单(Form)、菜单(Menu)、树形控件(Tree)、下拉选择(Combobox)等多种常见UI组件,满足各种界面需求。 3. 主题支持:内置多套主题,可自定义样式,满足...

    jQueryEasyUI

    1. **组件化**:jQueryEasyUI将常见的用户界面元素如表格、对话框、菜单、按钮等封装为独立的组件,每个组件都有丰富的配置选项和API,便于开发者定制和交互。 2. **数据绑定**:jQueryEasyUI支持通过JSON或Ajax...

    jQuery EasyUI版API

    - **菜单(Menu)**:创建下拉或弹出菜单,方便用户导航。 - **按钮(Button)**:包括普通按钮、复选按钮、单选按钮等,可与各种事件结合使用。 - **表单(Form)**:提供了各种表单元素,支持验证和数据提交。 3. **...

    jQuery EasyUI v1.3.5官方API中文版

    6. **菜单(Menu)**:创建下拉菜单或级联菜单,常用于网站导航或操作选项。 7. **按钮(Button)**:创建各种类型的按钮,如普通按钮、链接按钮、提交按钮等,可添加图标和事件处理。 8. **布局(Layout)**:...

Global site tag (gtag.js) - Google Analytics