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 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
javascript的BOM汇总
Jul 16 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
深入浅出vue图片路径的实现
Sep 04 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 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
聊天室php&amp;mysql(五)
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
搬家公司的创业计划书
2014/01/01 职场文书
大三学习计划书范文
2014/05/02 职场文书
社区科普工作方案
2014/06/03 职场文书
小学运动会演讲稿
2014/08/25 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
nginx处理http请求实现过程解析
2021/03/31 Servers