Johannes Lauber Coding is Art

jQuery Widget Tutorial

Einleitung

jQuery UI Widgets sind graphische Elemente, die sich mit Hilfe des Javascript Frameworks jQuery in Webseiten einbinden lassen.

<script>
    $(document).ready() {
        $( "#dialog" ).dialog();
    });
</script>
<div id="dialog" title="Basic dialog">
   <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

Einer Übersicht der jQuery UI Widgets gibt es auf der offiziellen jQuery Webseite:

http://jqueryui.com/demos/

In diesem Tutorial erklär ich an einem kleinen Beispiel, wie man selber ein Widget erstellen kann.

Unser Widget soll einen Mouseovereffekt in Form eines Schlagschattens einem beliebigen Element hinzufügen.

Aufbau eines jQuery Widget

(function($){
    $.widget("ui.shadow", {
        options: {
        },

        _create: function(){
        },

        destroy: function(){
        },

        _setOption: function(option, value){
            $.Widget.prototype._setOption.apply(this, arguments);
        }
    });
})(jQuery);

Aufruf

$("div").shadow();

options

In den Options werden die Paramter in Form von JSON definiert. Es soll in unserem Beispiel Möglich sein, die Farbe, die Größe und die Positionierung des Schattens zu definieren.

options: {
    color: "#666",
    size: "5px",
    position: {
        left: "5px",
        top: "5px"
    }
},

_create

Die Funktion _create ist der Konstruktor und wird beim Erzeugen eines Elements aufgerufen. Der Mouseoverhandler fügt per CSS die Schlagschatten hinzu. Der Mouseouthandler entfernt sie wieder.

_create: function(){
    var o_element = this.element;
    var o_options = this.options;

    o_element.bind("mouseover",
    function(){
        var s_parameter =
            o_options.position.top + " " +
            o_options.position.left + " " +
            o_options.size + " " +
            o_options.color;
        o_element.css("-webkit-box-shadow", s_parameter);
        o_element.css("-moz-box-shadow", s_parameter);
        o_element.css("box-shadow", s_parameter);
    });

    o_element.bind("mouseout",
    function(){
        o_element.css("-webkit-box-shadow", "none");
        o_element.css("-moz-box-shadow", "none");
        o_element.css("box-shadow", "none");
    });
},

destroy

Die Funktion destory macht alle Änderungen an dem HTML Element rückgängig.

destroy: function(){
    var o_element = this.element;
    o_element.unbind("mouseover");
    o_element.unbind("mouseout");
},

_setOption

Diese Funktion läd die JSON Parameter in das option Objekt. Hier könnte man vorher noch Validierungen durchführen

Aufruf in unserem Beispiel

$(document).ready(function(){
    $("div, p").shadow({
        color: "#888",
        size: "15px",
        position: {
            left: "3px",
            top: "3px"
        }
    });
});

Fertiges Beispiel

Beispiel

Sonstiges

Ein gutes Tutorial auf Englisch zum Thema jQuery Widget: http://net.tutsplus.com/tutorials/javascript-ajax/coding-your-first-jquery-ui-plugin/

Ich empfehle das Buch jQuery Kochbuch für alle die sich tiefer mit dem Thema jQuery befassen wollen.