Js自定义提示框(dialog版本)

问题的来源：开发的过程中总是要给出各种各样的提示语，但是每次都通过手动的形式给后面加提示感觉不舒服又不想通过服务器控件来做这些事情。于是就想把提示语和验证整合到一起套在dialog上面使用

需要的引用文件jquery-ui-1.8.18.js jquery.ui.all.css 这两个可以自己去官方下载 jquery.ui.plugins.jtip.js自己写的

jtip.js做一下简单介绍

参数content: '*', //提示的内容

position: 'left', //提示层出现的位置默认是在右边另一种就是center出现在指定位置的 center bottom

tipType: 'info', //提示的类型 info表示普通提醒 error是错误提醒默认是错误提醒

autoClose: false, //是否自动关闭默认是false

colseTime: 0 //隔多久关闭例如autoClose：true ，colseTime：1200 表示隔2秒后提示内容自动关闭

drag ：null //补充参数针对dialog的移动使用

close：null //补充参数针对dialog的关闭使用

思考过程：难点一: 定位如何让提示的tip层出现在指定的位置

难道二：移动 dialog是可以移动让dialog移动的过程中让 tip层不错位也不呗遮挡

难道三：js验证之后让难点一和难点二不出现bug

解决方式：定位问题利用了jqueryui中position的定位方式可以参看官方网站http://jqueryui.com/demos/position/

移动问题利用了jqueryui中dialog的移动方式主要的事件dragStop: function(event, ui) { ... } 可以参看官方网站http://jqueryui.com/demos/dialog/#event-dragStop

验证问题把验证做了简单的封装然后跟定位配合起来使用

个性化：手动改写了jtip.js插件

model界面html：

View Code

<div id="model">

     姓名:<input id="txtuser" type="text" />     </br></br>     密码:<input id="txtpwd" type="password" />     </br></br>     邮件:<input id="txtemail" type="text" />    <input id="btnOK" type="button" value="提交数据" /></div>

移动dialog:

View Code

    $("#model").dialog({                maxHeight: 200,                maxWidth: 450,                minHeight: 200,                minWidth: 450,                open: function (event, ui) {//Position();                },                dragStop: function (event, ui) {

                    AfreshTip();                },                close: function (event, ui) {                    CloseTip();

                }            });

重新定位和页面关闭

View Code

   //提示页面的重新定位    function AfreshTip() {var data = new Array('txtuser','txtpwd','txtemail');for(var i=0;i<data.length;i++){               $("#"+data[i]).jtip({ "drag": null });             }             }

//提示页面关闭    function  CloseTip(){var data =new Array('txtuser','txtpwd','txtemail');for(var i=0;i<data.length;i++){               $("#"+data[i]).jtip({ "close": null });             }          }

验证的封装

View Code

   //检查长度是否的合法     function CheckLength(o, min, max) {if (o.val().length > max || o.val().length < min) {             o.addClass("ui-state-error"); //为当前错误添加             o.jtip({                 content: '文本输入的长度应该在'+min+'到'+max+'之间',                 position: 'left',                 tipType: 'error',                 autoClose: false,                 colseTime: 0             });return false;            } else {                o.removeClass("ui-state-error");             o.jtip({                    content: '√',                    position: 'left',                    tipType: 'info',                    autoClose: false,                    colseTime: 0                });return true;            }        }//检查合法性  function checkReg(o, reg, err) {var objExp = new RegExp(reg);if (!objExp.test(o.val())) {                o.addClass("ui-state-error");                o.jtip({                    content: ''+err+'',                    position: 'left',                    tipType: 'error',                    autoClose: false,                    colseTime: 0                });return false;            } else {                o.removeClass("ui-state-error");                o.jtip({                    content: '√',                    position: 'left',                    tipType: 'info',                    autoClose: false,                    colseTime: 0                });return true;            }     }

点击事件

View Code

    //点击事件            $("#btnOK").click(function () {if ((CheckLength($("#txtuser"), 2, 10)) &&                    (CheckLength($("#txtpwd"), 5, 12)) &&                    (checkReg($("#txtemail"),/^\w+((-\w+)|(\.\w+))*\@@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,'请输入正确的邮件地址'))                     )                     {

                   }

            });

添加一个自定义样式:

View Code

    <style type="text/css">        .ui-tooltip        {            padding: 8px;            position: absolute;            z-index: 9999;            -o-box-shadow: 0 0 0px #aaa;            -moz-box-shadow: 0 0 0px #aaa;            -webkit-box-shadow: 0 0 0px #aaa;            box-shadow: 0 0 0px #aaa;        }

    </style>

效果图：

完整的例子下载shttp://files.cnblogs.com/leidc/jtip%E8%B5%84%E6%96%99.rar

修正版本图片

还有不少功能没有改良望指正

转载于:https://www.cnblogs.com/leidc/archive/2012/03/21/js%e6%8f%92%e4%bb%b6.html

Js自定义提示框(dialog版本)相关推荐

js自定义提示框弹窗
需要使用jquery.js 使用方法: tip("密码错误!");tip("操作成功!",1); js代码如下: <script type="t ...
微信小程序自定义提示框制作的简单方法
微信小程序自定义提示框制作的简单方法下面的时候提示框的结构 wxml部分  <view class="showToast" wx:if= ...
原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
Flutter中自定义提示框
1. 弹出提示框定义模态框组件,代码如下: import 'package:flutter/material.dart'; class MyDialog extends Dialog{final S ...
jq js 自定义弹框
自定义弹框 <body> <script type="text/javascript" src="./js/jquery-1.8.3.js"& ...
Qt实现侧边栏显示隐藏以及自定义提示框
1.目的最近在工作中需要实现一个Qt的侧边栏,通过按钮控制显示和隐藏,此外还要求实现自定义气泡提示框,最终参考网上知识进行了实现,效果如下: 1.窗口控件大小可以随窗体自由缩放: 2.侧边栏按钮 ...
winform 关于Messagebox自动定时关闭和自定义提示框总按钮上文本的问题的整理
如果要改变Messagebox上按钮的文本和自动关闭Messagebox提示框,一种方法是自定义一个winform窗口模仿替代Messagebox,变通的实现效果,另一种方法是通过调用系统的API来实 ...
在echarts中自定义提示框内容
1.期望效果以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成 ...

Js自定义提示框(dialog版本)

Js自定义提示框(dialog版本)相关推荐

最新文章

热门文章