jqmobi插件制作(翻译)

应用程序框架插件是可重用的代码，以帮助增强您的应用程序的peices。它们可以被用来执行琐碎的任务，或者创建复杂的UI小部件。有两种类型的插件，你可以创建。
实用插件，不采取行动的对象
插件作用于一个桶/元素
如果你有一个预先存在的jQuery插件，使用的功能我们实现，你的代码应该是相当容易移植。大多数情况下，你只是需要更改参考在IIFE中，从“jQuery的”，“JQ”

首先，我们会告诉你的基本结构创建一个插件，然后告诉你如何创建一个实用工具插件，并最终作用于一个桶中的元素。

创建一个插件时，你应该先启动通过创建IIFE（立即调用的函数表达式）和延长$ FN对象。

(function($){

    $.fn.myPlugin=function(){

     

    };

})(jq)

上面创建了一个简单的功能，然后可以通过$（）访问。为myplugin（）。有几个提示操作时，要记住里面的插件。

javascript变量“，这”将是主应用程序框架对象。
要启用链接，您必须返回“本”
在这里，我们将告诉你如何做一个实用的插件，不作用于对象。

(function($){

    $.foo=function(){

        alert("bar");

    };

})(jq)

要访问上述功能，我们会调用$ foo（）的; - 在执行时，它会提醒“酒吧”。但是如果你想链呢？下面将创建一个函数，将保持本地计数器变量，我们将提醒

(function($){

    var counter=0;

    $.foo=function(){

        alert("Counter = "+counter);

        counter++;

        return this;

    };

})(jq)

当我们执行，我们将第一时间看到“计数器=0”。下一次，我们将看到“反=1”。注意“返回”的一部分，这使我们能够链的命令，这样我们就可以运行$ foo（）的foo（）的;

现在，我们将创建一个插件作用的元素。我们将得到所有的innerHTML他们，并提醒他们

(function($){

    var counter=0;

    $.foo=function(){

        var str="";

        for(var i=0;i<this.length;i++)

        {

            str+=this[i].innerHTML;

            str+=" | ";

        }

        alert(str);

        return this;

    };

})(jq)

与上述情况，我们可以提醒所有的div的内容做$（“DIV”）foo（）的;

下面是一个示例先进的插件。这个插件创建一个谷歌地图您指定的容器中的对象。谷歌地图缓存的对象，这样你就可以再稍后访问。

// @author Ian Maffett

// @copyright App Framework 2012

 

(function () {

    var gmapsLoaded = false; //internal variable to see if the google maps API is available

     

    //We run this on document ready.  It will trigger a gmaps:available event if it's ready

    // or it will include the google maps script for you

    $(document).ready(function () {

        if(window["google"]&&google.maps){

            $(document).trigger("gmaps:available");

            gmapsLoaded = true;

            return true;

        }

        var gmaps = document.createElement("script");

        gmaps.src = "http://maps.google.com/maps/api/js?sensor=true&callback=gmapsPluginLoaded";

        $("head").append(gmaps);

        window["gmapsPluginLoaded"] = function () {

            $(document).trigger("gmaps:available");

            gmapsLoaded = true;

        }

    });

 

    //Local cache of the google maps objects

    var mapsCache = {};

 

    //We can invoke this in two ways

    //If we pass in positions, we create the google maps object

    //If we do not pass in options, it returns the object

    // so we can act upon it.

     

    $.fn.gmaps = function (opts) {

        if (this.length == 0) return;

        if (!opts) return mapsCache[this[0].id];

        //Special resize event

        if(opts=="resize"&&mapsCache[this[0].id])

        {

           return google.maps.event.trigger(mapsCache[this[0].id], "resize");

        }

         

        //loop through the items and create the new gmaps object

        for (var i = 0; i < this.length; i++) {

            new gmaps(this[i], opts);

        }

    };

 

 

    //This is a local object that gets created from the above.

    var gmaps = function (elem, opts) {

        var createMap = function () {

            if (!opts || Object.keys(opts).length == 0) {

                opts = {

                    zoom: 8,

                    center: new google.maps.LatLng(40.010787, -76.278076),

                    mapTypeId: google.maps.MapTypeId.ROADMAP

                }

            }

            mapsCache[elem.id] = new google.maps.Map(elem, opts);

            google.maps.event.trigger(mapsCache[elem.id], 'resize');

        }

 

        //If we try to create a map before it is available

        //listen to the event

        if (!gmapsLoaded) {

            $(document).one("gmaps:available", function () {

                createMap()

            });

        } else {

            createMap();

        }

    }

})(jq);

源自:http://app-framework-software.intel.com/documentation.php#App Framework/jqm_plugins