jquery ui bootstrap 实现自定义风格

前端之家收集整理的这篇文章主要介绍了jquery ui bootstrap 实现自定义风格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先看一下自定义提示框的效果

alert 普通的提示当然可以自定义样式

confrim 确认框 支持callback

代码如下:
提示的信息,callback(true/false)回调函数 window.shconfirm = function (message,callback) 回调函数参数为 true/false

prompt 邀请用户输入框

代码如下:
提示的信息,callback(msg)回调函数用户输入的消息),param:regex 输入的 正则验证,regexmsg 正则验证不通过的提示 window.shprompt = function (message,callback,regex,regexmsg) 这里 message 为提示消息 * callback 为回调函数 * 回传参数为 用户输入的值(userinputmsg) regex 和 regexmsg 这2个参数是 选填项 用于验证用户输入,2个参数需要同时出现。不能单独使用。

以下是js的实现,

当前这个是整合了 jquery ui 和 bootstrap 自己封装的一个 alert 提示

代码如下:
提示的信息,callback(true/false)回调函数 window.shconfirm = function (message,callback) { $("#dialogconfirm .msgcontent").html(message); $("#dialogconfirm").dialog("open"); _shconfirm.shconfirmCallBack = callback; }; //message 提示的信息,param:regex 输入的 正则验证,regexmsg 正则验证不通过的提示 window.shprompt = function (message,regexmsg) { $("#dialogprompt .msgcontent").html(message); $("#dialogprompt").dialog("open"); _shprompt.shpromptObj = { callback: callback, regex: regex, regexmsg: regexmsg }; } })();

以下是调用代码

confirm //比可惜的是 js没法模拟 js脚本暂停 所以只能以回调函数的方式 来继续下一步操作。

代码如下:
function ShPrompt() {
shprompt("请问1+1等于几!",function (text) {
alert("用户输入了:" + text);
},/^\d{1,}$/,"请输入数字!");
}

shalert 就直接用就行了。和 js的alert 效果一样。

代码如下:

源码我已经放在了 百度网盘上,欢迎大家学习交流。

源码下载地址

http://pan.baidu.com/s/1c00Cl36

这个控件其实还有可重构的部分,比如初始化方法等等这些都没有提取出来,因为任务紧所以先这么用着。

下一次优化时会处理这些问题。

原版风格是这样的,可以通过修改引用的css上实现 demo上有详细说明。

以上就是本文全部内容了,怎么样,受益匪浅吧。

原文链接:https://www.f2er.com/jquery/57314.html

猜你在找的jQuery相关文章