результат поиска в ucoz с картинками

Скажем так: По просьбам трудящихся ... ... и прочих ... а также по частым вопросам на эту тему - решил доступно, как мне кажется, описать как и сам скрипт, так и процесс его установки на страницу поиска.Кто не понял из названия - повторяю - скрипт написан для сайтов, созданных в системе юКоз, хотя, без особых проблем и с начальными знаниями JScript, может быть переписан практически под любой другой сайт ... естественно - при наличии самого поиска ... .Сам скрипт - не сложный. На красоту и оптимальность не претендует. Почему? - всё просто - универсальность. Он будет работать без настроек и при соблюдении инструкции - на любом юКоз-сайте. Те, кто и сами неплохо знают скриптовой язык, поняв принцип работы, - оптимизируют его чисто под/для себя, ну а те кто нет ... довольствуются имеющимся ... или повышают свои знания... Начнём.Для правильной, да и вообще, для работы скрипта - нам/вам понадобится подключённая стандартная библиотека jQuery, то есть если вы специально ничего не отключали и у вас сайт на юКоз хостиге, она у вас уже подключена (u.js). Больше ничего подключать не нужно. Всё остальное мы напишем сами.Суть скрипта проста. После выдачи результатов - пройтись по всем ссылкам, ссылающимся на страницы поиска, сделать на них запрос и при наличии картинки в контенте, вывести её на страницу с результатами. Задача и принцип ясен ? ... Теперь реализация.Для начала скажу, что буду использовать стандартный юКозовский шаблон #908 ... То есть вот такой:Скриншот Не потому что «нравится» или «удобно» - нет, просто такой стоит и сам шаблон - не имеет принципиального значения.Для наглядности, и понимания что, для чего, как и зачем, вот исходные данные «вида материалов» страницы поиска (фрагмент) и фрагмент (нужный нам/мне) из шаблона вид «материалов и комментариев к нему».Вида материалов  (модуль \search\)Code (Вид материалов) <table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tr><td style="padding:3px;"><div class="eTitle" style="text-align:left;font-weight:normal"><a href="$ENTRY_URL$">$TITLE$</a></div><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div><div class="eDetails" style="clear:both;">$ENTRY_DEPTH$- $SAVING_DATE$</div></td></tr></table><br /> Фрагмент шаблона страницы материалла и комментариев к нему  (любой модуль, в данном случае \news\)Code (Страница материала и комментариев к нему) <table border="0" width="100%" cellspacing="1" cellpadding="2" class="eBlock"><tr><td width="90%"><div class="eTitle"><div style="float:right;font-size:9px;">$ADD_TIME$ $MODER_PANEL$</div><h1>$ENTRY_NAME$</h1></div></td></tr><tr><td class="eMessage">$MESSAGE$ <div style="text-align:left;" class="eAttach"><!--<s3172>-->Прикрепления<!--</s>-->: $ATTACHMENTS$</div></td></tr><tr><td colspan="2" class="eDetails"><div style="float:right"></div><!--<s3179>-->Категория<!--</s>-->: <a href="$CAT_URL$">$CAT_NAME$</a> |<!--<s3177>-->Просмотров<!--</s>-->: $READS$ |<!--<s3178>-->Добавил<!--</s>-->: <a href="$PROFILE_URL$">$USER$</a> | <!--<s5308>-->Теги<!--</s>-->: $TAGS$| <!--<s3119>-->Рейтинг<!--</s>-->: <span id="entRating$ID$">$RATING$</span>/<span id="entRated$ID$">$RATED$</span></td></tr></table> Как и всегда, у меня есть заготовленные шаблоны стандартных функций и подобного - дабы не вбивать каждый раз одно и тоже ... здесь - узнаём о готовности документа, то есть о том, что его объектная модель готова к использованию, обработке скриптом.Не скажу, что это - самая правильная трактовка - зато понятно.... прим. автораCode (JScript) <script type="text/javascript">$(document).ready(function(){// Start DocumentReady// End DocumentReady});</script> Ну и нам, конечно понадобятся некоторые стили:Пропишем стили для картинок-превьюшек, дабы не возвращаться ....Code <style type="text/css">/* StartStyle */img.preview{width:100px;height:100px;float:left;margin:3px 7px 3px 0px;display:inline;}/* EndStyle */</style> Думаю и так всё понятно, но на всякий - объясню.Для картинок, в скрипте, мы зададим класс «preview» - и установим ему ширину и высоту равную 100px, естественно, вы можете установить любые другие атрибуты. Также установим обтекание текстом «float:left» - то есть картинка - слева, текст - справа... и отступы «margin:3px 7px 3px 0px» - то есть 3px - сверху, 7px - справа, 3px - снизу и 0px - слева. По часовой стрелке, начиная с верху. Применительно ко всем сокращённым записям из четырёх параметров. Для ускорения работы скрипта, так как по идентификатору поиск элемента осуществляется быстрее, заключим все результаты поиска, то есть $BODY$, в див и назначим ему ID. Например «searchText».Выглядеть в шаблоне должно вот так:Code<div id="searchText">$BODY$</div>И пишем:Code (JScript) <script type="text/javascript">$(document).ready(function(){// Start DocumentReady$('#searchText table.eBlock div.eTitle a').each(function(){/* Вот здесь будем обрабатывать ответ */});// End DocumentReady});</script> Где:#searchText table.eBlock div.eTitle a - путь до ссылок, по которым осуществляется поиск.И объявим переменные, которые нам понадобятся в процессе:Code <script type="text/javascript">$(document).ready(function(){// Start DocumentReady$('#searchText table.eBlock div.eTitle a').each(function(){var el=$(this),$this=el.parents('table.eBlock'),url=el.attr('href');/* Вот здесь будем обрабатывать ответ */});// End DocumentReady});Где:el=$(this) - назначаем текущей «$(this)» ссылке - имя/псевдоним «el»$this=el.parents('table.eBlock') - объявляем переменную «$this» и определяем её, как родитель «el», то есть - вверх по иерархии от «el» до «table.eBlock»url=el.attr('href') - объявляем ещё одну переменную равную значению атрибута «href» элемента «el»Удаляем лишние модули из поиска по ним картинок, точнее - прописываем те, в которых будем производить поиск.Делается это достаточно просто, всего навсего - проверяем ссылки, которые обрабатываем, на наличие ключевого слова, в данном случае имени модуля. Надеюсь у вас категории/разделы/страницы не имеют в ссылке этих сочетаний ... Иначе - придётся фильтровать немного п

Оформление результатов поиска картинками-превью. Для юКоз

Каталог статей » Оформление сайтов в uCoz

Понедельник 04.02.2013 20:56 Приветствую Вас ГостьCopyright 2005-2013  , Оформление:                   Поиск:

Оформление результатов поиска картинками-превью. Для юКоз - Каталог статей