jquery ui bootstrap 实现自定义风格


Posted in Javascript onNovember 14, 2014

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

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

jquery ui bootstrap 实现自定义风格

confrim 确认框 支持callback

//message 提示的信息 ,callback(true/false)回调函数

 window.shconfirm = function (message, callback) 

回调函数参数为 true/false

jquery ui bootstrap 实现自定义风格

prompt 邀请用户输入框

//message 提示的信息 ,callback(msg)回调函数(用户输入的消息), param:regex 输入的 正则验证,regexmsg 正则验证不通过的提示

 window.shprompt = function (message, callback, regex, regexmsg)

这里 message 为提示消息  *

    callback 为回调函数 *  回传参数为 用户输入的值(userinputmsg)

   regex 和 regexmsg 这2个参数是 选填项 用于验证用户输入,2个参数需要同时出现。不能单独使用。

jquery ui bootstrap 实现自定义风格

以下是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 实现自定义风格

jquery ui bootstrap 实现自定义风格

jquery ui bootstrap 实现自定义风格

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

Javascript 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
用javascript实现分割提取页面所需内容
May 09 Javascript
XmlUtils JS操作XML工具类
Oct 01 Javascript
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
使用node.js 制作网站前台后台
Nov 13 #Javascript
JavaScript 作用域链解析
Nov 13 #Javascript
jQuery $命名冲突解决方案汇总
Nov 13 #Javascript
js获取字符串最后一位方法汇总
Nov 13 #Javascript
实现js保留小数点后N位的代码
Nov 13 #Javascript
详谈jQuery中的this和$(this)
Nov 13 #Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 #Javascript
You might like
模拟flock实现文件锁定
2007/02/14 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
基python实现多线程网页爬虫
2015/09/06 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
TensorFlow如何实现反向传播
2018/02/06 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python添加菜单图文讲解
2019/06/04 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
中学语文教学反思
2016/02/16 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
使用Django实现商城验证码模块的方法
2021/06/01 Python
前端JavaScript大管家 package.json
2021/11/02 Javascript