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 相关文章推荐
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 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和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
php构造函数与析构函数
2016/04/23 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
php实现简单加入购物车功能
2017/03/07 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
jquery maxlength使用说明
2011/09/09 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
python实现xml转json文件的示例代码
2020/12/30 Python
印度在线购物网站:Paytmmall
2019/07/24 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
实习老师离校感言
2014/02/03 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
react antd实现动态增减表单
2021/06/03 Javascript
python多次执行绘制条形图
2022/04/20 Python