强烈推荐:简单但非常灵活实用的一款菜单

为庆祝新版QUI的问世,点击这里,特将之前开发的一款很实用菜单组件拿出来与大家分享。马上步入正题开始介绍:

大家之前都可能看过或用过很多菜单组件,有一些菜单组件可能做得很漂亮或者有很好的动画效果。但这种菜单一般都不通用,只能在特定的环境下使用。

我的想法是一个通用的菜单组件应该具备以下特点:

1、代码量很少,包括HTML代码。这样方便使用者使用CSS自定义菜单的风格

2、默认的外观很简洁但通过自定义调整可以展示出不同的样式

3、能够准确地响应鼠标移入动作并快速展开

4、能够以任何元素作为触发源

5、能够支持动态生成的元素触发菜单

精心开发5年的UI前端框架!

按照以上思路,我开发了这个菜单。姑且命名为QUI简易菜单

菜单默认外观如下:

[img]http://dl.iteye.com/upload/attachment/568577/f5b765b7-21a5-380c-9ceb-fd179e2c0914.jpg" alt="[/img]

用颜色和边框绘制的外观,符合默认外观简洁的思想。只要稍花些心思就能做出各种风格出来。

代码量也很少,如下所示:

精心开发5年的UI前端框架!

弹出菜单

状态

相册

分享

日志

也就是说,无论在页面任何位置,使用上述的代码就可以创建一个菜单。哈哈,是不是很方便?

菜单项也可以添加小图标,简单调整后效果如下:

[img]http://dl.iteye.com/upload/attachment/568580/7803c51c-8eae-35c6-9afc-4ee5ea4a9322.jpg" alt="[/img]

代码:

全部操作

新增

查看

修改

删除

保存

精心开发5年的UI前端框架!

菜单链接可以除了文字还可以放图标。效果如下:

[img]http://dl.iteye.com/upload/attachment/568582/7a376ded-2aeb-31ea-a3a3-14db2f67d2ee.jpg" alt="[/img]

代码如下:

状态

相册

分享

日志

通过一个设置一个属性:noBorder="true"实现鼠标移入不出现边框。

动态生成的元素上面也可以使用菜单。HTML动态生成后,调用refreshSimpleMenu()函数来更新菜单显示即可。

例如下面所示:

[img]http://dl.iteye.com/upload/attachment/568584/bcf38901-5e18-3c24-a5fa-288f77c511af.jpg" alt="[/img]

另外这个菜单是 “QUI框架”的一部分,可以下载整个框架来使用更多的组件。

精心开发5年的UI前端框架!

时间: 2024-08-25 20:36:30

强烈推荐:简单但非常灵活实用的一款菜单的相关文章

很简单,但是很实用

1.使用mysql,将查询结果导入到文件中 mysql -umsg -pmsg message -e "select appkey from app" > 1.txt 2.使用Runtime调用系统命令时候碰到一个问题,我想压缩一个文件,而这个文件所在的目录都是动态创建的,压缩时候使用zip,后两个参数填写的是绝对路径名称.发现,这样压缩的文件解压时候会将原来的目录也暴露出来,想了很多办法,都打算调用两个命令了,首先进入到那个目录,然后去压缩文件,未果.后来看到runtime.e

简单实用的二级树形菜单hovertree

原创,欢迎评论推荐. hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://keleyi.com/jq/hovertree/hovertreegreen.htm 可以设置菜单宽度(width),还可以设置是否最多只能有一个一级菜单展开(isCloseOther). isCloseOther的值为false 或者 true,设为true即成为手风琴菜单. 使

8款超酷实用的CSS3 Tab菜单集合

