以一個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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。