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 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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
终于听上了直流胆调频
2021/03/02 无线电
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
Python isinstance判断对象类型
2008/09/06 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
解析Python中while true的使用
2015/10/13 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
python正则-re的用法详解
2019/07/28 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Linux文件系统类型
2012/02/15 面试题
关于工资低的辞职信
2014/01/14 职场文书
工作自我评价怎么写
2014/01/29 职场文书
初中生自我评价
2014/02/01 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
Vue操作Storage本地化存储
2022/04/29 Vue.js