Mittleres Feld Links

Schlechtester Name aller Zeiten, aber ich hatte Schwierigkeiten, ihm einen Namen zu geben, und das schien zu passen. Dies ist das Endergebnis

Es deckt eine Vielzahl von Dingen ab, die ich interessant fand

• Die neue Syntax für die Elementerstellung von jQuery 1.4, die ziemlich cool ist und die wir noch nicht abgedeckt haben
• Schreiben eines kleinen Plugins, um wiederholten Code zu verhindern (und im Geiste von jQuery zu bleiben)
• Berührt, was ich langsam als objektorientiertes CSS betrachte

Das Ziel

Was wir hier haben, sind einige Inhaltsboxen. Das Ziel ist, dass sie sich verdunkeln und ein Link genau in der Mitte erscheint, wenn man mit der Maus darüber fährt. Mir ist bewusst, dass dies für viele Dinge keine ideale UI-Wahl ist. Dinge unleserlich zu machen, wenn man mit der Maus darüber fährt, ist eine ungewöhnliche Designentscheidung. Aber es könnte unter bestimmten Umständen perfekt sein. Moral von der Geschichte: Treffen Sie keine voreiligen Urteile aufgrund von Demos.

HTML

Nur ein Div mit etwas Text darin…

<div class="widget widget-one rounded">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

Was Sie tun möglicherweise möchten, ist, in jedes Widget einen Hyperlink einzufügen, der zur selben Stelle führt wie der Link, den wir mit JavaScript hinzufügen werden (Degradierbarkeit). Auch dies ist nur eine Demo und die Umstände werden in Live-Szenarien anders sein.

CSS

Ich nenne unsere kleinen Boxen „Widgets“. Beachten Sie, dass ich dem Div-Wrapper die Klasse widget gegeben habe. Dies ist das grundlegende Widget

.widget { 
   width: 300px; 
   padding: 20px; 
   border: 1px solid #999;
   margin: 0 20px 20px 0;
   float: left; 
   position: relative; 
}

Beachten Sie jedoch, dass in der Live-Demo und im obigen Bild die Widgets abgerundete Ecken haben. Wir alle wissen inzwischen, wie man abgerundete Ecken in CSS erstellt. Es gibt den Standardborder-radiusund seine verwandten Anbietererweiterungen. Warum fügen wir sie nicht direkt in die Widget-CSS selbst ein? Hier kommt das objektorientierte CSS ins Spiel…

Die Art und Weise, wie mein Gehirn und CSS *typischerweise* funktionieren, ist, dass ich versuche, das HTML so sauber und semantisch wie möglich zu halten. Mir wurde immer beigebracht, dass die Verwendung eines CSS-Klassennamens wie „red“ eine mega schlechte Praxis ist, weil „red“ nicht semantisch, sondern spezifisch beschreibend ist. Stattdessen sollten Sie etwas wie „important“ oder „warning“ verwenden, denn wenn Sie später entscheiden, dass diese Dinge grün statt rot sein sollen, ist Ihre „red“-Klasse peinlich irrelevant.

Objektorientiertes CSS wirft einige dieser Überlegungen über den Haufen. Objektorientiertes CSS verwendet Klassennamen speziell, um Designmerkmale dieses „Objekts“ (Seitenelement) zu beschreiben. Beachten Sie, dass ich dem Widget auch die Klasse „rounded“ gegeben habe. In unserem CSS wird die Klasse rounded dies sein

.rounded { 
   -moz-border-radius: 20px;  
   -webkit-border-radius: 20px; 
   border-radius: 20px; 
}

Gotteslästerung? Ich dachte früher, aber in letzter Zeit gefällt mir dieser Ansatz wirklich gut. Es kann sein, dass 20 Dinge auf der Seite „gerundet“ sind. Jetzt müssen wir nur noch die gerundete Klasse auf jedes davon anwenden, und sie werden gerundet. Müssen Sie diesen Randradius anpassen? Passen Sie ihn an einer Stelle an, und alle gerundeten Objekte stimmen überein. Ohne dies würden wir 60 verschiedene Stellen in unserem CSS aktualisieren.

Das mag für einige Websites richtig sein und für andere nicht. Das klingt zwar nach einer Ausflucht, aber es stimmt. Vielleicht ist es unrealistisch für eine Website mit viel altem Inhalt. Es könnte brillant sein für eine brandneue Website mit weniger Inhalt, wo es fast genauso viel CSS wie HTML gibt.

Das JavaScript wird letztendlich ein neues Div zu unseren Widgets hinzufügen, das die Aufgabe hat, das Widget zu verdunkeln. Wir nennen diese Klasse „overlay“. Hier ist die CSS dafür

.overlay { 
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: url(../images/black75.png);
    background: rgba(0,0,0,0.6); 
    text-align: center; 
}

Es verwendet RGBa, um für moderne Browser zu verdunkeln (mehr Flexibilität, kann eine HTTP-Anfrage sparen) und fällt auf ein PNG mit Alpha-Transparenz zurück (für IE 7). Eine andere Möglichkeit, damit umzugehen, wäre die Verwendung einer soliden schwarzen Hintergrundfarbe und die Verwendung von normaler Transparenz, aber da in dieser Demo der „Link im mittleren Feld“ im Overlay sein wird und wir nicht möchten, dass dieser ebenfalls transparent ist, funktioniert dies gut.

jQuery JavaScript

