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来实现弹窗效果,且弹窗中的内容可以点击事件的更多相关文章

  1. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  2. 16种基于 CSS3 & SVG 的创意的弹窗效果

    在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画, ...

  3. 实现iOS前台时的推送弹窗效果

    原文链接 或许很多童鞋还不知道,在 iOS 中收到推送通知时,如果 App 处于前台运行的情况下,推送的顶部弹窗是不会弹出来的. 然而就是有很多**的产品经理都会提出类似这样的**需求:那就是在 Ap ...

  4. SharePoint 2013 弹窗效果之URL打开方式(一)

    在SharePoint中想做一个弹出效果其实很简单,仅仅在js中使用SharePoint Modal Dialog, 以下做一个简单的例子:很多情况下我们会通过linkButton弹出一个详细页面,那 ...

  5. android UI进阶之弹窗的使用(2)--实现通讯录的弹窗效果

    相信大家都体验过android通讯录中的弹窗效果.如图所示: android中提供了QuickContactBadge来实现这一效果.这里简单演示下. 首先创建布局文件: <?xml versi ...

  6. JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果

    下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .men ...

  7. 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果

    wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...

  8. 兼容谷歌、火狐、IE7.0以上浏览器div+css实现的带有蒙版的半透明弹窗效果[xyytit]

    整个页面变暗的蒙版效果,带有半透明边框的弹窗,用在网站里一定很酷. 最初见与奢饰品购物网站YMALL,后边研究了下,自己做了这个实例. 技术要点:css中几种透明样式的使用.不同的样式在不同的浏览器中 ...

  9. IOS - 前台时的推送弹窗效果

    作者:Pikacode 原文链接:http://www.jianshu.com/p/67864e1c2085 本文获作者授权转载 或许很多童鞋还不知道,在 iOS 中收到推送通知时,如果 App 处于 ...

随机推荐

  1. 【django入门教程】Django的安装和入门

    很多初学django的朋友,都不知道如何安装django开发以及django的入门,今天小编就给大家讲讲django入门教程. 注明:python版本为3.3.1.Django版本为1.5.1,操作系 ...

  2. 转:Java面试题集(1-50)

    Java程序员面试题集(1-50) http://blog.csdn.net/jackfrued/article/details/17403101 一.Java基础部分 1.面向对象的特征有哪些方面? ...

  3. URAL 1671 Anansi's Cobweb (并查集)

    题意:给一个无向图.每次查询破坏一条边,每次输出查询后连通图的个数. 思路:并查集.逆向思维,删边变成加边. #include<cstdio> #include<cstring> ...

  4. Nginx 安装编译配置

    ./configure --prefix=/usr/local/nginx-1.8.0 --with-http_ssl_module --with-http_spdy_module --with-ht ...

  5. 使用Dmitry Sklyarov的方法来破解一款流行的4G调制解调器

    逆向工程师如果对设备代码和固件系统进行检测时,发现了许多经过加密处理的固件文件,该怎么办?在本文中我将通过一个真实的故事来教大家如何利用一些基础的计算机知识以及简单的逻辑来应对这一问题. 因为这篇文章 ...

  6. 嵌入式 -- WINKHUB 边信道攻击 (NAND Glitch)

    0x00 前言 随着物联网IOT的飞速发展,各类嵌入式设备, 路由器安全研究也越来越火. 但因为跟以往纯软件安全研究的要求不同, 这类研究往往需要结合相应的硬件知识. 很多朋友困惑如何开始, 甚至卡在 ...

  7. PHP中使用mysql处理结果集

    一.从结果集中将记录取出    mysql_fetch_row($result); 从结果集中取得一行作为枚举数组 mysql_fetch_row($result mysql_fetch_assoc( ...

  8. IE6-8支持css3属性

    方法一.让IE6-8支持css3属性 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shi ...

  9. Android屏幕底部弹出DialogFragment(3)

     Android屏幕底部弹出DialogFragment(3) 附录文章1,2的DialogFragment是常规的DialogFragment,但是现在的一些Android开发中,往往需要从底部 ...

  10. cookie 作用域

    在http://xiaoyou-game.com/user/login方法中设置cookie: setcookie('username',$username,time()+3600,'/user/', ...