Herramientas de usuario
fw:others:jquery
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
fw:others:jquery [2013/09/10 12:31] alfred [Otras formas] |
fw:others:jquery [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 405: | Línea 405: | ||
| $.post("test.php", { name: "John", time: "2pm" }, dataType="json" ); | $.post("test.php", { name: "John", time: "2pm" }, dataType="json" ); | ||
| </code> | </code> | ||
| - | ==== Plugins ==== | + | ===== Plugins ===== |
| + | ==== Ejemplos ==== | ||
| === Boilerplate === | === Boilerplate === | ||
| <code javascript> | <code javascript> | ||
| Línea 434: | Línea 436: | ||
| // where "methodName" is the name of a function available in the "methods" object below | // where "methodName" is the name of a function available in the "methods" object below | ||
| var methods = { | var methods = { | ||
| - | |||
| // this the constructor method that gets called when the object is created | // this the constructor method that gets called when the object is created | ||
| init : function(options) { | init : function(options) { | ||
| - | |||
| // the plugin's final properties are the merged default and user-provided properties (if any) | // the plugin's final properties are the merged default and user-provided properties (if any) | ||
| // this has the advantage of not polluting the defaults, making them re-usable | // this has the advantage of not polluting the defaults, making them re-usable | ||
| this.pluginName.settings = $.extend({}, this.pluginName.defaults, options); | this.pluginName.settings = $.extend({}, this.pluginName.defaults, options); | ||
| - | |||
| // iterate through all the DOM elements we are attaching the plugin to | // iterate through all the DOM elements we are attaching the plugin to | ||
| return this.each(function() { | return this.each(function() { | ||
| - | |||
| var $element = $(this), // reference to the jQuery version of the current DOM element | var $element = $(this), // reference to the jQuery version of the current DOM element | ||
| element = this; // reference to the actual DOM element | element = this; // reference to the actual DOM element | ||
| - | |||
| // code goes here | // code goes here | ||
| - | |||
| }); | }); | ||
| - | |||
| }, | }, | ||
| - | |||
| // a public method. for demonstration purposes only - remove it! | // a public method. for demonstration purposes only - remove it! | ||
| foo_public_method: function() { | foo_public_method: function() { | ||
| - | |||
| // code goes here | // code goes here | ||
| - | |||
| } | } | ||
| - | |||
| } | } | ||
| - | |||
| // private methods | // private methods | ||
| // these methods can be called only from inside the plugin | // these methods can be called only from inside the plugin | ||
| Línea 471: | Línea 461: | ||
| // arguments to be passed to the method | // arguments to be passed to the method | ||
| var helpers = { | var helpers = { | ||
| - | |||
| // a private method. for demonstration purposes only - remove it! | // a private method. for demonstration purposes only - remove it! | ||
| foo_private_method: function() { | foo_private_method: function() { | ||
| - | |||
| // code goes here | // code goes here | ||
| - | |||
| } | } | ||
| - | |||
| } | } | ||
| - | |||
| // if a method as the given argument exists | // if a method as the given argument exists | ||
| if (methods[method]) { | if (methods[method]) { | ||
| Línea 486: | Línea 471: | ||
| // call the respective method | // call the respective method | ||
| return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); | return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); | ||
| - | |||
| // if an object is given as method OR nothing is given as argument | // if an object is given as method OR nothing is given as argument | ||
| } else if (typeof method === 'object' || !method) { | } else if (typeof method === 'object' || !method) { | ||
| - | |||
| // call the initialization method | // call the initialization method | ||
| return methods.init.apply(this, arguments); | return methods.init.apply(this, arguments); | ||
| - | |||
| // otherwise | // otherwise | ||
| } else { | } else { | ||
| - | |||
| // trigger an error | // trigger an error | ||
| $.error( 'Method "' + method + '" does not exist in pluginName plugin!'); | $.error( 'Method "' + method + '" does not exist in pluginName plugin!'); | ||
| - | |||
| } | } | ||
| - | |||
| } | } | ||
| - | |||
| // plugin's default options | // plugin's default options | ||
| $.fn.pluginName.defaults = { | $.fn.pluginName.defaults = { | ||
| foo: 'bar' | foo: 'bar' | ||
| - | |||
| } | } | ||
| - | |||
| // this will hold the merged default and user-provided options | // this will hold the merged default and user-provided options | ||
| // you will have access to these options like: | // you will have access to these options like: | ||
| Línea 522: | Línea 498: | ||
| <code javascript> | <code javascript> | ||
| $(document).ready(function() { | $(document).ready(function() { | ||
| - | |||
| // attach the plugin to an element | // attach the plugin to an element | ||
| $('#element').pluginName({'foo': 'bar'}); | $('#element').pluginName({'foo': 'bar'}); | ||
| - | |||
| // call a public method | // call a public method | ||
| $('#element').pluginName('foo_public_method'); | $('#element').pluginName('foo_public_method'); | ||
| - | |||
| // get the value of a property | // get the value of a property | ||
| $('#element').pluginName.settings.foo; | $('#element').pluginName.settings.foo; | ||
| Línea 536: | Línea 509: | ||
| === Ejemplo === | === Ejemplo === | ||
| <code javascript> | <code javascript> | ||
| - | (function($){ | + | (function($){ |
| - | + | $.fn.myplugin = function(options){ | |
| - | $.fn.myplugin = function(options){ | + | |
| - | + | var defaults = { | |
| - | var defaults = { | + | myval: 1, |
| - | myval: 1, | + | mycolor: 'blue', |
| - | mycolor: 'blue', | + | storeValue: '#myInput' |
| - | storeValue: '#myInput' | + | }, |
| - | }, | + | settings = $.extend({}, defaults, options); |
| - | settings = $.extend({}, defaults, options); | + | return this.each(function(){ |
| - | + | $(this).click(function(){ | |
| - | + | doSomething(); | |
| - | return this.each(function(){ | + | |
| - | $(this).click(function(){ | + | |
| - | doSomething(); | + | |
| - | }); | + | |
| }); | }); | ||
| - | + | }); | |
| - | + | function doSomething(){ | |
| - | function doSomething(){ | + | $(settings.storeValue).val(settings.mycolor); |
| - | $(settings.storeValue).val(settings.mycolor); | + | } |
| - | } | + | }; |
| - | + | })(jQuery); | |
| - | }; | + | |
| - | + | ||
| - | + | ||
| - | })(jQuery); | + | |
| </code> | </code> | ||
| === Asignar datos independientemente === | === Asignar datos independientemente === | ||
| <code javascript> | <code javascript> | ||
| - | // set 'options' for '#div2' | + | // set 'options' for '#div2' |
| - | $("#div2").data('options', {width: 500, height: 500}); | + | $("#div2").data('options', {width: 500, height: 500}); |
| - | + | // get 'options' for '#div2' (this would be in your plugin code) | |
| - | // get 'options' for '#div2' (this would be in your plugin code) | + | var opts = $('#div2').data('options'); |
| - | var opts = $('#div2').data('options'); | + | alert('options.height:' + opts.height + '\n' |
| - | alert('options.height:' + opts.height + '\n' | + | 'options.width:' + opts.width); |
| - | 'options.width:' + opts.width); | + | $("#div2").data('priority', 2); |
| - | + | $("#div2").data('flagColors', ['red', 'white', 'blue']); | |
| - | + | $("#div2").data('parts', {arm: 2, legs: 2}); | |
| - | $("#div2").data('priority', 2); | + | // ...and retrieve it later like so: |
| - | $("#div2").data('flagColors', ['red', 'white', 'blue']); | + | var foo = $("#div2").data('priority'); |
| - | $("#div2").data('parts', {arm: 2, legs: 2}); | + | var foo2 = $("#div2").data('flagColors'); |
| - | // ...and retrieve it later like so: | + | var foo3 = $("#div2").data('parts'); |
| - | + | ||
| - | var foo = $("#div2").data('priority'); | + | |
| - | var foo2 = $("#div2").data('flagColors'); | + | |
| - | var foo3 = $("#div2").data('parts'); | + | |
| </code> | </code> | ||
| + | === Más ejemplos === | ||
| + | * {{:fw:others:example_plugin_adding.txt.zip|}} | ||
| ===== Como... ===== | ===== Como... ===== | ||
fw/others/jquery.1378816277.txt.gz · Última modificación: 2020/05/09 09:24 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