Um unser Ziel kurz zu wiederholen: Wenn ein Widget mit der Maus überfahren wird, möchten wir es verdunkeln und einen Link genau in der Mitte platzieren. In unserer Demo haben wir vier Widgets. Einige von ihnen haben unterschiedliche Höhen, daher müssen wir dies berücksichtigen. Jedes Widget zeigt auch unterschiedlichen Text als „mittleren Button-Link“ und eine andere URL an. Das bedeutet, dass ein Teil dieses Codes unterschiedlich sein wird, aber vieles wird gleich bleiben. Das erfordert eine gewisse Abstraktion. In JavaScript könnten wir direkt eine benutzerdefinierte Funktion verwenden, die wir für jedes Widget aufrufen könnten. Im Geiste von jQuery machen wir daraus ein kleines Plugin. Das bedeutet, dass wir einige süße jQuery-spezifische Funktionen wie Chainability intakt halten.

Beachten Sie, dass wir jedem Widget einen eindeutigen Klassennamen hinzugefügt haben. Das dient dazu, Widgets individuell mit diesem Hook in JavaScript ansprechen zu können. Wir hätten auch IDs verwenden können, was etwas effizienter ist, aber hey, Sie haben vielleicht zwei Widgets auf derselben Seite, die denselben Text und denselben Link verwenden. Die Verwendung desselben Klassennamens funktioniert in diesen Umständen, während IDs nicht funktionieren würden. Das ist die gewünschte Abstraktion

$(function() {
    
    $(".widget-one").middleBoxButton("Read More", "#read");
    $(".widget-two").middleBoxButton("Go to the Store", "#store");
    $(".widget-three").middleBoxButton("Continue", "#more");
    $(".widget-four").middleBoxButton("Behold!", "#bazinga");

});

Natürlich ist „middleBoxButton“ keine Funktion. Das werden wir als unser Plugin erstellen. Hier ist das ganze Paket

var $el, $tempDiv, $tempButton, divHeight = 0;

$.fn.middleBoxButton = function(text, url) {
    
    return this.hover(function(e) {
    
        $el = $(this).css("border-color", "white");
        divHeight = $el.height() + parseInt($el.css("padding-top")) + parseInt($el.css("padding-bottom"));
                
        $tempDiv = $("<div />", {
            "class": "overlay rounded"
        });
        
        $tempButton = $("<a />", {
            "href": url,
            "text": text,
            "class": "widget-button rounded",
            "css": {
                top: (divHeight / 2) - 7 + "px"
            }
        }).appendTo($tempDiv);
        
        $tempDiv.appendTo($el);
        
    }, function(e) {
    
        $el = $(this).css("border-color", "#999");
    
        $(".overlay").fadeOut("fast", function() {
            $(this).remove();
        })
    
    });
    
}

Wenn also ein Widget mit der Maus überfahren wird, wird ein brandneues <div> erstellt. Dieses Div hat die Klassen „overlay“ und „rounded“. Wir wissen bereits, was „rounded“ bedeutet (OOCSS). Wir wissen auch bereits, was das „overlay“ ist; es stellt sicher, dass das Div genauso groß ist wie das Div, indem es absolute Positionierung und die Werte Top, Right, Bottom und Left alle auf Null setzt, und kümmert sich um die Verdunkelung. Mit diesem Div geschieht aber noch nichts.

Dann erstellen wir einen Ankerlink. Wir geben ihm den Text und das href-Attribut, die wir dem Plugin explizit zu diesem Zweck übergeben haben. Dann fügen wir diesen Link zum Overlay-Div hinzu, das wir gerade erstellt haben, und fügen dann beide zusammen zum Widget hinzu. Dieses Geschäft mit der Elementerstellung wird durch die neue Syntax für die Elementerstellung von jQuery 1.4 schön und prägnant. Dieser Teil

$("<a />", {
    "href": url,
    "text": text,
    "class": "widget-button rounded",
    "css": {
        "top": (divHeight / 2) - 7 + "px"
    }
});

Beachten Sie, dass ich alle „Schlüssel“ (der Teil vor dem Doppelpunkt) in Anführungszeichen gesetzt habe. Die meisten Schlüssel funktionieren ohne Anführungszeichen, aber ich hatte Probleme mit dem Schlüssel „class“, der in IE nicht funktionierte. Es stellt sich heraus, dass es kein Fehler ist, sondern dass „class“ ein reserviertes Wort in JavaScript ist, und es ist schlechter Stil, es nicht zu quotieren. Es stellt sich auch heraus, dass es guter Stil ist, alles zu quotieren, wenn man JSON-ähnliche Syntax verwendet, wie diese.

Da eines unserer Ziele hier ist, dass der Link genau in der Mitte erscheint, lassen Sie uns darüber sprechen. Horizontales Zentrieren ist einfach, das Overlay-Div hat text-align: center, also das ist es. Vertikales Zentrieren ist etwas kniffliger. Es gibt CSS-Möglichkeiten dafür, aber keine, die super sauber und einfach sind. Wir verwenden sowieso JavaScript, also nutzen wir das aus. Wir messen einfach die Höhe des Widgets, halbieren sie und schieben den Link um diese Distanz nach unten. Der etwas umständliche Teil ist der Wert „7“. Man hasst es, einen solchen Wert fest zu codieren, wenn ich eigentlich „die halbe Höhe des Buttons“ meine. Das Problem ist, dass ich die Höhe des Buttons nicht berechnen konnte, weil er noch nicht existiert, wenn ich die anderen Attribute setze. Wenn Sie eine Idee haben, lassen Sie es mich wissen. Beachten Sie auch, dass die Höhe des Widgets nicht nur durch die Funktion .height() berechnet wird, sondern durch diese und die obere und untere Polsterung.

Die Callback-Funktion für den Hover (Maus raus) setzt einfach die Umrandungsfarbe auf ihre ursprüngliche Farbe zurück und blendet das Overlay-Div aus (und entfernt es dann). Fertig!

Demo und Download

Demo anzeigen   Dateien herunterladen