引用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 处于 ...
随机推荐
- golang函数调用计时
package main import ( "log" "time" ) func f() { defer timeoutCheck("f slow& ...
- Java容器类接口:Iterator,Collection,Map
Iterator Iterator被称为迭代器,是一个对象,它的工作是遍历并选择序列中的对象,可以实现以下一些操作: 使用方法iterator()要求容器返回一个Iterator,Iterator将返 ...
- 解决:HotSeat短信图标提醒有误
[操作步骤]正常收发短信.彩信. [测试结果]所有短信均已阅读,但在HOME界面的短信图标仍提示有一条短信未读.重启后仍存在. 经过分析,导致该情况的主要原因为当彩信已读的时候,launcher中进行 ...
- WebService是什么?
一.序言 大家或多或少都听过WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成分.但是不得不承认的是Web ...
- IOS 封装类的时候注释格式,使用的时候可以想官方库一样快捷显示
/** @brief 详情 @param 参数 @note 注意 @return 返回值类型 @code 这里写例题代码 @endcode @see 相似的方法参考 */
- HDU5437 Alisha’s Party 优先队列
点击打开链接 可能出现的问题: 1.当门外人数不足p人时没有判断队列非空,导致RE. 2.在m次开门之后最后进来到一批人没有入队. 3.给定的开门时间可能是打乱的,需要进行排序. #include&l ...
- pscp使用详解 Windows与Linux文件互传工具
pscp使用详解 Windows与Linux文件互传工具 pscp使用方法详解:pscp是putty安装包所带的远程文件传输工具,是一款十分常见windows与linux系统之间文件互传的工具,使用方 ...
- 推荐mysql优化的21条经验
1. 为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这 1. 为查询缓存优 ...
- Magento Soap Api接口出错无法使用
在给客户测试Magento Soap接口的时候出现如下错误提示. This page contains the following errors:error on line 3 at column 6 ...
- turn.js实现翻书效果
JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...