JQuery扩展对象方法操作示例


Posted in jQuery onAugust 21, 2018

本文实例讲述了JQuery扩展对象方法操作。分享给大家供大家参考,具体如下:

应项目需求,对JQuery进行了一个扩展,需求如下:

项目中需要在浏览器右下角提示操作错误和系统提示内容,并有滑动移出和关闭的效果,所以自己写了一个效果还可以的弹出框来。就是给JQuery添加了一个方法ShowMsg。

先上代码:

$.fn.extend({
  ShowMsg: function (width, height, msgTitle_, msgContent_) {
      var TopY = 0; //初始化元素距父元素的距离
      $("#messageTitle").html(msgTitle_);
      $("#messageResDes").html(msgContent_);
      $(this).css("width", width + "px").css("height", height + "px"); //设置消息框的大小
      $(this).slideDown(1000); //弹出
      $("#messageTool").css("margin-top", -height); //为内容部分创建高度 溢出
      $("#message_close").click(function () {//当点击关闭按钮的时候
        if (TopY == 0) {
          $("#message").slideUp(1000); //这里之所以用slideUp是为了兼用Firefox浏览器
        }
        else {
          $("#message").animate({ top: TopY + height }, "slow", function () { $("#message").hide(); }); //当TopY不等于0时 ie下和Firefox效果一样
        }
        return false;
      });
      $(window).scroll(function () {
        $("#message").css("top", $(window).scrollTop() + $(window).height() - $("#message").height()); //当滚动条滚动的时候始终在屏幕的右下角
        TopY = $("#message").offset().top; //当滚动条滚动的时候随时设置元素距父原素距离
      });
      setTimeout(function () {
        if (TopY == 0) {
          $("#message").slideUp(1000); //这里之所以用slideUp是为了兼用Firefox浏览器
        }
        else {
          $("#message").animate({ top: TopY + height }, "slow", function () { $("#message").hide(); }); //当TopY不等于0时 ie下和Firefox效果一样
        }
        return false;
      }, 8000); //8s后自动滑动关闭
    }
})

代码一目了然,注释很清楚。下面呢,主要说下怎样对JQuery进行扩展吧。

上面的扩展我用了 $.fn.extend进行了扩展,是对JQuery的原生对象进行了方法的扩展,JQuery的扩展主要分为对JQuery本身类进行扩展(JQuery.extend)和对对象的进行方法扩展($.fn.extend)。下面分作说明:

1、用JQuery.extent对JQuery本身进行扩展:

JQuery.extend({
  showInfor:function(0{
      //do something
  }
});

怎么用上面这个呢,看下面:

$.showInfor();//这样就调用到了

2、用$.fn.extend进行方法扩展:

本文开始使用例子就是,下面直接看调用方法:

$("#messageBox").ShowMsg(230,100,"系统提示","提示信息");

说明:$.fn.extend是给JQuery的所有对象进行扩展方法,即只要JQuery可以定位到的对象,都可以使用这个方法。所以只要先定位到改对象,直接调用即可。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
纯jQuery实现前端分页功能
Mar 23 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 #jQuery
菊花转动的jquery加载动画效果
Aug 19 #jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 #jQuery
jQuery UI实现动画效果代码分享
Aug 19 #jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 #jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 #jQuery
jQuery实现轮播图及其原理详解
Apr 12 #jQuery
You might like
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
PHP加密技术的简单实现
2016/09/04 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
python 获取网页编码方式实现代码
2017/03/11 Python
Python3 模块、包调用&路径详解
2017/10/25 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
python同步两个文件夹下的内容
2019/08/29 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
清洁工表扬信
2014/01/08 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
商业用房租赁协议书
2014/10/13 职场文书
劳模先进事迹材料
2014/12/24 职场文书
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技