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. python saltstack

    1. 拷贝文件 # salt ‘*‘ cp.get_file salt://first.xml /tmp/first.xml 或 gzip=1-9,数字越大,压缩越高; makedirs=True 自 ...

  2. Intellij IDEA Help

    https://www.jetbrains.com/idea/help/intellij-idea.html https://www.jetbrains.com/idea/help/creating- ...

  3. MVC学习IIS的不同版本(一)

    一:IIS5.0运行在进程InetInfo.exe中,该进程寄宿着一个名为World Wide Publishing Service(W3VC)的window服务. W3VC的主要功能:包括HTTP请 ...

  4. Bash中的特殊字符

    # 表示注释 #! 指定当前脚本的解析器 #!/bin/bash echo "Hello World" ; 命令分隔符 #!/bin/bash echo hello;echo th ...

  5. Swift URL Schemes使用

    URL Schemes通常用于分享和第三方登录,但有时需要在html跳至APP,或者APP跳至另外一个APP.这时也需要使用URL Schemes. 一.html跳转至APP eg:html跳转至te ...

  6. js动态设置窗体位置

    1设置登录框的js,动态设置高度等 <script> $(document).ready(function () { $() / + "px"); $("in ...

  7. 在Runbook中添加Checkpoint-workflow

    本文说明的是使用Checkpoint-workflow的一种场景(当然还有其他场景需要Checkpoint-workflow). 起因:Windows Azure对Automation账户中的Runb ...

  8. Magento Soap Api接口出错无法使用

    在给客户测试Magento Soap接口的时候出现如下错误提示. This page contains the following errors:error on line 3 at column 6 ...

  9. mySQL-CRUD操作(数据库的增删改查)练习题

    一.设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2 ...

  10. angularjs 不同的controller之间值的传递

    Sharing data between controllers in AngularJS I wrote this article to show how it can possible to pa ...