1.CSS3华丽的Tab菜单 带小图标动画 之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单,结合SVG,Tab菜单实现非常灵活.今天我们要再来分享一款基于CSS3的华丽Tab菜单,这款Tab菜单的菜单项是一个个小图标,鼠标滑过时,菜单项展示对应文字,并出现展开的动画. 在线演示 源码下载 2.响应式CSS3 Tab菜单 带小图标菜单 这次要介绍的这款响应式CSS3 Tab菜单非常不错,它看起来挺简单的,而且设计也干净利落,但是Tab菜单的实用性很强.每一个ta

推荐一个强大和灵活的处理XML的开源框架---GenXDM

GenXDM是非常著名的中间件软件厂商TIBCO公司贡献一个出来XML的一个非常灵活和强大的开源框架(基于Apache的License),其提供了一套机制和接口,把所有的DOM的操作和解析模型通过一种统一的方式来实现.因此,GenXDM框架本身提供了AxiomProcessingContext,DomProcessingContext和XmlNodeContext的一套处理机制.其实GenXDM本身只是一个壳子,必选由相应的Axiom,Dom或者XmlNode的配合起来,才能进行XML文件的cr

推荐给开发人员的实用命令行工具

摘要:优秀的工具对于定位问题出在何处有着无可估量的价值,而且能在一开始就帮助我们阻止问题的出现,总的来说能使我们的工作更有效率.本文介绍了6个非常强大且灵活的工具,熟练使用这些工具能使你的生活变得更轻松一些. 作为一名Web开发者,当程序出现问题时日子总不是那么好过.问题可能无处不在,可能是你发送的请求出了错,可能是回复出了错,可能是你使用的某个第三方库出了问题,又或者是一个外部API调用失败了.优秀的工具对于定位问题出在何处有着无可估量的价值,而且能在一开始就帮助我们阻止问题的出现,总的来说能

一种简单,轻量,灵活的C#对象转Json对象的方案

简单,是因为只有一个类 轻量,是因为整个类代码只有300行 灵活,是因为扩展方式只需要继承重写某个方法即可 首先我将这个类称之为JsonBuilder,我希望它以StringBuilder的方式来实现Json字符串的转换 public class JsonBuilder { protected StringBuilder Buff = new StringBuilder(4096);//字符缓冲区 public string ToJsonString(object obj) { .......

Excel高手必备的最为灵活实用的引用函数:Indirect

一.什么是Indirect函数? Indirect函数称之为间接引用函数,间接引用当然是直接引用而言的.直接引用非常简单,我在任意一个单元格输入公式:“=a1”,那么将得到A1单元格的值.而间接引用则完全不同.如果我想通过间接引用函数返回a1单元格的值,我输入的公式为:=indirect('a1',1),这样才能得到A1的值.那么间接引用的优势是是什么呢?文章开头我已经说了答案了,那就是非常灵活,大家注意到indirect函数的参数加了引号,表示是文本.既然是文本,我们就可以灵活地编辑引用地址.

程序员简单打造一个灵活智能的自动化运维系统C#实例程序

你是一个程序员,被派去管理公司500台计算机.这些机器可能需要执行一些自动化任务,一台台手动操作会把你累死.重复性的工作还是交给电脑处理,怎么解决这个问题呢?一个自动化的运维系统是必须的.自己实现的好处是直观,可以掌握运维的每一个环节. 思路 可以在这些电脑上安装一个程序,此程序定期执行一个请求,去我们的中心服务器上获取指令,然后执行这些指令就可以了.这些指令可以是一个脚本文件,但最通用的应该是一个包含指令的压缩包.大体的步骤就是:下载->解压->运行. 实现 客户端开发,C#开发一个wind

灵活实用require.js,让JS加载速度更流畅

当一个网页引入很多js文件,网页加载会变得很慢,并且js文件存在依赖性,有时候颠倒顺序就不能运行了,这很影响用户体验. require.js解决了异步加载,提高网页的加载,同时依赖顺序的js可以用数组排序. 第一部加载require.js放到目录的js子目录下: <script src="js/require.js"></script> 需要加一个参数 defer async="true" 表示这个文件需要异步加载 defer兼容IE版本 需