• Главная
  • |
  • Верстка элементов центрального контента

Верстка элементов центрального контента

Верстка элементов центрального контента

Центральная часть CMS будет содержать в основном табличные данные. Следуя принципам семантической верстки, необходимо сверстать просто таблицу, а потом ее приукрасить стилями и JavaScript. В верхней части таблицы необходимо предусмотреть место для общих заголовков, элементов управления, таких как постраничная навигация и форма поиска, и заголовков столбцов таблицы. Внизу, под таблицей будут кнопки управления для добавления, сохранения и удаления содержимого таблицы.

Основа у нас уже есть (См. Верстка каркаса CMS).

Контент вставляем внутри дива с id="admin_content".

В верхней части таблицы - заголовок страницы:

<div class="path">Заголовок</div>

Следующей строкой идет Постраничная навигация и поиск (у нас пока ничего не работает, т.к. делается только верстка):

<table cellspacing="1" class="maintable">
  <tbody>
    <tr class="pag">
      <td class="td_form_show_str">
        Показать:&#160;
        <select id="select_pag" class="aselect">
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
        </select>
      </td>
      <td class="td_pagination_page">
        <div class="pagination" id="Pagination">Постраничная навигация</div>
      </td>
      <td class="td_field_search">
        <p style="margin: 0pt;">
          <span style="float: left;" class="search">&#160;</span>
          <input type="text" class="text_field corner-all" name="search" id="search" value="" />
          &#160;&#160;
        </p>
      </td>
      <td width="34px;" class="center">
        <a class="reset" title="Обновить страницу" href="#">&#160;</a>
      </td>
    </tr>
  </tbody>
</table>

Дальше собственно сама таблица с данными. В правой части таблицы есть управляющие кнопки. Их функциональное назначение следующее:

  • Столбец таблицы "Вл." - при нажатии на этот элемент, мы попадаем на страницу, которая является потомком к текущей странице.
  • Столбец таблицы "Пок." - при нажатии на этот элемент, происходит включение/выключение показа страницы на сайте.
  • Столбец таблицы "См." - при нажатии на этот элемент, в новом окне можно посмотреть редактируему страницу.
  • Столбец таблицы " Ред." - при нажатии на этот элемент, открывается окно редактирования текущей страницы.
  • Столбец таблицы "Уд." - чекбокс для выделения страницы, которую необходимо удалить.
<table class="maintable" cellspacing="1">
 <thead>
  <tr class="header">
   <th class="center" width="40px">№</th>
   <th class="left">Название</th>
   <th class="left" width="160px">Виртуальный каталог</th>
   <th class="center" width="30px">Вл.</th>
   <th class="center" width="30px">Пок.</th>
   <th class="center" width="30px">См.</th>
   <th class="center" width="30px">Ред.</th>
   <th class="center" width="30px">Уд.</th>
  </tr>
 </thead>
 <tbody id="admin_table_body">
  <tr class="tr_body">
   <td class="center"><input id="sort_" name="sort[]" type="text" class="t_text small_text" value="1" /></td>
   <td class="left">Страница 1</td>
   <td class="left">Название 1</td>
   <td class="center"><a href="#" title="Нет вложенных страниц или каталогов"><img src="img/forward_off.gif" alt="Нет вложенных страниц или каталогов" width="15" height="12"/></a></td>
   <td class="center"><a href="#" title="Включить"><img src="img/off.gif" alt="Включить" width="15" height="15"/></a></td>
   <td class="center"><a href="#" target="_blank" title="Просмотреть страницу"><img src="img/edit_pages_thumb.png" alt="Просмотреть страницу" width="16" height="16"/></a></td>
   <td class="center"><a href="#" title="Редактировать"><img src="img/fileexport.png" alt="Редактировать" width="16" height="15"/></a></td>
   <td class="center"><input id="dell[]" name="dell[]" type="checkbox" value="" /></td>
  </tr>
  <tr class="tr_body">
   <td class="center"><input id="sort_" name="sort[]" type="text" class="t_text small_text" value="2" /></td>
   <td class="left">Страница 2</td>
   <td class="left">Название 2</td>
   <td class="center"><a href="#" title="Перейти к вложенным каталогам и страницам"><img src="img/forward.gif" alt="Перейти к вложенным каталогам и страницам" width="15" height="12"/></a></td>
   <td class="center"><a href="#" title="Включить"><img src="img/on.gif" alt="Включить" width="15" height="15"/></a></td>
   <td class="center"><a href="#" target="_blank" title="Просмотреть страницу"><img src="img/edit_pages_thumb.png" alt="Просмотреть страницу" width="16" height="16"/></a></td>
   <td class="center"><a href="#" title="Редактировать"><img src="img/fileexport.png" alt="Редактировать" width="16" height="15"/></a></td>
   <td class="center"><input id="dell[]" name="dell[]" type="checkbox" value="" />  </td>
  </tr>
  <tr class="tr_body tr_border_top">
   <td colspan="5"></td>
   <td class="center"><a href="#" title="Добавить" ><img src="img/add.png" alt="Добавить" width="22" height="22"/></a></td>
   <td class="center"><a href="#" title="Сохранить все" ><img src="img/save_all.png" alt="Сохранить все" width="22" height="22"/></a></td>
   <td class="center"><a href="#" title="Удалить выделенное" ><img src="img/delete.png" alt="Удалить выделенное" width="22" height="22"/></a></td>
  </tr>
 </tbody>
</table>

