基于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消息弹出插件!...
  • catchmybreath123
  • catchmybreath123
  • 2014年06月14日 16:23
  • 7035

jquery messager

  • 2012年07月17日 18:46
  • 18KB
  • 下载

jquery.messager.js

(function(){ var ua=navigator.userAgent.toLowerCase(); var is=(ua.match(/\b(chrome|opera|safar...
  • huxiweng
  • huxiweng
  • 2012年04月20日 17:00
  • 3528

使用jQuery的message插件实现右下角弹出消息框

http://www.cnblogs.com/hnsdwhl/archive/2011/01/10/1931797.html  有时在页面加载的时候,需要在页面的右下角弹出一个小的提示框,显...
  • mituan1234567
  • mituan1234567
  • 2015年03月22日 10:13
  • 400

Jquery Messager 插件

MESSAGER插件 $(document).ready(function(){ $.messager.show(0,'送你一个Jquery Messager消息弹出插件!'); $("#s...
  • z69183787
  • z69183787
  • 2012年11月05日 15:04
  • 1075

jquery ui messager 消息框

  • 2010年01月08日 11:20
  • 23KB
  • 下载

easyUI Messager

@author YHC 覆盖默认值 $.messager.defaults. messager提供不同类型的消息框,包含confirm, prompt, progress等等.所有的消息框都是...
  • yhc13429826359
  • yhc13429826359
  • 2012年08月03日 10:06
  • 4483

day46_jquery_组件开发

1Js的组件开发1.1基本组件的开发1.1.1树的组件的开发1.1.1.1开发基本的组件1、以jquery插件的形式开发(function($){ })($);2、因为要用继承的形式实现具体的树,所以...
  • CSDN_AF
  • CSDN_AF
  • 2017年04月14日 16:08
  • 899

jquery右下角弹窗效果

复制代码保存到txt文本,改后缀为.html。注意引进两个js文件。jquery.js可以到官网下,jquery.messager.js我上篇博文发了,可以下载。 jquery右下角...
  • huxiweng
  • huxiweng
  • 2012年04月20日 17:08
  • 6556

jquery.messager.rar v1.5

  • 2013年03月17日 11:07
  • 19KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于JQuery的messager弹窗组件开发
举报原因:
原因补充:

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