Banner Code Displayer Ding

Authentic Jobs ist ein seit langem bestehendes, angesehenes und erfolgreiches Jobportal für Webdesign/Entwicklung. Ich bin sicher, dass ein Großteil dieses Erfolgs auf das schöne, minimale und durchdachte Design von Inhaber und Betreiber Cameron Moll zurückzuführen ist. Es gibt auch ein großzügiges Partnerprogramm, dessen Ansichten das durchdachte UI des restlichen Teils der Website teilen. Werfen Sie einen Blick auf den Ansicht für genehmigte Partner unten

Ich fand dies eine clevere Möglichkeit, Grafiken und Code-Schnipsel an Benutzer zu liefern, die möglicherweise keine HTML-Nerds sind, aber wahrscheinlich genug wissen, um zu kopieren und einzufügen. Dies ist die Ansicht, die ich mit jQuery für die Funktionalität demonstrieren werde.

 

Demo anzeigen   Beispiel herunterladen

 

Bei der Erstellung des Partnerprogramms für Are My Sites Up wollte ich im Wesentlichen dasselbe anbieten: Copy-Paste-Code und eine Auswahl an gehosteten Grafiken. Ich habe mich stark am Authentic Jobs-System orientiert. Für dieses Beispiel werde ich die Funktionalität, die ich für das AMSU-System geschrieben habe, mit einem Stil kombinieren, der der Authentic Jobs-Seite ähnelt.

Schemata

Funktionalität

1. Drei Hauptelemente: Größenwähler, Code-Feld, Beispielbereich
2. Standard ist eine 125×125 Grafik mit entsprechendem Code und Beispiel
3. Wenn eine neue Auswahl aus dem Größenwähler getroffen wird, aktualisieren sich das Code-Feld und der Beispielbereich dynamisch, um den neuen Code und das neue Beispiel anzuzeigen.

Das HTML-Markup

Wir sollten kurz innehalten und überlegen, was sich tatsächlich „ändert“, wenn eine neue Auswahl aus der Dropdown-Liste getroffen wird. Der Code ändert sich, aber das Einzige, was sich ändert, ist der Dateiname der ausgewählten Grafik. Dann ist der „Beispiel“-Bereich wörtlich genommen genau derselbe wie der Code, nur dass es echter Code ist, den wir rendern müssen, anstatt ihn in einem Textbereich anzuzeigen. Daher ist die einzige Information, die wir benötigen, um beide Bereiche dynamisch zu aktualisieren, der Dateiname. Seien wir also schlau und binden diese wertvollen Informationen in das Markup ein, das mit jedem<option>Element (alsrelAttribut) verknüpft ist. So hat unser JavaScript leicht darauf Zugriff.

<fieldset>

    <legend>Choose</legend>

    <form action="#" class="code-selector">
        <div>
            <label for="type-size">Graphic Size: </label>
            <select name="type-size" id="type-size">
                <option selected="selected" rel="AMSU_Ad_125x125v2.png">125 x 125</option>
                <option rel="AMSU_Ad_300x250v2.png">300 x 250</option>
                <option rel="AMSU_Ad_465v2.png">465 x 55</option>
                <option rel="AMSU_Ad_768x90v2.png">768 x 90</option>
                <option rel="AMSU_Ad_120x240.png">120 x 240</option>
                <option rel="AMSU_Ad_318x54.png">318 x 54</option>
                <option rel="AMSU_Ad_50x50.png">50 x 50</option>
            </select>
        </div>
        
        <div>
            <label for="code-example">Code: </label>
            <textarea rows="10" cols="25" id="code-box">&lt;a href="http://aremysitesup.com/aff/xxxxx"&gt;&lt;img src="//css-tricks.de/amsu/AMSU_Ad_125x125v2.png" alt="Are My Sites Up?" /&gt;&lt;/a&gt;</textarea>
            <p class="note">Just copy and paste the above text into your website. Your affiliate code has already been included!</p>
        </div>
    </form>
    
    <label>Example: </label>
    <div class="example-area" id="graphic-example-area">

        <a href="http://aremysitesup.com/aff/xxxxx"><img src="//css-tricks.de/amsu/AMSU_Ad_125x125v2.png" alt="Are My Sites Up?" /></a>
    
    </div>
    <p class="note">Example graphic may be scaled down above, but won't be placed on your own page.</p>

</fieldset>

Das CSS