Кнопки добавления, сохранения, удаления. Эта строка вставляется последней строкой в тело основной таблицы.

  • Кнопка "Добавить" - открывает форму добавления новой страницы.
  • Кнопка "Сохранить все" - здесь нужен более подробный комментарий. Номер строки (столбец "№") в таблице заключен в текстовое поле для возможности оперативного изменения, в данном случае сортировки строк. Когда мы подключим JQUERY, то при щелчке на этот элемент, он станет видимым (измениться фон и бордюр). Таким же образом в текстовое поле можно заключить любую ячейку таблицы. И при нажатии на кнопку "Сохранить все" произойдет сохранение всех текущих строк таблицы. Это удобно, т.к. для некоторых изменений нет необходимости загружать форму редактирования страницы.

Ну, и стилевое оформление:

.path{
 font-weight:normal;
 font-size:13px;
 padding:8px 4px;
 margin:0 1px 0 1px;
 background: #e7eef3 url(img/bg_table.gif) repeat-x bottom;
 border-bottom: #999 solid 1px;
}
.maintable {
 width:100%;
 font: 11px Verdana;
 border-bottom: #CCC solid 1px;
 border-spacing: 1px;
}
.maintable thead tr.header th{
 font-weight: bold;
 font-size: 12px;
 color: #0278B7;
 padding:8px 4px;
 background: #e7eef3 url(img/bg_table_top.gif) repeat-x top;
}
.maintable thead tr.header th.center{
 text-align:center;
}
.maintable thead tr.header th.left{
 text-align:left;
}
.maintable tbody tr.tr_body{
 background: #eef5f9;
}
.maintable tbody tr.odd{
 background-color: #E4F0FA; 
}
.maintable tbody tr.tr_hover{
 cursor: inherit;
 background-color: #DEE9EF;
}
.maintable tbody tr.tr_body td{
 padding:2px;
 vertical-align: middle;
 color: #333;
}
.maintable tbody tr.odd td{
 padding:2px;
 vertical-align: middle;
 color:#333;
}
.maintable tbody tr.tr_body td.center, .maintable tbody tr.odd td.center{
 text-align:center;
}
.maintable tbody tr.tr_body td.left, .maintable tbody tr.odd td.left{
 text-align:left;
}
.maintable tbody tr.tr_border_top td{
 background-color:#e7eef3;
 height:28px;
 vertical-align:middle;
}
.maintable tbody tr.tr_body_line{
 background: #e7eef3;
}
.maintable tr.pag td{
 background-color:#e7eef3;
 height:28px;
 vertical-align:middle;
}
.maintable tr.pag td.td_form_show_str{
 width:110px;
 padding:0 6px;
 text-align:left;
 white-space: nowrap;
}
.maintable tr.pag td.td_pagination_page{
 text-align:center;
}
.maintable tr.pag td.td_field_search{
 width:192px;
 text-align:right;
 white-space: nowrap;
}
.maintable tr.pag td.td_field_search span.search{
 display:inline-block;
 height:22px;
 width:28px;
 margin:0 0 0 8px;
 line-height:22px;
 background:url(img/search.png) no-repeat;
}
.maintable tr.pag a.reset{
 display:inline-block;
 height:22px;
 width:22px;
 line-height:22px;
 text-decoration:none;
 background:url(img/refresh.png) no-repeat;
}
.maintable tr.pag a.reset:hover{
 text-decoration:none;
}
.maintable tr.pag td.td_field_search input{
 width:140px;
}
.t_text{
 background:none;
 border:none;
 font-size:11px;
 padding:4px 2px;
}
.t_textarea{
 background:none;
 border:none;
 font-size:11px;
 padding:4px 2px;
}
.t_text_focus{
 background:#fff;
 font-size:11px;
 font-weight:bold;
 padding:3px 1px;
 border: #F00 solid 1px;
 color: #666;
}
.t_text_focus_green{
 background:#fff;
 font-size:11px;
 font-weight:bold;
 padding:3px 1px;
 border: #3C0 solid 1px;
 color: #666;
}
.small_text{
 width:30px;
 text-align:center;
}
.large_text{
 width:300px;
}
.medium_text{
 width:150px;
}

Небольшие комментарии по стилевому оформлению:

  • Классы "center", "left" - необходимы для позиционирования содержимого ячеек таблицы слева и по центру соответственно.
  • Класс "odd" - нам понадобится в будещем для раскраски четных и нечтных строк таблицы в разные цвета.
  • Классы "t_text", "t_textarea" и ниже - стилевое оформление для текстовых полей в таблице.

Вот собственно и все. В следующей статье будем подключать фреймворк JQUERY и закончим с оформлением основной таблицы центрального контента.

Похожие пубикации

CodeIgniter начало

CodeIgniter начало

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

Верстаем с помощью технологии XSLT

В рубрике CMS - верстка, на момент написания статьи "Верстка элементов центрального контента" был сделан каркас будущей CMS и сверстана центральная часть нашей системы. Теперь сделаем тоже самое, но уже с использованием технологии XML / XSLT.
Делаем основное меню

Делаем основное меню

В левой части админки будет находиться основное меню, с помощью которого мы будем осуществлять навигацию по страницам системы управления контентом. Меню реализуем с помощью jQuery плагина раскрывающееся дерево - jQuery SimpleTree Drag&Drop;.
Добавить комментарий:



Категории
Популярные
Теги
 AJAX   Behaviors   CMS   CodeIgniter   HTML   XML   XSLT   Yii2   css   jquery   php   атрибуты   верстка   контроллер   модули сайта   облако тегов   подсветка синтаксиса   проектирование   хаки 
Copyright 2009 FanCode.Ru. All rights reserved.
Главная    |    Портфолио    |    Возможности    |    Контакты
Back to Top