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