В сегодняшнем уроке я покажу Вам, как создать форму показа кодов для разного типа баннеров.

Данный пример пригодится всем владельцам каких-либо партнерских программ, онлайн магазинов и просто сайтам, которые предлагают своим посетителям разместить свои баннеры на просторах Интернета.

Мы создадим простую форму, в которой пользователь сможет выбрать размер баннера и сразу же получить код для его установки у себя на сайте. Кроме этого, юзер сможет увидеть внешний вид баннера.

У нас будет 3 элемента: Size Selector, Code Box, Example Area (выбор размера, ячейка с кодом, просмотр баннера).

По умолчанию у нас будет показываться баннер 125х125 пикселей.

После выбора другого размера автоматически будет меняться код и баннер для просмотра.

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

CSS

В CSS нет ничего супер важного\интересного. Тут используется очень простой и понятный код.

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

Последняя строка в коде гарантирует, что баннер не будет выступать за края формы, если его размер больше формы. Он будет автоматически подстраиваться под размеры формы отображения.

jQuery JavaScript

Код ниже необходимо вставить в шапку документа:

<script type=&apos;text/javascript&apos; src=&apos;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2&apos;></script>
  <script type="text/javascript">
$(function() {
$("#type-size").change(function() {
var graphicFileName = $("#type-size option:selected").attr("rel");

var newCode = &apos;<a href="http://aremysitesup.com/aff/xxxxx"><img src="http://css-tricks.com/amsu/&apos; + graphicFileName + &apos;" alt="Are My Sites Up?" /></a>&apos;;
$("#code-box").text(newCode);
$("#graphic-example-area").html(newCode);
});
});
</script>

Самое главное слово выше - "change". Это родная функция jQuery, которая начинает действовать, когда мы выбираем другой размер из выпадающего списка. Когда это происходит, мы можем узнать выбранный вариант с помощью селектора jQuery :selected. Мы проделываем это в первой строке функции change, и задаем переменную, используя атрибут rel (который содержит название необходимого файла).

Следующим шагом мы создаем новую строку, новый HTML код. Эта строка выполняет двойную роль. Мы вставим ее в качестве text в текстовое поле и заменим ею html области просмотра. У нас получится copy-and-paste (скопировал и вставил) код, который используется также ниже для показа нового баннера.

Данная форма будет работать только при включенном JavaScript. Если JavaScript отключен будет виден только баннер 125×125. При изменении размера ничего происходить не будет.

Но это не является большой проблемой, так как подавляющее большинство пользователей Интернета просматривают странички с включенным JavaScript.

Добавлено: 30 Декабря 2014 08:16:07 Добавил: Андрей Ковальчук Нравится 0

Добавить