书接上文,上次弄了个基本版本的alert组件(其实就是十分钟前)但是很多功能都没有实现 没有关闭按钮 没有下面确定按钮 没有模态框 没有这那的 这次终极篇就都给它完善好弄个中级版本也是基本可用版本!

define(['jquery'],function($){
function Window(){
this.cfg = {
width:400,
height:200,
content:'我是默认文本内容',
handle:null,
title:'系统消息',
skinClassName:null,
hasCloseBtn:false,
hasMask:false
}
}
Window.prototype = {
alert:function(cfg){
var CFG = $.extend(this.cfg,cfg);
//var boundingBox = $('<div class="window_boundingBox"></div>');
var boundingBox = $('<div class="window_boundingBox">'+
'<div class="window_header">'+CFG.title+'</div>'+
'<div class="window_body">'+CFG.content+'</div>'+
'<div class="window_footer"><input type="button" value="确定"></div>'+
'</div>');

boundingBox.appendTo('body')

var btn = $('.window_footer input');

if(CFG.hasMask){

mask = $('<div class="window_mask"></div>');
mask.appendTo('body');

}
btn.appendTo(boundingBox);
btn.click(function(){
CFG.handle && CFG.handle();
boundingBox.remove();
mask && mask.remove();
})

boundingBox.css({
width:this.cfg.width + 'px',
height:this.cfg.height + 'px',
left:(CFG.x || (window.innerWidth - CFG.width)/2)+'px',
top:(CFG.y || (window.innerHeight - CFG.height)/2)+'px',
})

//右上角关闭按钮
if(CFG.hasCloseBtn){
var closeBtn = $('<span class="window_closeBtn">X</span>');
closeBtn.appendTo(boundingBox);
closeBtn.click(function(){
boundingBox.remove();
mask && mask.remove();
})
}

//定制样式
if(CFG.skinClassName){
boundingBox.addClass(CFG.skinClassName);
}
}
}
return {
Window:Window
}
})

main.js调用

require(['jquery','window'],function($,w){
new w.Window().alert({
width:500,
height:300,
content:'新年快乐',
title:'我是正确标题',
hasCloseBtn:true,
hasMask:true
})
})

靠!靠!靠!直接上代码  对就是这么简单暴力!

转载于:https://www.cnblogs.com/kongsanpang/p/6229848.html

自己封装js组件 - 中级相关推荐

  1. JS组件系列——封装自己的JS组件,你也可以

    前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...

  2. cmdb python 采集虚拟机_Python编程(三十四):CMDB后台管理、封装自定义JS组件、前端td标签定制显示内容及属性...

    一. CMDB后台管理 CMDB管理主要分为采集资产.API接口.后台管理.这里主要介绍CMDB后台管理. - 采集资产 - API - 后台管理- 资产列表- 业务线列表- 用户列表- 组列表... ...

  3. 纯生js ajax,纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件

    现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...

  4. Vue3封装Video.js组件(基于video.js)

    Vue3封装Video.js组件 话不多说直接上代码 在项目中安装Video.js 通过npm安装video.js npm install video.js --save Video.js组件的封装 ...

  5. 基于 next.js + mdx 搭建组件库文档项目(二) -- mdx 控件封装实现组件的演示与 Props 列表

    说明 经过上阶段的配置虽然可以在项目中使用 mdx 语法 来创建页面了,但是我们的组件库有一些定制化的需求:交互式的组件演示.组件 Props 列表展示.这些功能如果可以通过封装来实现,会大大提升开发 ...

  6. uni-app 封装js方、页面的生命周期、数据双向绑定、封装组件

    1.在外部封装js方法 很多页面都会用到相同的方法,为了代码的复用,可以在外部封装相同的方法 在项目中创建一个utils目录,存放外部封装的js方法 在utils目录下创建getDate.js文件 e ...

  7. 微信小程序wxs封装使用以及公共js组件封装

    wxs封装 wxs可以直接写在wxml页面中,并且在对应的位置调用,比如在{{ xxx.xxx() }}调用wxs的函数 <view><view>第{{m1.getMax(1) ...

  8. Vue.js组件化开发实践

    Vue.js组件化开发实践 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...

  9. 三十七、深入Vue.js组件Component(下篇)

    @Author:Runsen @Date:2020/7/4 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...

最新文章

  1. 截获android屏幕服务,如何捕获android设备屏幕内容?
  2. oracle 执行带参数的sql语句_当用EXECUTE IMMEDIATE执行SQL语句中的参数个数也是动态的?用什么方法实现?...
  3. 稀缺时尚男模促销海报|PSD分层,简单搞定设计稿
  4. 记录——《C Primer Plus (第五版)》第七章编程练习第十一题
  5. 开源OS FreeBSD 中 ftpd chroot 本地提权漏洞 (CVE-2020-7468) 的技术分析
  6. 记录一次不同接口之间并发导致的生产问题
  7. VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——AlbumView相册控件的使用方式...
  8. 教孩子学编程(Python语言版)
  9. python零基础教学plc_编程零基础应当如何开始学习 Python?
  10. 常用搜索算法—盲目搜索和启发式搜索
  11. 医院信息管理系统有哪些功能?
  12. Java对象逃逸分析
  13. Kafka3.0 SASL安全认证
  14. jquery手机触屏滑动拼音字母城市选择器代码
  15. 医院信息化-4 趋势与技术应用
  16. 读书笔记-《如何阅读一本书》
  17. 苹果计算机单位说明书,手把手教你用苹果电脑玩转办公
  18. Window10-MinGW下载安装gcc,g++编译器
  19. WPF实现蜘蛛纸牌游戏
  20. 为什么很多编程语言中数组都是从 0 开始编号

热门文章

  1. oracle11gr2查看数据库状态,Oracle 11gR2数据库文件丢失后的恢复测试
  2. mysql明明有索引却用不到的情况
  3. php的echo 和 return的区别
  4. springmvc基础入门,你确定你真的理解_双亲委派_了吗?
  5. 你知道面试必问的AOP吗(2),我在华为做Java外包的真实经历
  6. 【好文推荐】查看mysql安装位置
  7. 你花了多久弄明白架构设计?kafka日志清理
  8. 【深度学习】带有 CRF-RNN 层的 U-Net模型
  9. Python程序设计题解【蓝桥杯官网题库】 DAY15-算法训练
  10. c# poi写入e_C# 使用 NPOI 库读写 Excel 文件(转载)