jquery ui bootstrap 实现自定义风格
作者:hebedich 时间:2024-05-09 09:05:24
首先看一下自定义提示框的效果图
alert 普通的提示当然可以自定义样式
confrim 确认框 支持callback
//message 提示的信息 ,callback(true/false)回调函数
window.shconfirm = function (message, callback)
回调函数参数为 true/false
prompt 邀请用户输入框
//message 提示的信息 ,callback(msg)回调函数(用户输入的消息), param:regex 输入的 正则验证,regexmsg 正则验证不通过的提示
window.shprompt = function (message, callback, regex, regexmsg)
这里 message 为提示消息 *
callback 为回调函数 * 回传参数为 用户输入的值(userinputmsg)
regex 和 regexmsg 这2个参数是 选填项 用于验证用户输入,2个参数需要同时出现。不能单独使用。
以下是js的实现,
当前这个是整合了 jquery ui 和 bootstrap 自己封装的一个 alert 提示。
(function () {
var _shconfirm = {};
var _shprompt = {};
//闭包初始化;
$(function () {
$("#dialogalert").dialog({
modal: true,
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "explode",
duration: 500
},
buttons: {
确定: function () {
$(this).dialog("close");
}
}
});
$("#dialogconfirm").dialog({
modal: true,
autoOpen: false,
show: {
effect: "slide",
duration: 500
},
hide: {
effect: "drop",
duration: 500
},
buttons: {
确定: function () {
_shconfirm.shconfirmCallBack(true);
$(this).dialog("close");
},
取消: function () {
_shconfirm.shconfirmCallBack(false);
$(this).dialog("close");
}
}
});
$("#dialogprompt").dialog({
modal: true,
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "puff",
duration: 500
},
buttons: {
确定: function () {
if (_shprompt.shpromptObj.regex) {
if (!_shprompt.shpromptObj.regex.test($("#dialogprompt .text").val())) {
$("#dialogprompt .alert .promptmsg").html(_shprompt.shpromptObj.regexmsg);
$("#dialogprompt .alert").slideDown();
return;
} else {
$("#dialogprompt .alert").hide();
}
}
_shprompt.shpromptObj.callback($("#dialogprompt .text").val());
$(this).dialog("close");
},
取消: function () {
_shprompt.shpromptObj.callback($("#dialogprompt .text").val());
$(this).dialog("close");
}
}
});
});
window.shalert = function (message) {
$("#dialogalert .msgcontent").html(message);
$("#dialogalert").dialog("open");
};
//message 提示的信息 ,callback(true/false)回调函数
window.shconfirm = function (message, callback) {
$("#dialogconfirm .msgcontent").html(message);
$("#dialogconfirm").dialog("open");
_shconfirm.shconfirmCallBack = callback;
};
//message 提示的信息 ,callback(msg)回调函数(用户输入的消息), param:regex 输入的 正则验证,regexmsg 正则验证不通过的提示
window.shprompt = function (message, callback, regex, regexmsg) {
$("#dialogprompt .msgcontent").html(message);
$("#dialogprompt").dialog("open");
_shprompt.shpromptObj = {
callback: callback,
regex: regex,
regexmsg: regexmsg
};
}
})();
以下是调用代码
confirm //比可惜的是 js没法模拟 js脚本暂停 所以只能以回调函数的方式 来继续下一步操作。
function ShConfirm() {
shconfirm("确定要这么做吗!", function (result) {
if (result) {
alert("点击了确定");
} else {
alert("点击了取消");
}
});
}
function ShPrompt() {
shprompt("请问1+1等于几!", function (text) {
alert("用户输入了:" + text);
}, /^\d{1,}$/, "请输入数字!");
}
shalert 就直接用就行了。和 js的alert 效果一样。
<input type="button" name="name" value="ShAlert" onclick="shalert('保存成功!');" />
<input type="button" name="name" value="ShConfirm" onclick="ShConfirm()" />
<input type="button" name="name" value="ShPrompt" onclick="ShPrompt()" />
源码我已经放在了 百度网盘上,欢迎大家学习交流。
源码下载地址
http://pan.baidu.com/s/1c00Cl36
这个控件其实还有可重构的部分,比如初始化方法等等这些都没有提取出来,因为任务紧所以先这么用着。
下一次优化时会处理这些问题。
原版风格是这样的,可以通过修改引用的css上实现 demo上有详细说明。
标签:jquery,ui,bootstrap,自定义
0
投稿
猜你喜欢
js贪吃蛇游戏实现思路和源码
2024-04-10 11:03:57
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2022-10-10 19:11:55
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2023-06-05 21:50:10
Python中关于set的基本用法
2021-09-23 12:45:39
利用SQLyogEnt对Mysql数据库进行转移
2012-02-25 20:17:30
使用python进行拆分大文件的方法
2022-06-23 17:54:04
python help函数实例用法
2022-05-03 23:29:32
一段查看ASP文件源码的ASP程序
2007-09-21 12:53:00
Python简单的制作图片验证码实例
2022-08-13 12:47:05
Python UI自动化测试Web frame及多窗口切换
2023-05-29 01:18:55
Go读取文件与写入文件的三种方法操作指南
2024-02-01 05:29:46
详谈vue中router-link和传统a链接的区别
2024-04-09 10:46:05
纯python实现机器学习之kNN算法示例
2021-05-02 22:57:17
python3 使用ssh隧道连接mysql的操作
2023-09-01 19:15:11
Python中最好用的json库orjson用法详解
2023-06-13 23:11:49
Python自动化测试PO模型封装过程详解
2023-08-23 18:59:49
SQLServe 重复行删除方法
2024-01-26 18:39:24
asp 实现检测字符串是否为纯字母和数字组合的函数
2009-10-04 20:39:00
Python绘制散点图之可视化神器pyecharts
2022-03-28 18:46:02
Python 列表和字典常踩坑即解决方案
2021-05-01 17:45:25