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 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
JS实现li标签的删除
Apr 12 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
使用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
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
中专毕业生的自我鉴定
2013/12/01 职场文书
总经理秘书工作职责
2013/12/26 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
节约用水演讲稿
2014/05/21 职场文书
工会主席事迹材料
2014/06/03 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
导游词范文
2015/02/13 职场文书
2015年工商所工作总结
2015/05/21 职场文书
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA