[Ликбез] |
Форма входа |
Меню сайта |
Categories | ||||
|
Главная » Статьи » Статьи о/про uCoz » Оформление сайтов в uCoz |
Скажем так: Сам скрипт - не сложный. Начнём.Для правильной, да и вообще, для работы скрипта - нам/вам понадобится подключённая стандартная библиотека jQuery, то есть если вы специально ничего не отключали и у вас сайт на юКоз хостиге, она у вас уже подключена (u.js). Больше ничего подключать не нужно. Всё остальное мы напишем сами. Суть скрипта проста. Теперь реализация. Для начала скажу, что буду использовать стандартный юКозовский шаблон #908 ... То есть вот такой: Скриншот Не потому что «нравится» или «удобно» - нет, просто такой стоит и сам шаблон - не имеет принципиального значения. Для наглядности, и понимания что, для чего, как и зачем, вот исходные данные «вида материалов» страницы поиска (фрагмент) и фрагмент (нужный нам/мне) из шаблона вид «материалов и комментариев к нему». Вида материалов (модуль \search\) Code (Вид материалов) <table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tr><td style="padding:3px;"> Фрагмент шаблона страницы материалла и комментариев к нему (любой модуль, в данном случае \news\) Code (Страница материала и комментариев к нему) <table border="0" width="100%" cellspacing="1" cellpadding="2" class="eBlock"> Как и всегда, у меня есть заготовленные шаблоны стандартных функций и подобного - дабы не вбивать каждый раз одно и тоже ... здесь - узнаём о готовности документа, то есть о том, что его объектная модель готова к использованию, обработке скриптом. Code (JScript) <script type="text/javascript"> Ну и нам, конечно понадобятся некоторые стили: Пропишем стили для картинок-превьюшек, дабы не возвращаться .... Code <style type="text/css"> Думаю и так всё понятно, но на всякий - объясню.
Для ускорения работы скрипта, так как по идентификатору поиск элемента осуществляется быстрее, заключим все результаты поиска, то есть $BODY$, в див и назначим ему ID. Например «searchText». Code <div id="searchText">$BODY$</div> И пишем: Code (JScript) <script type="text/javascript"> Где: И объявим переменные, которые нам понадобятся в процессе: Code <script type="text/javascript"> Где: $this=el.parents('table.eBlock') - объявляем переменную «$this» и определяем её, как родитель «el», то есть - вверх по иерархии от «el» до «table.eBlock» url=el.attr('href') - объявляем ещё одну переменную равную значению атрибута «href» элемента «el» Удаляем лишние модули из поиска по ним картинок, точнее - прописываем те, в которых будем производить поиск. И, если находим, совершаем запрос на страницу с URL той ссылки, которую находим в результатах поиска... Пример: Code $(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'); if(/load|publ|blog|dir|news/i.test(url.toLowerCase())){ $.get(url,{},function(data){ /* Вот здесь будем обрабатывать ответ */ }); }; }); // End DocumentReady }); Где: «url» - мы объявили ещё в начале скрипта: «url=el.attr('href')» - то есть - ссылка текущего элемента из элементов поиска. Дальше - обрабатываем результат запроса - ответ. Для начала - отфильтруем все ответы с материалов, в которых нет картинок ... (у меня таких много ... ) и, заодно объявим ещё одину переменную - «src» - ссылка на первую «img:eq(0)» картинку из поста. И, если она не равна «undefined» - продолжаем выполнение скрипта. Code var src=$(data).find('td.eMessage img:eq(0)').attr('src')||'undefined'; if(src!=='undefined'){ /* Вот здесь будем обрабатывать ответ */ }; А вот функция, которая будет создавать картинку, задавать ей параметр «src» и сласс, и вставлять в результат поиска. Code $this.find('div.eMessage').prepend($('<img/>').attr('src', src).addClass('preview')); Где: Осталось всё собрать воедино ... ヅ И вот что у нас, у меня и, надеюсь, у вас, получилось ..... Code $(document).ready(function(){ /*Start DocumentReady*/ $('#searchText table.eBlock div.eTitle a').each(function(){ /*Start each*/ var el=$(this),$this=el.parents('table.eBlock'),url=el.attr('href'); if(/load|publ|blog|dir|news/i.test(url.toLowerCase())){ /*Start if*/ $.get(url,{},function(data){ /*Start get*/ var src=$(data).find('td.eMessage img:eq(0)').attr('src')||'undefined'; if(src!=='undefined'){ /*Start src*/ $this.find('div.eMessage').prepend($('<img/>').attr('src', src).addClass('preview')); /*End src*/ }; /*End get*/ }); /*End If*/ }; /*End each*/ }); /*End DocumentReady*/ }); Если вы не очень хорошо ориентируетесь по коду JScript, да и просто, для простоты и наглядности, во время написания/разработки - старайтесь подписывать функции во избежании ошибок. Code $(function(){ $('#searchText table.eBlock div.eTitle a').each(function(){ var el=$(this),$this=el.parents('table.eBlock'),url=el.attr('href'); if(/load|publ|blog|dir|news/i.test(url.toLowerCase())){ $.get(url,{},function(data){var src=$(data).find('td.eMessage img:eq(0)').attr('src')||'undefined'; if(src!=='undefined'){$this.find('div.eMessage').prepend($('<img/>').attr('src', src).addClass('preview'));}; });};}); }); В завершении. Скрипт можно загнать в отдельный JS-файл и подключать. Это уже на ваш выбор.... ヅ. Результат, точнее живую версию скрипта можно посмотреть и опробовать вот тут.
Для тех, кому всё это не интересно.Quote (Дуб дубом) Для таких "деревьев", как я написали бы попроще: вот это ставим перед /(/body) - "КОД", вот это вместо $BODY$ - "Код", а это перед /head - "КОД" Я признателен автору, и понимаю желание показать все в деталях, объяснив каждую функцию, и выбор возможностей. Но я ничего не понял О, да ... Возможно, вы и правы. Идём в ПУ » Управление дизайном » Поиск по сайту » Страница поиска, заменяем оператор $BODY$ на: Code (HTML) <div id="searchText">$BODY$</div> Или на вот это: Code (HTML) <div id="searchText">$BODY$</div> Скрипт скачиваем себе, меняем ссылку. Обсудить что-то конкретное и/или задать более подробные вопросы по теме, можно на форуме, в теме: Оформление результатов поиска картинками-превью. Тема для подробных/иных вопросов по материалу. Обсуждения ... (если не устраивает - создайте свою тему) или - в комментариях. Под нестандартные дизайны скрипт требует корректировки. Источник: скрипт, ucoz, что, цитировать, url, поиска, code, find, скрипт поиска для ucoz, превью, ucoz jquery | |
Всего комментариев: 46 | 1 2 3 4 » | ||||||||||||
| |||||||||||||
1-10 11-20 21-30 31-33 | |||||||||||||