jquery插件开发样例-jquery插件开发(1)

/*!
 * jQuery lightweight plugin boilerplate
 * Original author: @ajpiano
 * Further changes, comments: @addyosmani
 * Licensed under the MIT license
 */

// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.
;(function ( $, window, document, undefined ) {

    // undefined is used here as the undefined global
    // variable in ECMAScript 3 and is mutable (i.e. it can
    // be changed by someone else). undefined isn't really
    // being passed in so we can ensure that its value is
    // truly undefined. In ES5, undefined can no longer be
    // modified.

    // window and document are passed through as local
    // variables rather than as globals, because this (slightly)
    // quickens the resolution process and can be more
    // efficiently minified (especially when both are
    // regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = 'defaultPluginName',
        defaults = {
            propertyName: "value"
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method that merges the
        // contents of two or more objects, storing the
        // result in the first object. The first object
        // is generally empty because we don't want to alter
        // the default options for future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype.init = function () {
        // Place initialization logic here
        // You already have access to the DOM element and
        // the options via the instance, e.g. this.element
        // and this.options
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName,
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );

时间: 2024-10-05 09:02:27

jquery插件开发样例-jquery插件开发(1)的相关文章

基于jquery的邮箱输入联想插件开发

js代码: /*create by code_bunny 20140701 [email protected] https://github.com/OOP-Code-Bunny */ (function ($) { $.fn.autoComplate = function (opts) { this.each(function () { init.call(this, opts); }); return this; }; function init(opts) { var defaultOpt

<<锋利的jQuery>>样例改进利用, html文本输入框得到与失去输入焦点的提示信息显示切换函数

该书第二版3.2.10一节中,介绍val()方法时,所用的样例代码是有共性的,而且该样例的场景模式在实际工作中会用到,所以试着优化了一下,写了一个html文本输入框得到与失去输入焦点的提示信息显示切换函数.原书代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4、jQuery面向对象之简单的插件开发

1.alert例子 (function($){ $.alert = function(msg){ window.alert(msg); } $.fn.alert = function(msg){ window.alert(msg); } })($); $().ready(function(){ $.alert("aaaaa"); $("body").alert("bbbb"); }); 2.继承 (function(jQuery){ jQuery

jQuery原生框架中的jQuery.fn.extend和jQuery.extend

extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.extend 和 jQuery.extend 两个 extend 方法的,而区分这两个 extend 方法是理解 jQuery 的很关键的一部分.先看结论: 1)jQuery.extend(object) 为扩展 jQuery 类本身,为类添加新的静态方法: 2)jQuery.fn.extend(ob

在Eclipse下使用Maven创建SpringMVC样例项目

1,新建maven项目,项目名起为:MavenSpringMVC. 具体步骤参见我的上一篇博客:在eclipse下使用Maven创建Struts2项目样例 2,配置pom.xml文件,引入依赖包(当然,我也不是一开始就知道需要引入哪些包的,我一开始也只是引入了Spring的核心包,后面发现缺包了就再补上) <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/200

图标插件--jqplot实现柱状图及饼图,表盘图演示样例

柱状图 在jqPlot图表插件使用说明(一)中,我们已经能够通过jqPlot绘制出比較简单的线形图.通过查看源码.我们也能够看出,线形图是jqPlot默认的图表类型: [javascript] view plaincopy /** * Class: Series * An individual data series object.  Cannot be instantiated directly, but created * by the Plot oject.  Series propert

JsPlumb简单样例

JsPlumb简单样例: <!DOCTYPE html> <html> <head>     <script src="jquery-1.9.0.js"></script>     <script src="jquery-ui-1.9.2-min.js"></script>     <script src="jquery.jsPlumb-1.4.0-all.js&qu

Spring Ajax一个简单样例

配置不说了.要在前面helloworld的样例基础上弄. 相同在hello下新建ajax.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page isELIgnored ="false" %> <!DOCTYPE html PUBLIC "-//

怎样把报表放到网页中显示(Web页面与报表简单集成样例)

1.问题描写叙述 如今用户开发的系统基本上趋向于BS架构的浏览器/server模式.这些系统可能由不同的语言开发.如HTML.ASP.JSP.PHP等.因此须要将制作好的报表嵌入到这些页面中. FineReport制作出的报表能够通过Frame框架集成到Web页面中. 2.将报表显示在Frame框架内 2.1集成方法 报表作为页面的一部分,能够以iFrame方式嵌入在网页中.指定iFrame的src就可以. 1.     <iframe id="reportFrame" widt