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. 首席技术官 (CTO) 比普通程序员强在哪

    互联网的蓬勃发展,让无数的程序员身价水涨船高,都变成了「香饽饽」,更有了不少「创业」,「当上 CTO,迎娶白富美的传说」.都说不想当元帅的士兵不是好士兵,我觉得这件事见仁见智,但提升自己的价值,让自己 ...

  2. Best Sequence_DFS&&KMp

    Description The twenty-first century is a biology-technology developing century. One of the most att ...

  3. 基于linux运用python开发知识点滴

    我是小白,希望我的文章能对小白们有点作用. A.Linux的开源,优势明显,如何使用,基本命令如下: 个人认为最基础的两种操作: 1.文件操作: ls 看文件夹下内容 ls -a 隐藏文件 -l非隐藏 ...

  4. iOS开发环境C语言基础 变量 、 数据类型和变量赋值 、 其他 、 运算符

    1 变量使用常用错误汇总 1.1 问题 在我们使用变量的过程中,会遇到一些问题,在此将这些问题进行汇总,在今后使用的过程中,不出错.即使出现错误也可以很快地找到问题所在. 1.2 方案 变量在使用的过 ...

  5. Mercurial使用简单介绍【转】

    Mercurial可以使异地开发进行统一的版本管理,比如一个项目有一部分人在银行内部开发无法用外网,另一部分人在公司开发,这两部分人需要一个统一的版本管理工具,mercurial这时候可以发挥作用 m ...

  6. busybox reboot 无效

    /*********************************************************************** * busybox reboot 无效 * 说明: * ...

  7. VirtualBox 设置共享文件夹自动挂载

    1.在VirtualBox中设置文件夹位置和名称,这里使用的名称是share 1.在ubuntu12.04的/etc/rc.local中加入自动挂载命令 sudo mount -t vboxsf sh ...

  8. arduino上使用sprintf()函数输出float值出错

    如果尝试使用sprintf()函数在arduino上进行对float指转换为一个字符串的话,你会发现,it doesn't work.弄了很久,还以为是没学c++的原因.其实在arduino上,这个函 ...

  9. Java 中的数组操作

    前言 在Java中,有很多封装好的类可以用来操纵数组(排序,复制等等),使得数组使用起来非常的方便.这就是高级语言带来的好处. 代码示例 - 一维数组 package test; import jav ...

  10. 使用批处理文件,自动设置计算机IP地址

    WIN7批处理设置IP地址不成功,显示“The filename, directory name, or volume label syntax is incorrect.”错误, 解决方法:将“本地 ...