JQuery - Plugins: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(Eine dazwischenliegende Version von einem anderen Benutzer wird nicht angezeigt)
Zeile 1: Zeile 1:
−
== jQuery - equal heights ==
+
Siehe: [[JavaScript - Plugins]]
  
−
<syntaxhighlight lang="javascript">
+
== Aufbau ==
−
/*
+
<pre>
−
/* * @Copyright (c) 2013 James Stoddern - info@jamesstoddern.net 
+
  //this is a jquery plugin,
−
* web:jamesstoddern.net 
+
//jquery plugins start this way
−
* 
+
//so you could select $('img').imageCrop();
−
* Permission is hereby granted, free of charge, to any person 
+
$.fn.imageCrop = function(customOptions) {
−
* obtaining a copy of this software and associated documentation 
+
     //Iterate over each object
−
* files (the "Software"), to deal in the Software without 
+
    this.each(function() {
−
* restriction, including without limitation the rights to use, 
+
         //keeps the current iterated object in a variable
−
* copy, modify, merge, publish, distribute, sublicense, and/or sell 
+
        //current image will be kept in this var untill the next loop
−
* copies of the Software, and to permit persons to whom the 
+
         var currentObject = this,
−
* Software is furnished to do so, subject to the following 
+
        //creates a new Image object   
−
* conditions: 
+
         image = new Image();
−
* The above copyright notice and this permission notice shall be 
+
         // And attach imageCrop when the object is loaded
−
* included in all copies or substantial portions of the Software. 
+
         //correct
−
* 
+
         image.onload = function() {
−
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
+
             $.imageCrop(currentObject, customOptions);
−
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
+
        };
−
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
+
        //sets the src to wait for the onload event up here ^
−
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
+
        image.src = currentObject.src;
−
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 
+
    });
−
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+
    // Unless the plug-in is returning an intrinsic value, always have the
−
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 
+
    // function return the 'this' keyword to maintain chainability
−
* OTHER DEALINGS IN THE SOFTWARE. 
+
     return this;
−
* 
+
};
−
* How to use it: 
+
</pre>
−
* 
 
−
* If you have a series of floated columns, which you wish to make the same height, give them all the same 
 
−
* class, and then run the plugin. It will determine the tallest div, and equalise the height of the rest 
 
−
* 
 
−
* $('.selector').equalHeights();
 
−
* 
 
−
* 
 
−
*/
 
−
 
−
(function( $ ) {
 
−
     $.fn.equalHeights = function() {
 
−
         var tallestElement = 0;
 
−
         var startRow = 0;
 
−
         var elements = new Array();
 
−
         var $currentElement;
 
−
         var topPosition = 0;
 
−
 
−
         this.each(function() {
 
−
 
−
             $currentElement = $(this);
 
−
            topPostion = $currentElement.position().top;
 
−
 
−
            if (startRow != topPostion) {
 
−
                for (currentDiv = 0 ; currentDiv < elements.length ; currentDiv++) {
 
−
                    elements[currentDiv].height(tallestElement);
 
−
                }
 
−
 
−
                elements.length = 0;
 
−
                startRow = topPostion;
 
−
                tallestElement = $currentElement.height();
 
−
                elements.push($currentElement);
 
−
 
−
            } else {
 
−
                elements.push($currentElement);
 
−
                tallestElement = (tallestElement < $currentElement.height()) ? ($currentElement.height()) : (tallestElement);
 
−
 
−
            }
 
−
 
−
            for (currentDiv = 0 ; currentDiv < elements.length ; currentDiv++) {
 
−
                elements[currentDiv].height(tallestElement);
 
−
            }
 
−
 
−
        });
 
−
 
−
     };
 
−
}) ( jQuery );
 
−
</syntaxhighlight>
 

Aktuelle Version vom 19. März 2019, 15:36 Uhr

Siehe: JavaScript - Plugins

Aufbau[Bearbeiten]

   //this is a jquery plugin,
//jquery plugins start this way 
//so you could select $('img').imageCrop();
$.fn.imageCrop = function(customOptions) {
    //Iterate over each object
    this.each(function() {
        //keeps the current iterated object in a variable
        //current image will be kept in this var untill the next loop
        var currentObject = this,
        //creates a new Image object    
        image = new Image();
        // And attach imageCrop when the object is loaded
        //correct
        image.onload = function() {
            $.imageCrop(currentObject, customOptions);
        };
        //sets the src to wait for the onload event up here ^
        image.src = currentObject.src;
    });
    // Unless the plug-in is returning an intrinsic value, always have the
    // function return the 'this' keyword to maintain chainability
    return this;
};