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 使用手册(二)
Sep 23 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
JS实现放烟花效果
Mar 10 Javascript
OpenLayers3实现测量功能
Sep 25 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
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
node跨域请求方法小结
2017/08/25 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
浅谈Python的异常处理
2016/06/19 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python可视化实现代码
2019/01/15 Python
Python实现数值积分方式
2019/11/20 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
Python下载的11种姿势(小结)
2020/11/18 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
社团活动总结
2014/04/28 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
小学新课改心得体会
2016/01/22 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
python小型的音频操作库mp3Play
2022/04/24 Python