jQuery弹窗插件设计

03-12-2016

写jQuery插件在实际网页开发中很常见,自己看了一些插件开发的资料,编写了一个很简易的jQuery弹窗插件。完成了搭了插件框架的搭建,调用插件时可以传入多个参数设置弹窗功能。同时,后续可以对其做更多的弹窗功能以及样式的拓展。

插件编写

尝试jQuery的插件编写时,看了一些资料,主要启发比较大的是两篇:什么?你还不会写JQuery 插件jQuery插件开发精品教程。看完后可以发现其实插件的编写按照固定的框架构建就可以了。

第一篇文章中,主要是区分了$.extend和$.fn.extend这两个概念。

第二篇中,更加循序渐进,而且其中面向对象开发的构建方法有助于插件后续功能的拓展开发,很值得借鉴学习。

看完这两篇文章后,就动手尝试练习编写一个插件啦,尝试了最简单的弹窗插件。

当然,对于面向对象的插件开发方法,里面this的使用也是需要关注的一个点,刚开始写弹窗插件时因为this使用不当而出了一些bug。其实只要时刻留意this对象运行时基于函数的执行环境绑定即可,在闭包中如果想要访问到外部作用域的this,就需要先将其保存在一个闭包能够访问到的变量里。

项目要求

编写插件用于实现一个弹窗。主要是构建好弹窗插件的框架。

1、弹窗需要有遮罩,同时弹窗居中。

2、弹窗的样式可以在调用插件时传入参数设置。弹窗的显示内容等也可以调用时进行设置。

3、后续可以继续拓展插件功能。

实现结果

页面上点击后调用了插件。

项目入口

文章目录

前端技术(8)

个人生活(2)

前端阅读(6)

项目练习(12)

Susie's Cubbyhouse

design by LiShu 联系我