给菜单加个优雅的unselect事件
先上图,说场景


假设默认选中的是item1,我现在选中item3了,有时候需要对item1做一些别的处理。常见的做法是,切换选中状态前找到当前选中(item1),或者每次选中后选中的项记录在中间变量。
这样处理没任何问题,不过心理总有点怪怪的,最好代码分离,就像这样:
$(this).unselect(fn_unselect).select(fn_select),具体代码是这样的:
$(function ()
{
$.$ul('#menu').children().each(function ()
{ $(this).unselect(function ()
{
$(this).removeClass('selected'); }).select(function ()
{
$(this).addClass('selected')
});
});
});
用到的扩展函数:
$.fn.extend({
unselect: function (callback)
{
//this指unselect的项
if (this[0].tagName === 'LI' && typeof callback === 'function')
{
this.data('unselect', callback);
return this;
}
},
select: function (callback)
{
//this指select的项
if (this[0].tagName === 'LI' && typeof callback === 'function')
{
this.data('select', callback);
return this;
}
}
});
$.extend({
$ul: function (selector)
{
var res = $(selector);
if (res[0].tagName !== 'UL') return undefined;
res.children().each(function ()
{
//实际上这应该是clickAfter事件,此处用setTimeout(fn,delay);代替。即使不用此函数也会先于自定义的click事件
$(this).live('click', function ()
{
var that = this;
var clickAfter=function ()
{
//处理unselect
var unselecting = $(that).siblings('.selected');
unselecting.data('unselect').call(unselecting); //处理select
var selecting=$(that)
selecting.data('select').call(selecting); };
setTimeout(clickAfter, 1);//确保在click后执行
});
});
return res;
}
});
给菜单加个优雅的unselect事件的更多相关文章
- React中如何优雅的捕捉事件错误
React中如何优雅的捕捉事件错误 前话 人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的错误怎么捕捉呢? 这个时候: 小白:怎么处理? 小白+: ErrorBo ...
- [Ext.Net] 1.x GridPanel列数过多给Menu菜单加滚动条
转自:http://www.ext.net.cn/thread-1944-1-2.html 当GirdPanel列数过多,查看列的显示隐藏时会出现下面下面情况,有部分超出了界面被遮罩住了 要解决这 ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点
jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...
- Linux为grub菜单加密码
为grub菜单加密码 加入密码后,再次进入单用户或者给下次管理grub需要输入密码 加密操作 /sbin/grub-md5-crypt # 之后输入2次密码会生成加密后字符串 编辑grub加载文件 v ...
- AutoCAD菜单加载失败 找不到文件mnc 怎么办
菜单加载失败,找不到文件 SWFILECONV(mnu/mns/mnc) 找到CAD安装目录下的swfileconv.arx文件,用记事本打开,清空内容,然后保存即可.
- abp web.mvc项目中的菜单加载机制
abp中的菜单加载机制 在abp中菜单的定义与我们传统写的框架不一样,它是在编写代码的时候配置,而我们一般写的通用权限管理系统中,是后期在后台界面中添加的.这一点有很大不同.abp关于菜单的定义及管理 ...
- angularjs数据异步加载时的绑定事件
// 顶级菜单项的鼠标移入和移出操作 $(document).on({ mouseover: function () { ; ; if (top + $(this).children('ul').ou ...
- ASP.NET Repeater嵌套Repeater实现菜单加载
在KS系统中要实现从数据库中读取界面权限文件实现菜单.界面的动态加载. 效果图: ASP.NET界面代码 <div id="menu-container"> <a ...
- (js有关图片加载问题)dom加载完和onload事件
引用旺旺的话...哈哈哈DOMContentLoaded事件表示页面的DOM结构绘制完成了,这时候外部资源(带src属性的)还没有加载完.而onload事件是等外部资源都加载完了就触发的.$.read ...
随机推荐
- CentOS下mysql默认安装位置
如果采用RPM包安装,安装路径应在/usr/share/mysql目录下 mysqldump文件位置:/usr/bin/mysqldump mysqli配置文件: /etc/my.cnf或/usr/s ...
- Nginx之location 匹配规则详解
有些童鞋的误区 1. location 的匹配顺序是“先匹配正则,再匹配普通”. 矫正: location 的匹配顺序其实是“先匹配普通,再匹配正则”.我这么说,大家一定会反驳我,因为按“先匹配普通, ...
- 连接到Windows Azure Point to Site VPN
Windows Azure支持两种模式的VPN接入: Site to Site,接入端需要有固定的公网IP地址,用于连接局域网和Windows Azure的虚拟网络. Point to Site,客户 ...
- 手机打开PDF文档中文英文支持(乱码问题)解决攻略
电子书的优点很多,随时随地阅读,无论白天黑夜走路坐车都能阅读:想确认一下某句话是不是这本书里的,搜索一下就可以知道:搬家也不用发愁,几万本书带在身上,依然轻松步行.我买了一台平板主要动因就是为了看书, ...
- Qt基础之开发环境部署
将 Qt 5.6 集成至 VS2015 摘要: 由于VS2015不再支持addin,所以要用其他手段. 这里给出64位系统下的安装步骤,32位类似. 一.安装VS2015 过程略.值得注意的是要选择需 ...
- 谈谈 Google 的 Test Certified
转载请联系作者,谢谢! 本文简单介绍下Google的Test Certified. Test Certified(后文简称TC)是Google内部的一个认证项目,在8年的时间里取得了多个里程碑,有17 ...
- POJ1742 Coins[多重背包可行性]
Coins Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 34814 Accepted: 11828 Descripti ...
- jQuery实例
1.$("ul li").fliter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClas ...
- switch2osm使用open street map离线地图中文乱码方框解决办法
----------written by shenwenkai------------- ubuntu linux环境下,按照网址(https://switch2osm.org/serving-til ...
- CodeGenerator.cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace CiCe ...