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;
};