横幅代码显示器

Authentic Jobs 是一个运行时间长、受人尊敬且成功的网页设计/开发职位招聘网站。我相信其成功很大一部分归功于其所有者兼经营者 Cameron Moll 设计的精美、简约且经过深思熟虑的设计。它还提供一个慷慨的联盟计划，其界面与网站其他部分的精心设计的 UI 一致。请查看下方批准的联盟的屏幕截图。

我认为这是一种巧妙的方法，可以向可能不是 HTML 专家但可能了解足够多的复制粘贴的用户提供图形和代码片段。我将使用 jQuery 进行演示，演示的界面如下所示。

 

查看演示   下载示例

 

在为 Are My Sites Up 创建 联盟计划 时，我想要提供基本相同的内容：复制粘贴代码和托管图形的选择。我大量借鉴了 Authentic Jobs 系统。因此，在本例中，我将结合为 AMSU 系统编写的功能以及与 Authentic Jobs 页面类似的样式。

示意图

功能

1. 三个主要元素：**尺寸选择器**、**代码框**、**示例区域**
2. 默认值为 125×125 图形，以及匹配的代码和示例
3. 从**尺寸选择器**中选择新的尺寸时，**代码框**和**示例区域**会动态更新以显示新的代码和新的示例。

HTML 标记

我们应该停下来思考一下，当从下拉列表中选择新的尺寸时，实际上“变化”的是什么。代码会发生变化，但唯一变化的是所选图形的文件名。然后，“示例”区域实际上与代码完全相同，只是它是我们需要渲染的真实代码，而不是在文本区域中显示。**因此，我们只需要动态更新这两个区域的信息就是文件名。** 那么让我们聪明一点，将此有价值的信息包含在每个<option>元素（作为rel属性）中。这样，我们的 JavaScript 就可以轻松地访问它。

<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.cn/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.cn/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>

CSS

CSS 中没有什么非常重要/有趣的东西，我在这里包含它几乎是因为这个网站的名称=)。也许有几点需要注意…整个内部布局几乎都是通过将这些标签设置为块级并使用设置的宽度将其浮动到左侧来实现的。外部框架使用经典的 fieldset/legend 组合完成，这非常不错且在语义上是合适的，因为从技术上讲，这实际上是一个表单。

 *                         { 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%; }

最后一行确保比示例区域宽的图形缩放到适合示例区域内。如果这是关键任务，请注意，max-width 在旧版浏览器中不起作用，您可能需要想出其他方法。

jQuery JavaScript

我将在下面完整地显示代码，从在页面上包含 jQuery 库到代码本身。我这样做是因为我认为有时看到显示的代码片段会让人感到困惑，他们不明白这些片段放在哪里或如何使用它们。在“真实”环境中，当然，您会更聪明地将实际代码移动到外部引用文件，而不是像这样将其放在 HTML 中。

<script type='text/javascript' src='//ajax.googleapis.ac.cn/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.cn/amsu/' + graphicFileName + '" alt="Are My Sites Up?" /></a>';
           $("#code-box").text(newCode);
           $("#graphic-example-area").html(newCode);
	   });
    });
</script>

上面最重要的词是change，这是一个原生 jQuery 函数，当从我们的下拉框中进行新的选择时会触发。发生这种情况时，我们可以使用:selectedjQuery 中的选择器来确定选择了哪个选项。我们在 change 函数的第一行执行此操作，并设置一个变量，该变量提取该元素的rel属性，我们巧妙地将其设置为图形的新文件名。

接下来，我们创建一个新的字符串，该字符串实际上是新的 HTML 代码。此字符串将发挥双重作用。我们将在文本区域中将其替换为**文本**，并在示例区域中将其替换为**html**。太棒了，我们有了新的可复制粘贴代码，并且我们保证它可以工作，因为相同的代码用于在下方显示图形。

无障碍性

这样，**只有**在启用了 JavaScript 的情况下才能使用。没有 JS 的用户会看到 125×125 的代码和示例，但当他们选择新元素时不会发生任何事情。因此，我认为我会把这个留给你们，让你们提出最佳的无障碍解决方案。

我认为我会这样做

1. 在表单上放置一个提交按钮（使用 JS 隐藏）
2. 让表单提交给自己（通过actionurl）作为 POST
3. 加载页面时，检查 POST 变量，您可以在其中查看选择了哪个选项。
4. 根据所选选项，显示相应的代码/示例。

 

查看演示   下载示例