基于JQuery的messager弹窗组件开发

原创 2016年06月01日 22:33:28

昨天晚上和今天白天,主要完成了一个弹窗组件开发,在开发的过程中发现自己的问题和整理思路,将自己的想法通过代码实现并最终看到效果,是一个很享受的过程。在本次实践中,我学习到了以前没有注意的小的用法和知识点。当然里面的一些方法也是得到项目组的大神的指导才豁然开朗的,而且有些方法不熟悉,正好通过这次实践巩固一下。

下面我将自己完成的思路和完成过程中学到和用到的知识点总结如下:
我们先看下要求吧!
这里写图片描述

第一步:先分析要实现的需求。老师说最好是组件化开发,所以就想到了要传参数设计。想到了需要title,message,icon,fn四个参数。我先构建了基本的HTML页面,通过模拟情况实现了需求所要实现的,不过是静态的,其实时间大部分花在了CSS样式上,还好是参考了easyui插件开发,里面的一些基本样式得已快速确定,比如颜色搭配之类的。
发现了几个用法是之前没用过的。

1、  outline: medium none; 

outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。不过我目前并没有发现这个属性的很好的用处。

border-width: 1px 1px 0px;
border-color: #dddddd #95b8e7 #95b8e7;

第二步:实现global.js全局文件的编写,主要是对JQ通过.extend().messager={}引入命名空间进行扩展。扩展了字符串拼接方法、元素拖动方法、弹窗函数。

$target.offset();
//获得当前元素相对于文档偏移的位置,包含left、top两个属性。
($target.offset().left)
e.pageX;//获得鼠标相对于文档偏移的X方向的位置。
var _offset = $target.offset();
      var X = e.pageX - _offset.left,
      Y = e.pageY - _offset.top,
      left, top;
      $(document).on('mousemove', function(e) {
           left = e.pageX - X;
           top = e.pageY - Y;
           if (top < 0) top = 0;
           $proxy.css({
                'left': left,
                'top': top
            });
      });

这样设计的原理,其实理解起来就一点,元素是以左上角为偏移位置计算点的,鼠标是一个点,直接有偏移位置计算点,移动的过程就相当于把这两个点连接成的直线根据鼠标的移动进行平移,元素看成有限个点,作同样的平移动作,最终就会形成鼠标移到哪,整个元素就移动要哪的效果。

第三步:实现js.js。通过元素的获取绑定事件并调用扩展函数来获得效果。

//通过元素获取绑定事件,调用扩展函数方法,实现效果。
$("#messager-alert a").eq(1).on("click",function(){
        $.messager.alert('My Error','Here is a error message!','error');
});

总结:通过本次实践,有了一点组件开发的概念和对一些基础知识的巩固。继续加油,坚持练习,坚持看书。

版权声明:本文为博主原创文章,欢迎转载和发表评论,转载请注明出处。

相关文章推荐

jquery_右下角弹出提示框(jquery_messager)

quwang $(document).ready(function(){ $.messager.show(0,'送你一个Jquery Messager消息弹出插件!...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery.messager.js

(function(){ var ua=navigator.userAgent.toLowerCase(); var is=(ua.match(/\b(chrome|opera|safar...

messager.alert弹框

messager(消息窗口) 转载地址: easyui弹框 一、$.messager.alert()类似js中的alert(‘String’)  方法参数:title, msg, icon, f...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jQueryEasyUI Messager基本使用

转载出处:http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html 1、$.messager.alert(title, ...

Jquery Messager 插件

MESSAGER插件 $(document).ready(function(){ $.messager.show(0,'送你一个Jquery Messager消息弹出插件!'); $("#s...

jQueryEasyUI Messager基本使用

http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html 一、jQueryEasyUI下载地址 http://...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

支付宝支付开发—当面付条码支付和扫码支付

关键字:支付宝 当面付 条码支付 扫码支付 二维码支付 订单查询 退款作者:方倍工作室本文介绍支付宝中当面付下属的条码支付、扫码支付、订单查询、退款申请的集成开发过程。 本文分为以下五个部分:条码支付...
  • txw1958
  • txw1958
  • 2016年08月26日 18:59
  • 12229
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于JQuery的messager弹窗组件开发
举报原因:
原因补充:

(最多只允许输入30个字)