深蓝网络

网站建设,程序开发,主机域名,搜索引擎

Jquery弹出层窗口插件

前端,交互 3031 1 2012/04/26

前几天做工项目中有用到弹出DIV层窗口,网上找了些都感觉不合自已的要求。于是乎就自已写一Jquery弹窗插件。哎~ 其实吧这个习惯并不好,太要完美了。其实网上找些代码能用就可以了。但。。。我总心有不甘。虽然用了两天时间,总算了学了不少Jquery的东西。


网上弹窗程序代码主要问题:
1,弹窗参数过多,好多没有必要。特别是式样,可以让用户直接在CSS调节,放在参数里没什么用。
2,弹出窗口拖动时比较卡,体验太差。
3,程序回调自主性差,弹窗一般是两种,一种是提示性的,一种是输入后提交表单的。后者肯定需要自主设置回调代码,否则非常麻烦。
4,功能太杂,学习个插件也得半天,还不如自已写的条理比较清楚。


深蓝技术写的代码,就是要解决上述问题。
先给个调用方法,大家看了应该知道它的功能了

     $(function () {
        $('#dbpop').popbind({
            //宽度,高度是自适应的
            Width:"400px",
            //显示按钮上的文字;
            //如果不想显示按钮,而是调用此函数时,层自动弹出,设置为null.
            IsShow:"弹出窗口" , //null,
            //窗口是否可拖动, true/false
            IsDrag: true,
            //窗口标题文字.默认值是"Open"
            Title: "This is 标题,拖下试试",
            //是否使用遮罩
            IsMask:true,
            //是否显示"取消"按钮,需要回调时为true
            ExCancel: true,
            //这里定义,当窗口中的"确定"按钮被按下时,进行处理的函数
            IsComfirm: function () { ifpopconfirm(); }
        });
    });


HTML非常简洁,大部份UI界面都在Jquery里生成的。

<div id="divX" class="dbpop_frm">
            没有弹出窗口的按钮哦!~
  </div>

在插件的代码里分别封装了三个Jquery函数,可以分开使用。调用非常方便!
三个函数分别是
浮动弹窗生成 - popbind
对象自动居中 - cnter
对象拖动 - drag

Demo演示在这里: www.dieep.com/demo/jqueryPopWin.htm


上一篇  |  下一篇

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。