Воскресенье
19-Ноя-2017, 07:57
Христианские сайты
в системе Ucoz
Приветствую Вас Гость | RSS
Главная Регистрация Вход
Меню сайта

ОднаКнопка

Ошибка на сайте?
Система Orphus

Категории раздела
Шаг за шагом [9]Новости Ucoz [12]
Наши новости [2]Новости Христирнета [8]

Наш опрос
Нужен ли нашему сайту Unet?
Всего ответов: 223

Реклама





Главная » 2009 » Октябрь » 8 » Цикл "Делаем проект с нуля" - Этап 7 - Настройка модуля "Доска объявлений"
Цикл "Делаем проект с нуля" - Этап 7 - Настройка модуля "Доска объявлений"
12:26
Задача, которую я поставил перед собой на сегодня - привести в порядок и настроить нужным мне образом еще один модуль системы - "Доска объявлений".

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

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

Начнем с добавления необходимых разделов и категорий. Работа с ними построена в модуле так, что можно создать удобную иерархию объявлений, разделив их на понятные всем группы. Начну с разделов. На первое время я хочу чтобы пользователи могли размещать объявления связанные с автомобилями и запчастями к ним (впоследствии добавятся и другие разделы). Завожу два раздела - "Автомобили" и "Автозапчасти" . Чтобы структура была более понятна, и все объявления не были собраны в одну большую кучу - разделим их на категории. Для раздела "Автомобили" это будут категории "Продам авто", "Куплю авто", "Аренда авто" и "Автоуслуги".

Для раздела "Автозапчасти" это будут категории "Продам запчасти" и "Куплю запчасти". Для начала хватит. Результат моего труда можно увидеть на скриншоте.



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

.blockb {
border:1px solid #666666;
padding:2px;
margin-bottom:1px;
background:#EFEFEF;
}
Ничего нового в настройке дизайна модуля нет - поэтому подробно на этом останавливаться я не буду. Перейдем к более интересным задачам - в частности, созданию удобных функций для работы с объявлениями. Так как эффективное объявление само по себе предусматривает наличие фотографии предлагаемого товара, сделаем удобную навигацию по фото, прикрепленным пользователем к объявлению. Возможности системы позволяют добавлять до 10 изображений к объявлению - я ограничусь пятью, но сделаю их удобный просмотр непосредственно на странице объявления. В этом мне помогут предоставляемые системой коды, а именно $IMG_URL1..10$, $IMGS_ARRAY_JS$, $IMG_SMALL_URL1..10$. Реализую просмотр таким образом - слева от текста объявления будет размещен блок с изображениями, первое из которых будет показано сразу же, а остальные (если они будут) в виде небольших кликабельных изображений предпросмотра. По нажатию на изображение будет открываться большая картинка - изначально в новом окне, а чуть позднее я реализую это в виде лайтбокса.
Вот что получилось в итоге:

А это javascript, при помощи которого я сделал реализацию этой функции:

<a href="$IMG_URL1$" id="cur_img_lnk" target="_blank">
<img src="$IMG_SMALL_URL1$" align="left" id="cur_img" class="newsPictures"
style="margin-bottom:5px;"></a><br>

$IMGS_ARRAY_JS$
<script type="text/javascript">
function changeImg(img_id) {
document.getElementById('cur_img').src=allEntImgs$ID$[img_id][3];
document.getElementById('cur_img_lnk').href=allEntImgs$ID$[img_id][0];
}
var total_img = allEntImgs$ID$.length;
for (i=0; i<total_img; i++) {
document.write('<span class="img_list"><a href="#"
onClick=changeImg("'+i+'")>'+i+'</a></span>');
}
</script>


Хотелось бы задержаться на минутку и еще раз посмотреть на то, как работает код $IMGS_ARRAY_JS$. При добавлении нескольких изображений в объявление, для каждого из них формируется отдельная запись в переменной $IMGS_ARRAY_JS$, первый параметр которой содержит ссылку на изначальный вариант изображения и его размеры, а второй - на уменьшенный вариант для предпросмотра. Используя несложные функции мы разбираем этот массив - и выводим изображения так как нам надо.

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

P.S. Все вышеописанное по-прежнему можно посмотреть по адресу http://autoclub.ck.ua

Автор - Александр Кожемякин.
Источник - блог Ucoz
Категория: Шаг за шагом | Просмотров: 968 | Добавил: admin | Теги: доска объявлений, Александр Кожемякин, создание сайта
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Ваш профиль



Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!




Поиск

Архив записей

Наша кнопка
Вы можете поместить на свой сайт кнопочку-ссылку на нас. Этим самым вы поможете нам стать известными. За что Вам большое спасибо!



Друзья сайта

Статистика, каталоги

Онлайн всего: 1
Гостей: 1
Пользователей: 0


free counters
Яндекс цитирования wwjd.ru: Христианская поисковая система.
Христианский ТОП JCP.net.ua Маранафа: Библия, словарь, каталог сайтов, форум, чат и многое другое.


Христианские сайты в системе Ucoz - hristov.ucoz.ru © 2017
Каталог христианских сайтов. Христианские сайты. Создать христианский сайт. Создание христианских сайтов. Церковный сайт. Создать церковный сайт. Бесплатно.