Jquery plugin template POPUP Plugin
以一个popup 的例子,学习怎么写jquery插件。插件 实例化时候 包括传属性,函数。类似jqueryUI 的使用感觉。
实现效果类似 android 的 toast 的效果。 显示提示消息,过几秒后消失。
是用方法与 JQuery UI 一样。
$('#aa').popup({
position:{
x:100,
y:200
},
duration:1000,
text:'大家好',
hide:function(duration) {
console.log(this);
alert('fadeout duraion' + duration);
}
});
代码讲解:
首先用jquery选择器,选择一个元素,来当作popup的容器。之后就是利用plugin的方法来穿参数。可以穿的参数有:
postion: popup显示的 position坐标
duration: popup显示的时间
text: 显示的文字
hide: popup div 隐藏后的回调函数
插件代码如下:
(function($) {
var methods = {
init:function(options) { //初始化一个 jqueryplugin实例
return this.each(function() {
var instance = this; //获取当前实例
var isInitialized = $(instance).data("isInitialized");
if(isInitialized == null) { //判断是否实例化过
$(instance).data('options', options);
//给 插件对象 附加css
render(instance);
$(instance).data("isInitialized", 'true');
}
})
},
show:function() {
var options = $(this).data('options'),
duration = options.duration,
that = this;
$(this).fadeIn(duration, function() {
that.fadeOut(duration, function() {
// 给初始化时候的 hide函数 传值
if(options.hide != undefined && options.hide != null) {
options.hide(duration);
}
});
});
}
};
//private
var popFadeOut = function(duration) {
setTimeout(function() {
}, duration);
};
//private
var render = function(instance) {
var $self = $(instance),
options = $self.data('options'),
duration = options.duration,
position = options.position,
isTop = options.isTop,
text = options.text;
var cssObject = new Object();
cssObject['height'] = '50px';
cssObject['width'] = '200px';
cssObject['position'] = 'absolute';
cssObject['left'] = position.x || 300;
cssObject['top'] = position.y || 100;
cssObject['background'] = 'black';
cssObject['color'] = 'white';
cssObject['display'] = 'none';
if(isTop) {
cssObject['zIndex'] = 999999;
}
$self.text(text);
$self.css(cssObject);
};
/**
* popUp插件构造函数。
*
* version 1.0
* Author: Yuqiao Gao 3/19/2013.
*/
$.fn.popup = function(method) {
if(methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if(typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jquery.popup');
}
};
})(jQuery);
转载于:https://www.cnblogs.com/Mr-Joe/archive/2013/03/19/2969247.html
Jquery plugin template POPUP Plugin相关推荐
- Ocata Neutron代码分析(六)——APIRouter的初始化(1)加载core plugin和service plugin...
在分析api-paste.ini时,曾分析到wsgi app neutronapiapp_v2_0是直接调用/neutron/api/v2/router.py中APIRouter的factory方法: ...
- could not load plugin descriptor for plugin directory ik
当解压ik文件,复制到es的plugins目录下,重新启动es时报错: could not load plugin descriptor for plugin directory ik 通过日志查看发 ...
- jQuery雪花插件JQuery-Snowfall Plugin
明天就是圣诞节,分享一个好玩的jQuery插件--JQuery-Snowfall Plugin,该插件可以实现在页面上飘落雪花的特效. JQuery-Snowfall插件的github项目地址:htt ...
- jQuery结合template.js实现单行文字有停顿连续向上滚动特效
html: <ul><li><div id="news_all"><p style="text-align: center;ma ...
- jQuery .tmpl(), .template()学习
昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里. 官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][option ...
- [原]jQuery .tmpl(), .template()学习
昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里. 官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][option ...
- 解决 在POM配置Maven plugin提示错误“Plugin execution not covered by lifecycle configuration”...
eclipse在其POM文件的一处提示出错如下:Plugin execution not covered by lifecycle configuration: org.apache.maven.pl ...
- jQuery组件(Popup)
关于Popup 它有两种形式,一种是全屏(默认),一种是显示在底部 1.全屏默认popup 它有一个模板,代码如下: <div id="" class="weui- ...
- datax运行自检命令报错 datax/plugin/reader/._xxxx/plugin.json]不存在
自检命令:python ./bin/datax.py ./job/job.json 报错 删除.临时文件即可 在datax/plugin目录下运行 find ./* -type f -name &qu ...
最新文章
- java核心编程视频教学
- PHP怎么读写XML?(四种方法)
- Python:C语言扩展
- oracle分区exchange,oracle 分区表exchange原理
- Linux中fdisk对应的c函数,linux下fdisk命令实战案例之详解
- 吉利成立数字科技新公司 经营范围涉区块链等
- Anguar 使用interceptor拦截器设置请求头传入jwt token
- PHP网站加功能,如何实现添加分类的功能
- swot分析模板_学生个人生涯规划报告模板
- java发送邮件-java工具类
- crmeb知识付费二开文档
- html5播放加速,Video Speed Controller Chrome(HTML5视频加速播放插件) v0.3.2 官方免费版...
- qq远程控制 总是提示权限不足
- 文本关键词的提取算法实验[又是转的]
- android分享截屏到微信,Android 微信分享长图 ScrollView 生成长截图 View变bitmap
- 从零开始的RISCV架构CPU设计(2)-CISC与RISC
- isEmpty()的坑
- phpspider框架的使用
- YV12toI420 yuv420、NV12、YV12相互转换
- matlab 打包封装,matlab中如何封装打包成exe文件
热门文章
- 【Ubuntu】 Ubuntu16.04设置窗口自适应
- mysql5.7 读写分离_mysql5.7的主从复制+读写分离
- 博弈论分析题_博弈论练习题答案 张照贵
- python做股票系统_GitHub - hetingqin/stock: stock,股票系统。使用python进行开发。
- 交换两个变量ab的值PHP,由[交换两个变量的值问题]理解程序的时空复杂度
- pixhawk的姿态控制算法解读
- CF-547E(Mike and Friends)后缀数组+线段树 AC自动机+DFS序+树状数组
- tfrecord数据报错 InvalidArgumentError: Feature: feature (data type: string) is required but could not
- 记录 之 整形数除整形数 产生的数据依然是整形,难搞哦
- pytorch切片,numpy切片的总结,以及数组切片常用操作的总结