Вывод списка новостей в аккордеоне — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
(Новая страница: «"Аккордеоном" принято называть механизм отображения контента, когда основное содержание …»)
 
 
(не показаны 4 промежуточные версии 1 участника)
Строка 1: Строка 1:
−
"Аккордеоном" принято называть механизм отображения контента, когда основное содержание раздела открывается при клике на заголовке.
+
"Аккордеоном" принято называть механизм отображения контента, когда основное содержание раздела открывается при клике на заголовке, при этом ранее открытый раздел сворачивается. Данная статья не является каким-либо готовым решением для сайта, а скорее демонстрирует возможности использования стандартных конструкций библиотеки jQuery в UMI.CMS. Вместо списка новостей можно организовать аналогичный вывод какой-либо другой информации на сайте.
 
Примерный результат выполнения этой статьи можно увидеть открыв в браузере HTML-файл следующего содержания.
 
Примерный результат выполнения этой статьи можно увидеть открыв в браузере HTML-файл следующего содержания.
 
<pre>
 
<pre>
Строка 20: Строка 20:
 
</head>  
 
</head>  
 
 
−
<body style="font-size:62.5%;">  
+
<body>
−
+
<div id="accordion">
−
<div id="accordion">  
 
−
 
 
   
 
   
 
   
 
   
Строка 55: Строка 53:
 
</html>
 
</html>
 
</pre>
 
</pre>
 +
 +
Итак, создаем новый шаблон дизайна accordion.tpl со следующим содержанием:
 +
<pre>
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" xmlns:umi="http://www.umi-cms.ru/TR/umi">
 +
<head>
 +
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 +
<title>%title%</title>
 +
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 +
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 +
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 +
    <script>
 +
  $(document).ready(function() {
 +
    $("#accordion").accordion();
 +
  });
 +
  </script>
 +
</head>
 +
<body>
 +
<div id="accordion">
 +
%news lastlist('vse_novosti/novosti_ekonomiki','acc')%
 +
</div>
 +
 +
</body>
 +
</html>
 +
</pre>
 +
В макросе %news lastlist()% указываем раздел новостей, который хотим выводить и вывод его по шаблону 'acc', который мы создадим далее.
 +
Подключаем шаблон accordion.tpl в настройках модуля "Контент". И указываем его в качестве шаблона дизайна для какой-либо страницы.
 +
Создаем шаблон вывода новостей tpls/news/acc.tpl. За основу можно взять дефолтный шаблон, изменив в нем первые два блока:
 +
<pre>
 +
$FORMS['lastlist_block'] = <<<END
 +
 +
 +
%items%
 +
 +
END;
 +
 +
$FORMS['lastlist_item'] = <<<END
 +
 +
 +
<h3><a href="#">%system convertDate(%publish_time%, 'd.m.Y')% | %name%</a></h3>
 +
<div>
 +
<p>
 +
%content%
 +
</p>
 +
</div>
 +
 +
 +
END;
 +
</pre>
 +
В результате, при открытии страницы, которой мы назначили шаблон дизайна accordion.tpl, будет выводиться список новостей в аккордеоне.
 +
[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]][[Категория:Модуль Новости]][[Категория:Верстка в TPL]]

Текущая версия на 13:29, 5 июня 2013