Am CSS gibt es nichts sehr Wichtiges/Interessantes, und ich füge es hier fast wegen des Namens dieser Seite ein =). Vielleicht ein paar Dinge, die erwähnenswert sind… Das gesamte interne Layout wird praktisch dadurch erreicht, dass diese Labels Block-Elemente sind und sie mit einer festgelegten Breite nach links verschoben werden. Der äußere Rahmen wird mit der klassischen fieldset/legend-Kombination realisiert, die sehr schön und semantisch angemessen ist, da es sich technisch gesehen um ein Formular handelt.

 *                         { margin: 0; padding: 0; }
 body                      { background: #eee; font: 12px Georgia, Serif; color: #2d2d2d; }
 #page-wrap                { width: 600px; margin: 20px auto; }
 a img                     { border: 0; }
 h3                        { font-size: 24px; font-weight: normal; margin: 0 0 25px 0; }
 fieldset                  { border: 1px solid #666; padding: 15px; }
 legend                    { border: 1px solid #666; text-transform: uppercase; padding: 2px 6px; }
.code-selector div         { clear: both; margin: 0 0 25px 0; }
 label                     { font-size: 14px; display: block; width: 120px; float: left; text-align: right; padding: 2px 6px; }
.code-selector select      { border: 1px solid #666; padding: 2px 2px 2px 6px; }
.code-selector option      { padding: 0 12px; }
.code-selector textarea    { border: 1px solid #7d7858; padding: 10px; width: 375px; height: 80px; }
.note                      { font-size: 11px; width: 300px; margin: 0 0 0 130px; color: #666; }
.example-area              { margin-left: 130px; width: 375px; text-align: center; border: 1px solid #7d7858; padding: 10px; }
.example-area img          { max-width: 100%; }

Die letzte Zeile dort stellt sicher, dass Grafiken, die breiter als der Beispielbereich sind, verkleinert werden, um in den Beispielbereich zu passen. Wenn dies geschäftskritisch ist, beachten Sie, dass max-width in älteren Browsern nicht funktioniert und Sie möglicherweise eine alternative Technik entwickeln müssen.

Das jQuery JavaScript

Ich werde den Code unten im vollständigen Kontext zeigen, von der Einbindung der jQuery-Bibliothek auf der Seite bis zum Code selbst. Ich tue dies, weil ich denke, dass es die Leute manchmal verwirrt, wenn Code-Schnipsel gezeigt werden und sie nicht verstehen, wo diese Schnipsel hingehören oder wie sie zu verwenden sind. In einer „echten“ Umgebung wäre es natürlich klüger, den eigentlichen Code in eine extern referenzierte Datei zu verschieben, anstatt ihn so in Ihrem HTML zu haben.

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
    $(function() {
	   $("#type-size").change(function() {
	       var graphicFileName = $("#type-size option:selected").attr("rel");
	       var newCode = '<a href="http://aremysitesup.com/aff/xxxxx"><img src="//css-tricks.de/amsu/' + graphicFileName + '" alt="Are My Sites Up?" /></a>';
           $("#code-box").text(newCode);
           $("#graphic-example-area").html(newCode);
	   });
    });
</script>

Das wichtigste Wort oben iständern, was eine native jQuery-Funktion ist, die ausgelöst wird, wenn eine neue Auswahl aus unserer Dropdown-Box getroffen wird. Wenn dies geschieht, können wir feststellen, welche Option ausgewählt wurde, indem wir den:selectedSelektor in jQuery verwenden. Wir tun dies in der ersten Zeile der Change-Funktion und setzen eine Variable, die das ElementrelAttribut abruft, das wir klugerweise auf den neuen Dateinamen der Grafik gesetzt haben.

Als nächstes erstellen wir eine neue Zeichenkette, die buchstäblich der neue HTML-Code ist. Diese Zeichenkette wird doppelt genutzt. Wir werden sie als Text im Textbereich ersetzen und als HTML im Beispielbereich ersetzen. Schön, wir haben neuen kopierbaren Code, und wir garantieren, dass er funktioniert, weil derselbe genaue Code verwendet wird, um die Grafik unten anzuzeigen.

Barrierefreiheit (Accessibility)

So wie es ist, funktioniert dies **nur**, wenn JavaScript aktiviert ist. Ein Benutzer ohne JS würde den 125×125-Code und das Beispiel sehen, aber es würde nichts passieren, wenn er ein neues Element auswählt. Daher denke ich, dass ich das Ihnen überlasse, um die beste Barrierefreiheitslösung zu finden.

Ich denke, das würde ich tun

1. Ein Absende-Button zum Formular hinzufügen (mit JS ausblenden)
2. Das Formular an sich selbst senden lassen (überactionURL) als POST
3. Beim Laden der Seite prüfen, ob POST-Variablen vorhanden sind, anhand derer man sehen kann, welche Option ausgewählt wurde.
4. Je nach ausgewählter Option den entsprechenden Code/das entsprechende Beispiel anzeigen.

 

Demo anzeigen   Beispiel herunterladen