jquery.alert 弹出式复选框实现代码


Posted in Javascript onJune 15, 2009

//jQuery Alert Dialogs Plugin Version 1.0
//插件下载地址:http://abeautifulsite.net/notebook/87
自身的原方法为:

// Usage: 
// jAlert( message, [title, callback] ) 
// jConfirm( message, [title, callback] ) 
// jPrompt( message, [value, title, callback] ) 
1.新加一个multicheckbox 的公共方法: 
// Public methods 
multicheckbox : function (message, value, title, callback) { 
if (title == null ) title = 'multicheckbox '; 
$.alerts._show(title, message, value, 'multicheckbox ', function (result) { 
if (callback) callback(result); 
}); 
},

2 .在私有方法_show:function (title, msg, value, type, callback){...} 中增加对multicheckbox 的控制:
// Private methods
------------------------ 关键部分 ------------------------------
case 'multicheckbox' :
$("#popup_message" ).append(value).after('<div id="popup_panel"> <span id="checkall" style="cursor:pointer;border:1px solid #FFCC35;font-family:宋体;font-weight:bold;background-color:#FFFF99;color:#0000CC;margin:3px;padding:3px 10px 3px 10px;">全选</span>      <span id="popup_ok" style="cursor:pointer;border:1px solid #CF4342;font-family:宋体;font-weight:bold;background-color:#DFF1FF;color:#CF4342;margin:3px;padding:3px 10px 3px 10px;">确定</span> <span id="popup_cancel" style="cursor:pointer;border:1px solid #CF4342;font-family:宋体;font-weight:bold;background-color:#DFF1FF;color:#0000CC;margin:3px;padding:3px 10px 3px 10px;">取消</span></div> ');
var $spanHover = $("#dialog span" );
$spanHover.hover(
function () {$(this ).addClass("spanmousehover" );},
function () {$(this ).removeClass("spanmousehover" );}
);
$("#checkall" ).click(function () {
if ($("#checkall" ).html() == "全选" ) {
$("#dialog input" ).each(function () {$(this ).attr("checked" , true );});
$("#checkall" ).html("取消全选" );
}
else {
$("#dialog input" ).each(function () {$(this ).attr("checked" , false);});
$("#checkall" ).html("全选" );
}
});
$("#delcheckall" ).click(function () {
$("#dialog input" ).each(function () {$(this ).attr("checked" , false );});
});
$("#popup_ok" ).click(function () {
var getAll = "";
var test = $('#dialog input' ).each(function () {if (this .checked) {getAll += $(this ).val() + ',';}});
var valback = getAll.substring(0, getAll.length - 1);//去掉最后一个','号
$.alerts._hide();
$("#ctl00_ContentPlaceHolder_main_TextBox_recever_sel" ).blur();
if (callback) callback(valback);// 在单击确定后将所有选中的内容回传到输入框中
});
$("#popup_cancel" ).click(function() {
$.alerts._hide();
$("#ctl00_ContentPlaceHolder_main_TextBox_recever_sel" ).blur();
if (callback) callback(null);
});
/ /----------------------------------------------------------------------
在 // Shortuct functions 中增加如下名称:
jMulticheckbox = function (message, value, title, callback) {
$.alerts.multicheckbox(message, value, title, callback);
};
3 .在前段代码的input 输入框(或asp:TextBox )的onfocus 属性中调用如下脚本:
jMulticheckbox('' , '<% = allcheckinfo.ToString() %> ' , '请选择接收部门' , function (r) {
//定义传入html元素,弹出框主标题,callback结果(即选择的内容)
if (r!=null )
$('#ctl00_ContentPlaceHolder_main_TextBox_recever_sel' ).val(r);
});
其 中"allcheckinfo.ToString() "可以为后台从相应的业务逻辑中取出的结果,如:
StringBuilder allinfo = new StringBuilder ("" );
allinfo.Append("<div id=\"dialog\" style=\"padding:0; margin:0;height:250px;width:280px;text-align:left;line-height:20px;overflow:auto\"> " );
...
while (OracleDataReader.Read())
{
string bumeninfo = oradr[0 ].ToString();
allinfo.Append("<span class=\"spanmouse\"><input name=\"chk1\" type=\"checkbox\" id=\"c" + flag + "\" value=\"" + bumeninfo + "\" /><label for=\"c" + flag + "\">" + bumeninfo + "</label></span><br />" );
}
...
allinfo.Append("</div>" );
即 将<div>...</div> 返回给JS,最后效果如下:
jquery.alert 弹出式复选框实现代码 
Javascript 相关文章推荐
JavaScript经典效果集锦
Jul 06 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 #Javascript
FireFox JavaScript全局Event对象
Jun 14 #Javascript
Javascript 错误处理的几种方法
Jun 13 #Javascript
Javascript 学习书 推荐
Jun 13 #Javascript
javascript 框架小结 个人工作经验
Jun 13 #Javascript
动态刷新 dorado树的js代码
Jun 12 #Javascript
firefo xml 读写实现js代码
Jun 11 #Javascript
You might like
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
php将html转为图片的实现方法
2017/05/19 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
跟老齐学Python之类的细节
2014/10/13 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python 解析简单的XML数据
2020/07/24 Python
python实现经纬度采样的示例代码
2020/12/10 Python
中国电视购物:快乐购
2017/02/04 全球购物
Unix如何添加新的用户
2014/08/20 面试题
运动会表扬稿大全
2014/01/16 职场文书
大学计划书范文800字
2014/08/14 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
驳回起诉裁定书
2015/05/19 职场文书
物业管理交接协议书
2016/03/24 职场文书
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS