Книга по MODx
Книга «Официальный сайт на базе MODx - как это делается»

Обложка книги
Наши заметки о MODx
В этом разделе мы будем собирать небольшую копилку секретов по работе с системой управления контентом сайта (CMS) MODx. Эти заметки ни в коем случае не претендуют на лавры документации. На нашем сайте тема MODx вообще занимает небольшой уголок, и эти материалы мы размещаем только потому, что по роду основной работы нам приходится оказывать техническую поддержку нескольким десяткам организаций, использующих наши прототипы сайтов. В то же время кое-что может пригодиться и другим людям.
Мы не претендуем на изложение "истины в последней инстанции". Наверняка в этих заметках гуру MODx найдут неточности и ошибки. Мы будем очень благодарны, если на это нам укажут в комментариях.
В заметках мы стараемся не просто сразу приводить готовое правильное решение, но и показываем, как мы набивали шишки в процессе поиска.

Создание скруглений с использованием Javascript


Ещё один вариант создания скругленных уголков предложил TecHMeaT - Rounded corners HTML+CSS+jQuery.

У этого автора боксы имеют не только скругленные уголки, но и заголовки. Заголовки - это весьма существенное отличие, кроме того код рисования уголков формируется с помощью Javascript, поэтому рассмотрим этот способ подробнее.

 

Сначала мы не будем разбирать CSS, а сразу покажем HTML-код для одного бокса: 

<div class="block green">
<div class="container">
<div class="title">
<strong class="white">Заголовок бокса</strong>
</div>
<div class="text">
текст бокса текст бокса текст бокса 
текст бокса текст бокса текст бокса 
текст бокса текст бокса текст бокса 
</div>
</div>
</div>

Всё замечательно и просто. Мы вообще не видим никакого кода, формирующего уголки, а они отображаются:

Бокс с заголовком

 В приведенном коде лишним может показаться только <div class="container">, но и он здесь не зря использован.


Посмотрим CSS: 

.block{
  margin: 0 0 8px 100px;
  width: 200px;
}

.container{
  min-height: 82px;
  _height: 82px;
  border-right: 1px solid #CECECE;
  border-left: 1px solid #CECECE;
  background: #FFF;
}

.text{
  padding: 10px 15px;
}

.text .shadow{
  display: none;
}

.title{
  height: 20px;
  padding: 7px 0 0 15px;
  border-bottom: 1px solid #CCC;
}

.green .title{
  background: #8DF05D url(../images/green.png) repeat-x 0 0;
}

.title span{
  float: left;
  width: 21px;
  min-height: 10px;
  _height: 10px;
}

.title strong{
  float: left;
  padding: 0px 12px 0 0;
  font: 900 14px/1 Arial, sans-serif;
}

.title strong.white{
  color: #FFF;
}

.block .top, .block .bottom{
  display: block;
  height: 4px;
  overflow: hidden;
}

.b1, .b1 em, .b2, .b2 em, .b3, .b3 em, .b4, .b4 em{
  display: block;
  height: 1px;
  overflow: hidden;
  background: #FFF;
}

.b1{
  border-right: 1px solid #E2E2E2;
  border-left: 1px solid #E2E2E2;
}

.b1 em{
  border-right: 1px solid #D6D6D6;
  border-left: 1px solid #D6D6D6;
}

.blue .top .b1 em{
  border-right: 1px solid #B0CEDE;
  border-left: 1px solid #B0CEDE;
  background: #A6D0E5;
}

.green .top .b1 em{
  border-right: 1px solid #9FF277;
  border-left: 1px solid #9FF277;
  background: #8BED5C;
}

.b2{
  margin: 0 1px;
  border-right: 1px solid #D2D2D2;
  border-left: 1px solid #D2D2D2;
}

.b2 em{
  border-right: 1px solid #EAEAEA;
  border-left: 1px solid #EAEAEA;
}

.blue .top .b2 em{
  border-right: 1px solid #B7D6E6;
  border-left: 1px solid #B7D6E6;
  background: #A8D1E7;
}

.green .top .b2 em{
  border-right: 1px solid #9FF277;
  border-left: 1px solid #9FF277;
  background: #8DEF5C;
}

.b3{
  margin: 0 2px;
  border-right: 1px solid #D2D2D2;
  border-left: 1px solid #D2D2D2;
  background: #DADADA;
}

.b3 em{
  margin: 0 1px;
  border-right: 1px solid #F3F3F3;
  border-left: 1px solid #F3F3F3;
}

.blue .top .b3 em{
  margin: 0;
  border-right: 1px solid #BCD6E3;
  border-left: 1px solid #BCD6E3;
  background: #ACD5EA;
}

.green .top .b3 em{
  margin: 0;
  border-right: 1px solid #9FF277;
  border-left: 1px solid #9FF277;
  background: #8DF05D;
}

.b4{
  margin: 0 3px;
  border-right: 1px solid #E2E2E2;
  border-left: 1px solid #E2E2E2;
  background: #D2D2D2;
}

.b4 em{
  margin: 0 1px;
  background: #CECECE;
}

.green{
  color: #090;
}

 В таблице стилей мы видим описание классов b1...b4, формирующих ступеньки уголков, как и в других способах. Но эти классы нигде не вызываются в коде HTML. Секрет" заключается в использовании Javascript. В head страницы написано: 

<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>

Сначала загружается библиотека jsquery, а потом - дополнительный файл common.js.

Замечание.
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.

Подробности можно узнать в Википедии.

Здесь мы с библиотекой разбираться не будем, отметим только, что она используется и в MODx.


В файле common.js нас интересует только вот этот код: 

$(document).ready(function(){
$(".container").after("<div class='shadow'><b></b><em></em></div>");
$(".container").before("<div class='top'><b class='b4'><em></em></b><b class='b3'><em></em></b><b class='b2'><em></em></b><b class='b1'><em></em></b></div>");
$(".container").after("<div class='bottom'><b class='b1'><em></em></b><b class='b2'><em></em></b><b class='b3'><em></em></b><b class='b4'><em></em></b></div>");
});

 В переводе на человечьий язык этот код при загрузке страницы вставляет перед блоком класса container HTML-код 

<div class='top'>
<b class='b4'><em></em></b>
<b class='b3'><em></em></b>
<b class='b2'><em></em></b>
<b class='b1'><em></em></b>
</div>

 а после блока класса container HTML-код 

<div class='bottom'>
<b class='b1'><em></em></b>
<b class='b2'><em></em></b>
<b class='b3'><em></em></b>
<b class='b4'><em></em></b>
</div>
<div class='shadow'>
<b></b><em></em>
</div>

При этом эти коды добавляются в объектную модель документа (DOM), т.е. грубо говоря прямо в память браузера, и не видны при просмотре исходного кода страницы обычными средствами браузеров.

Замечание.
Если использовать дополнительные инструменты, например Web Developer в Firefox, то можно увидеть сгенерированный код, то есть то, что на самом деле показывает браузер: 
<div class="block green">
<div class="top">
<b class="b4"><em></em></b>
<b class="b3"><em></em></b>
<b class="b2"><em></em></b>
<b class="b1"><em></em></b>
</div>
<div class="container"> 
<div class="title">
<strong class="white">Заголовок бокса</strong>
</div>
<div class="text">
текст бокса текст бокса текст бокса 
текст бокса текст бокса текст бокса 
текст бокса текст бокса текст бокса 
</div>
</div>
<div class="bottom">
<b class="b1"><em></em></b>
<b class="b2"><em></em></b>
<b class="b3"><em></em></b>
<b class="b4"><em></em></b>
</div>
<div class="shadow"><b></b><em></em></div>
</div>

Преимущества и недостатки такого метода

Преимущества очевидны:

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

2. Дополнительный код вставляется везде, где применен класс container.

3. Если такая компоновка применялась на множестве страниц без уголков, то скрипт скруглит все боксы.

Недостатки - действительные или кажущиеся:

1. А если в браузере отключен Javascript? Ничего особо страшного не произойдет, просто боксы будут показаны без скругления:

Отключен Javascript

2. Библиотека jquery весит 117 кбайт, а это дополнительный траффик. Вообще-то это не такой уж и большой вес, по нынешним временам, кроме того библиотека может использоваться и в других целях, да и она будет лежать в кэше браузера, так что на скорость загрузки особого влияния не оказывает. Но не забываем также, что будет уменьшаться и код самой страницы - в него ведь не будут вставляться теги рисования уголков.

Фактически это мелкие недостатки, которыми можно пренебречь. Есть и более важные - например, фиксированная высота заголовка. Длинный заголовок ломает дизайн:

Длинный заголовок

Вообще-то это не недостаток метода - такие боксы и не должны иметь длинные заголовки, это надо учитывать. Кроме того, никто не заставляет использовать авторские стили на 100% - их же можно (и нужно) изменить для собственных условий. Только с умом:

Вписанный заголовок

Управление цветом


А если нам нужен бокс другого цвета? Делаем очень просто:

  Пишем HTML: 

<div class="block green">
<div class="container"> 
<div class="title"><strong>Заголовок бокса</strong></div>
<div class="text">
текст бокса текст бокса текст бокса текст 
бокса текст бокса текст бокса текст бокса 
</div>
</div>
</div>
<div class="block blue">
<div class="container"> 
<div class="title"><strong>Заголовок бокса</strong></div>
<div class="text">
текст бокса текст бокса текст бокса текст 
бокса текст бокса текст бокса текст бокса 
</div>
</div>
</div>

Добавляем в CSS строчку: 

.blue .title{
   background:#A9D3E8 url(../images/blue.png) repeat-x 0 0;
   }

И видим результат:

Разноцветные боксы

Разумеется, также можно установить и цвет фона основного бокса (если оно надо), и цвет рамок.

Особенности MODx

Как и в случаях с другими технологиями рисования уголков мы можем вообще избавиться от Javscript и иных повторяющихся кусков HTML-кода и вынести их в чанки.

Чанк T_BOX_START - начало бокса до заголовка 

<div class="block green">
<div class="top">
<b class="b4"><em></em></b>
<b class="b3"><em></em></b>
<b class="b2"><em></em></b>
<b class="b1"><em></em></b>
</div>
<div class="container"> 
<div class="title"><strong>

Чанк T_BOX_TEXT - конец заголовка, начало текста 

 </strong></div> <div class="text">

Чанк T_BOX_END - конец бокса 

      </div>
</div>
<div class="bottom">
<b class="b1"><em></em></b>
<b class="b2"><em></em></b>
<b class="b3"><em></em></b>
<b class="b4"><em></em></b>
</div>
<div class="shadow"><b></b><em></em></div>
</div>

Пример вызова в шаблоне или чанке: 

<div class="block blue">
{ {T_BOX_START} }Блок шапки { {T_BOX_TEXT} }
Вместо шапки ставлен вызов бокса 
Вместо шапки ставлен вызов бокса 
Вместо шапки ставлен вызов бокса 
Вместо шапки ставлен вызов бокса 
{ {T_BOX_END} }
</div>

Возможные результаты (показаны и другие боксы):

Разные боксы

Разные боксы

А хорошо это или плохо - чанки вместо Javascript? Вот это пусть каждый для себя решает.

29-09-2009 11:13:28



    Содержание раздела «Rounded corners HTML+CSS+jQuery»:
Комментарии любых посетителей

Написать комментарий