"Аккордеоном" принято называть механизм отображения контента, когда основное содержание раздела открывается при клике на заголовке, при этом ранее открытый раздел сворачивается. Данная статья не является каким-либо готовым решением для сайта, а скорее демонстрирует возможности использования стандартных конструкций библиотеки jQuery в UMI.CMS. Вместо списка новостей можно организовать аналогичный вывод какой-либо другой информации на сайте. Примерный результат выполнения этой статьи можно увидеть открыв в браузере HTML-файл следующего содержания. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" xmlns:umi="http://www.umi-cms.ru/TR/umi"> 
	<head> 
		<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
		
		<title>Баян</title> 
		
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
  
  <script> 
  $(document).ready(function() {
    $("#accordion").accordion();
  });
  </script> 
	</head> 
	
	<body> 	
		<div id="accordion"> 	
 
 
					
					<h3><a href="#">23.12.2009 | Россия и Белоруссия отказались от ограничений во взаимной торговле</a></h3> 
	<div> 
		<p> 
		<p>Россия и Белоруссия подписали соглашение о мерах по развитию торгово-экономического сотрудничества, которое отменяет существующие ограничения в торговле между странами. Об этом сообщает РИА Новости.  Свои подписи под документом поставили вице-премьер Белоруссии Андрей Кобяков и замглавы Минэкономразвития России Виталий Савельев. Чиновники также договорились и о поставках белорусского сахара в Россию в 2007 и 2008 годах.  Подписание соглашения по торговому сотрудничеству планировалось еще 20 марта. Однако в последний момент белорусская сторона внесла в проект ряд изменений, в связи с чем его пришлось заново согласовывать. По информации газеты "Коммерсант", Белоруссия в последний момент выступила за сдвиг сроков реализации соглашений.  До настоящего времени в Белоруссии существуют квоты на ввоз российского пива, сигарет и морепродуктов. В свою очередь, Россия ограничивает импорт белорусского сахара.  На подготовку соглашения о развитии торгово-экономического сотрудничества ушло около года. Серьезный прогресс в переговорах был достигнут после встречи премьер-министров России и Белоруссии Михаила Фрадкова и Сергея Сидорского в январе 2007 года. Они пообещали отменить около 40 правительственных актов, затрудняющих ввоз российских товаров на территорию Белоруссии.</p> 
		</p> 
	</div> 
					
 
					
					<h3><a href="#">19.12.2009 | Онищенко предлагает пугать курильщиков до смерти</a></h3> 
	<div> 
		<p> 
		<p>Главный санитарный врач России Геннадий Онищенко предложил размещать на сигаретных пачках изображение, наглядно демонстрирующее смертельную опасность курения. Как передает агентство "Интерфакс", на пресс-конференции во вторник, 6 февраля, он заявил: "Моя мечта - сделать, как в Канаде - помещать на пачку изображение легких курильщика на стадии рака".  Онищенко также выразил озабоченность ростом числа курильщиков среди подростков. По его словам, к 11-му классу в России курят 60 процентов мальчиков и 40 процентов девочек, сообщает РИА Новости.  "Табачный бизнес сегодня втягивает все больше наших детей, снижая тем самым их здоровье", - отметил главный санитарный врач РФ.</p> 
		</p> 
	</div> 
					
 
					
					<h3><a href="#">16.12.2009 | Белоруссия отменит квоты на сигареты из России</a></h3> 
	<div> 
		<p> 
		<p>Белоруссия намерена отменить квоты на импорт сигарет из России. Соответствующие поправки внесены министерством торговли в Совет министров, сообщает агентство БЕЛТА.  В последнее время Белоруссия постепенно сокращает квоты на ввоз сигарет, который, в основном, идет с российских предприятий. В 2006 году квота составила полтора миллиарда сигарет, а в 2005 году - три миллиарда. При этом только четыре белорусских компании могут приобретать сигареты за рубежом.  Уменьшением квот Белоруссия пыталась добиться того, чтобы крупные иностранные производители делали сигареты на местных фабриках. В настоящее время белорусские заводы выпускают по лицензии табак под марками Alliance, Viceroy, Magna, Winston, West и другими.  Отмена квот на российские сигареты будет выполнена согласно договоренности между премьер-министрами России и Белоруссии Михаилом Фрадковым и Сергеем Сидорским. Когда в начале января чиновники подписали документы об экспорте нефти и нефтепродуктов, Сидорский пообещал в ближайшем времени отменить около 40 правительственных актов, затрудняющих движение российских товаров.</p> 
		</p> 
	</div>		
</div>		
</body> 
</html>

Итак, создаем новый шаблон дизайна accordion.tpl со следующим содержанием: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" xmlns:umi="http://www.umi-cms.ru/TR/umi">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>%title%</title>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });
  </script>
	</head>	
	<body>		
		<div id="accordion">
			%news lastlist('vse_novosti/novosti_ekonomiki','acc')%
		</div>		
		
	</body>
</html>

В макросе %news lastlist()% указываем раздел новостей, который хотим выводить и вывод его по шаблону 'acc', который мы создадим далее. Подключаем шаблон accordion.tpl в настройках модуля "Контент". И указываем его в качестве шаблона дизайна для какой-либо страницы. Создаем шаблон вывода новостей tpls/news/acc.tpl. За основу можно взять дефолтный шаблон, изменив в нем первые два блока: 

$FORMS['lastlist_block'] = <<<END


%items%

END;

$FORMS['lastlist_item'] = <<<END

					
					<h3><a href="#">%system convertDate(%publish_time%, 'd.m.Y')% | %name%</a></h3>
	<div>
		<p>
		%content%
		</p>
	</div>
					

END;

В результате, при открытии страницы, которой мы назначили шаблон дизайна accordion.tpl, будет выводиться список новостей в аккордеоне.

Источник — «https://wiki.umisoft.ru/index.php?title=Вывод_списка_новостей_в_аккордеоне&oldid=5502»