引用POPUI来实现弹窗效果,且弹窗中的内容可以点击事件
seajs.use(['../js/ui/dialog'],function(){
$('.center-button').bind('click',function(){
var $dlg = $.dialog({
title:'确认/调整九宫格位置',
width:995,
source: $('#dlg_d1').html()
});
$dlg.delegate('.zuobiaoxi td', 'click', function() {
$(this).addClass('td_curr').siblings().removeClass('td_curr').parents().siblings().find('td').removeClass('td_curr');
$(this).find('.round').addClass('curr').parents().siblings().find('.round').removeClass('curr');
})
$dlg.delegate('.c-button .cancel','click',function(){
$dlg.close();
});
});
});
上述代码调用了本地的dialog.js文件,可以建立弹窗,弹窗$.dialog返回给var $dlg,然后使用函数delegate给对象$dlg的子元素.zuobiaoxi 绑定click事件:
其中html为:(其实是JavaScript格式)
<script id="dlg_d1" type="text/template">
<div class="mess-dialog">
<div class="dia-content">
<div class="dia-left"><img src="./img/foot-pic.png"></div>
<div class="dia-right">
<span>陈道明</span><em>T3-1</em>
<p>部门:京东商城——华北区域分公司——配送部——分拣中心管理部——固安一级分公司...</p>
</div>
<div class="clear"></div>
<div class="zuobiaoxi">
<table cellpadding="0" cellspacing="0">
<tr><td><div class="round">6</div>熟练员工</td><td><div class="round">8</div>绩效之星</td><td><div class="round">9</div>熟练员工</td></tr>
<tr><td><div class="round">3</div>熟练员工</td><td><div class="round">5</div>绩效之星</td><td class="td_curr"><div class="round curr">7</div>熟练员工</td></tr>
<tr><td><div class="round">1</div>熟练员工</td><td><div class="round">2</div>绩效之星</td><td><div class="round">4</div>熟练员工</td></tr>
</table>
<div class="c-button">
<button class="cancel">取消</button>
<button class="sure">确认</button>
</div> </div>
</div>
</div>
</script>
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
引用POPUI来实现弹窗效果,且弹窗中的内容可以点击事件的更多相关文章
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- 16种基于 CSS3 & SVG 的创意的弹窗效果
在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画, ...
- 实现iOS前台时的推送弹窗效果
原文链接 或许很多童鞋还不知道,在 iOS 中收到推送通知时,如果 App 处于前台运行的情况下,推送的顶部弹窗是不会弹出来的. 然而就是有很多**的产品经理都会提出类似这样的**需求:那就是在 Ap ...
- SharePoint 2013 弹窗效果之URL打开方式(一)
在SharePoint中想做一个弹出效果其实很简单,仅仅在js中使用SharePoint Modal Dialog, 以下做一个简单的例子:很多情况下我们会通过linkButton弹出一个详细页面,那 ...
- android UI进阶之弹窗的使用(2)--实现通讯录的弹窗效果
相信大家都体验过android通讯录中的弹窗效果.如图所示: android中提供了QuickContactBadge来实现这一效果.这里简单演示下. 首先创建布局文件: <?xml versi ...
- JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果
下拉菜单列表 <style> *{ margin: 0px; padding: 0px; } .men ...
- 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果
wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...
- 兼容谷歌、火狐、IE7.0以上浏览器div+css实现的带有蒙版的半透明弹窗效果[xyytit]
整个页面变暗的蒙版效果,带有半透明边框的弹窗,用在网站里一定很酷. 最初见与奢饰品购物网站YMALL,后边研究了下,自己做了这个实例. 技术要点:css中几种透明样式的使用.不同的样式在不同的浏览器中 ...
- IOS - 前台时的推送弹窗效果
作者:Pikacode 原文链接:http://www.jianshu.com/p/67864e1c2085 本文获作者授权转载 或许很多童鞋还不知道,在 iOS 中收到推送通知时,如果 App 处于 ...
随机推荐
- 学习LCMapString和LCMapStringEx
LCMapStringEx: http://msdn.microsoft.com/en-us/library/windows/desktop/dd318702(v=vs.85).aspx For a ...
- Linux物理内存相关数据结构
节点:pg_data_t typedef struct pglist_data { zone_t node_zones[MAX_NR_ZONES]; zonelist_t node_zonelists ...
- UVA11149 矩阵快速幂
首先我们来想一下计算A+A^2+A^3...+A^k. 如果A=2,k=6.那你怎么算 2+22+23+24+25+26 = ?= (2+22+23)*(1+23) 如果A=2,k=7.那你怎么算 2 ...
- mysql主从同步报slave_sql_running:no的解决方案
1.没有正确设置server_id(如没有正确设置从配置项) ps:可手动设置server_id 2.slave stop;set global sql_slave_skip_counter=1;sl ...
- [SYSU]每周一赛
2014年每周一赛第一场 A.Cutting Sausages B.Rectangular Fields //待做 ...
- [转]A plain english introduction to cap theorem
Kaushik Sathupadi Programmer. Creator. Co-Founder. Dad. See all my projects and blogs → A plain engl ...
- linux下查看所有用户以及用户组
groups 查看当前登录用户的组内成员groups gliethttp 查看gliethttp用户所在的组,以及组内成员whoami 查看当前登录用户名 /etc/group文件包含所有组/etc/ ...
- event.keyCode|| event.which.的用法
HTML 用户名:<input type="text" id="UserAccount" onKeyPress="JumpByEnter(Use ...
- CentOS 6.6 nginx PHP 配置
/************************************************************************* * CentOS 6.6 nginx PHP 配置 ...
- 常用的Hash算法
1.RSHash unsigned int RSHash(const std::string& str) { unsigned int b = 378551; unsigne ...